+
@@ -28,7 +30,6 @@
+
+
diff --git a/src/composables/auth.ts b/src/composables/auth.ts
index c941bec..9974722 100644
--- a/src/composables/auth.ts
+++ b/src/composables/auth.ts
@@ -1,80 +1,222 @@
-import { ref, type Ref } from 'vue';
+/**
+ * auth.ts — Zitadel OIDC PKCE authentication
+ *
+ * Flow:
+ * 1. User clicks "Sign in" → redirect to Zitadel authorize endpoint
+ * 2. Zitadel authenticates → redirects back with ?code=...
+ * 3. We exchange code for tokens (access_token + id_token)
+ * 4. access_token stored in localStorage, used for all /api/* requests
+ * 5. On load: check if token exists and is not expired
+ */
+
+import { ref, computed, type Ref } from 'vue';
import router from '../router';
-
-const SESSION_TOKEN_KEY = 'nyx_session';
-
import { getApiBase } from '../utils/apiBase';
-// Dev service token — auto-login for development
-const DEV_TOKEN = '7Oorb9S3OpwFyWgm4zi_Tq7GeamefbjjTgooPVPWAwPDOf6B4TvgvQlLbhmT4DjsqBS_D1g';
+const TOKEN_KEY = 'nyx_session';
+const VERIFIER_KEY = 'pkce_verifier';
+const RETURN_KEY = 'auth_return_path';
+
+// Zitadel config — fetched from backend or hardcoded fallback
+let _issuer = 'https://auth.loop42.de';
+let _clientId = '365996029172056091';
+const _redirectUri = `${window.location.origin}/login`;
+const _scopes = 'openid profile email';
+
+async function _fetchAuthConfig(): Promise
{
+ try {
+ const base = getApiBase();
+ const res = await fetch(`${base}/auth/config`);
+ if (res.ok) {
+ const cfg = await res.json();
+ if (cfg.issuer) _issuer = cfg.issuer;
+ if (cfg.clientId) _clientId = cfg.clientId;
+ }
+ } catch { /* use defaults */ }
+}
+
+// PKCE helpers
+function _generateVerifier(): string {
+ const arr = new Uint8Array(32);
+ crypto.getRandomValues(arr);
+ return btoa(String.fromCharCode(...arr))
+ .replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
+}
+
+async function _generateChallenge(verifier: string): Promise {
+ const data = new TextEncoder().encode(verifier);
+ const hash = await crypto.subtle.digest('SHA-256', data);
+ return btoa(String.fromCharCode(...new Uint8Array(hash)))
+ .replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
+}
+
+function _isTokenExpired(token: string): boolean {
+ try {
+ const payload = JSON.parse(atob(token.split('.')[1]));
+ return payload.exp * 1000 < Date.now();
+ } catch {
+ return true;
+ }
+}
+
+function _getStoredToken(): string | null {
+ const token = localStorage.getItem(TOKEN_KEY);
+ if (!token) return null;
+ if (_isTokenExpired(token)) {
+ localStorage.removeItem(TOKEN_KEY);
+ return null;
+ }
+ return token;
+}
+
+function _getUserNameFromToken(): string {
+ // Prefer cached name from id_token (access_token may lack profile claims)
+ const cached = localStorage.getItem('nyx_user');
+ if (cached) return cached;
+ const token = localStorage.getItem(TOKEN_KEY);
+ if (!token) return '';
+ try {
+ const payload = JSON.parse(atob(token.split('.')[1]));
+ return payload.name || payload.preferred_username || payload.email || '';
+ } catch {
+ return '';
+ }
+}
export function useAuth(connectFn: () => void) {
- // Auto-set dev token if no token exists
- if (!localStorage.getItem(SESSION_TOKEN_KEY) && !localStorage.getItem('titan_token')) {
- localStorage.setItem(SESSION_TOKEN_KEY, DEV_TOKEN);
- }
- const isLoggedIn: Ref = ref(!!localStorage.getItem(SESSION_TOKEN_KEY));
- const loginToken: Ref = ref('');
+ const isLoggedIn: Ref = ref(!!_getStoredToken());
const loginError: Ref = ref('');
const loggingIn: Ref = ref(false);
+ // Legacy compat — not used in PKCE flow but some UI may reference it
+ const loginToken: Ref = ref('');
+ const currentUser = computed(() => isLoggedIn.value ? _getUserNameFromToken() : '');
+ /**
+ * Start PKCE login — redirect to Zitadel.
+ * Stores current path so we can return after login.
+ */
async function doLogin(): Promise {
- const token = loginToken.value.trim();
- if (!token) return;
loggingIn.value = true;
loginError.value = '';
+ await _fetchAuthConfig();
+
+ const verifier = _generateVerifier();
+ const challenge = await _generateChallenge(verifier);
+ sessionStorage.setItem(VERIFIER_KEY, verifier);
+
+ // Remember where to go after login
+ const returnPath = window.location.pathname;
+ if (returnPath !== '/login') {
+ sessionStorage.setItem(RETURN_KEY, returnPath);
+ }
+
+ const params = new URLSearchParams({
+ response_type: 'code',
+ client_id: _clientId,
+ redirect_uri: _redirectUri,
+ scope: _scopes,
+ code_challenge: challenge,
+ code_challenge_method: 'S256',
+ });
+
+ window.location.href = `${_issuer}/oauth/v2/authorize?${params}`;
+ }
+
+ /**
+ * Handle callback from Zitadel — exchange code for token.
+ * Called from LoginView when ?code= is in the URL.
+ */
+ async function handleCallback(code: string): Promise {
+ loggingIn.value = true;
+ loginError.value = '';
+
+ const verifier = sessionStorage.getItem(VERIFIER_KEY);
+ if (!verifier) {
+ loginError.value = 'Missing PKCE verifier — please try again.';
+ loggingIn.value = false;
+ return false;
+ }
+ sessionStorage.removeItem(VERIFIER_KEY);
+
try {
- const nonceRes = await fetch(`${getApiBase()}/api/auth/nonce`);
- if (!nonceRes.ok) { loginError.value = 'Auth unavailable'; loggingIn.value = false; return; }
- const { nonce } = await nonceRes.json();
- const res = await fetch(`${getApiBase()}/api/auth`, {
+ const res = await fetch(`${_issuer}/oauth/v2/token`, {
method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ token, nonce }),
+ headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+ body: new URLSearchParams({
+ grant_type: 'authorization_code',
+ client_id: _clientId,
+ code,
+ redirect_uri: _redirectUri,
+ code_verifier: verifier,
+ }),
});
+
if (!res.ok) {
- const err = await res.json().catch(() => ({ error: 'Login failed' }));
- loginError.value = err.error || 'Invalid token';
+ const err = await res.json().catch(() => ({}));
+ loginError.value = err.error_description || err.error || 'Token exchange failed';
loggingIn.value = false;
- return;
+ return false;
}
- const { sessionToken } = await res.json();
- localStorage.removeItem('titan_token');
- localStorage.removeItem('nyx_token');
- localStorage.setItem(SESSION_TOKEN_KEY, sessionToken);
- sessionStorage.removeItem('agent');
+
+ const data = await res.json();
+ const token = data.access_token;
+ if (!token) {
+ loginError.value = 'No access token received';
+ loggingIn.value = false;
+ return false;
+ }
+
+ // Extract user name from id_token (access_token may not have profile claims)
+ if (data.id_token) {
+ try {
+ const idPayload = JSON.parse(atob(data.id_token.split('.')[1]));
+ const name = idPayload.name || idPayload.preferred_username || idPayload.email || '';
+ if (name) localStorage.setItem('nyx_user', name);
+ } catch { /* ignore */ }
+ }
+
+ // Store token and mark logged in
+ localStorage.setItem(TOKEN_KEY, token);
+ isLoggedIn.value = true;
+
+ // Connect transport
+ connectFn();
+
+ // Navigate to return path or /nyx
+ const returnPath = sessionStorage.getItem(RETURN_KEY) || '/nyx';
+ sessionStorage.removeItem(RETURN_KEY);
+ router.push(returnPath);
+
+ loggingIn.value = false;
+ return true;
+ } catch (e) {
+ loginError.value = 'Network error during token exchange';
+ loggingIn.value = false;
+ return false;
+ }
+ }
+
+ /**
+ * Auto-connect if we have a valid token on page load.
+ */
+ function tryAutoConnect(): void {
+ if (_getStoredToken()) {
isLoggedIn.value = true;
connectFn();
- router.push('/chat');
- setTimeout(() => { loggingIn.value = false; }, 500);
- } catch {
- loginError.value = 'Network error';
- loggingIn.value = false;
}
}
async function doLogout(disconnectFn?: () => void): Promise {
- const sessionToken = localStorage.getItem(SESSION_TOKEN_KEY);
- if (sessionToken) {
- // Fire-and-forget revoke
- fetch(`${getApiBase()}/api/auth/logout`, {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ sessionToken }),
- }).catch(() => {});
- }
if (disconnectFn) disconnectFn();
- localStorage.removeItem(SESSION_TOKEN_KEY);
- localStorage.removeItem('titan_token');
- localStorage.removeItem('nyx_token');
+ localStorage.removeItem(TOKEN_KEY);
+ localStorage.removeItem('nyx_user');
+ sessionStorage.removeItem('nyx_ws_session');
sessionStorage.removeItem('agent');
- sessionStorage.removeItem('viewer_auth'); // clear cached fstoken
isLoggedIn.value = false;
- loginToken.value = '';
loggingIn.value = false;
router.push('/');
}
- return { isLoggedIn, loginToken, loginError, loggingIn, doLogin, doLogout };
+ return { isLoggedIn, loginToken, loginError, loggingIn, currentUser, doLogin, doLogout, handleCallback, tryAutoConnect };
}
diff --git a/src/composables/useBreakout.ts b/src/composables/useBreakout.ts
index 41d330b..c9d24cf 100644
--- a/src/composables/useBreakout.ts
+++ b/src/composables/useBreakout.ts
@@ -56,7 +56,7 @@ export function useBreakout() {
pendingRequest.value = null;
if (!confirmed) { resolve({ error: 'rejected by user' }); return; }
const token = deriveToken(parentToken, name);
- const url = `${window.location.origin}${window.location.pathname}?breakout_token=${token}/agents`;
+ const url = `${window.location.origin}${window.location.pathname}?breakout_token=${token}/nyx`;
const popup = window.open(url, `hermes_breakout_${name}`, `width=${pw},height=${ph},resizable=yes,scrollbars=yes`);
if (!popup) { resolve({ error: 'popup blocked' }); return; }
windows.set(name, popup);
@@ -70,7 +70,7 @@ export function useBreakout() {
function openDirect(name: string, presetStr: string, parentToken: string) {
const [w, h] = presetStr.split('x').map(Number);
const token = deriveToken(parentToken, name);
- const url = `${window.location.origin}${window.location.pathname}?breakout_token=${token}/agents`;
+ const url = `${window.location.origin}${window.location.pathname}?breakout_token=${token}/nyx`;
const popup = window.open(url, `hermes_breakout_${name}`, `width=${w},height=${h},resizable=yes,scrollbars=yes`);
if (!popup) { alert('Popup blocked -- allow popups for this site'); return; }
windows.set(name, popup);
diff --git a/src/composables/ws.ts b/src/composables/ws.ts
index e714835..f4c284c 100644
--- a/src/composables/ws.ts
+++ b/src/composables/ws.ts
@@ -1,8 +1,12 @@
/**
- * ws.ts — WebSocket transport layer
+ * ws.ts — Streamable HTTP transport layer
*
- * Pure connection management: connect, disconnect, reconnect, send, onMessage.
- * Delegates takeover commands to useTakeover.
+ * Replaced WebSocket with HTTP POST + SSE streaming.
+ * Each message = one POST /api/chat, response is SSE stream (delta, hud, done, etc.).
+ * Session init = GET /api/session.
+ *
+ * Keeps the same API surface (connect, send, onMessage, connected, etc.)
+ * so useAgentSocket.ts and all consumers work unchanged.
*
* All mutable state is module-level so it survives Vite HMR.
* useWebSocket() returns a stable API over that shared state.
@@ -22,22 +26,18 @@ interface MessagePayload {
// ── Module-level state — stored on window.__hermes to survive Vite HMR ──
const H = useHermes();
-// WebSocket + ping timer
-let _ws: WebSocket | null = H.ws ?? null;
-let _pingInterval: ReturnType | null = H.wsPing ?? null;
// Callbacks + buffer
const _onMessageCallbacks: ((data: any) => void)[] = H.wsCbs ?? [];
const _messageBuffer: any[] = H.wsBuf ?? [];
-// Reconnect
-let _reconnectTimer: ReturnType | null = null;
-let _reconnectDelay = 1000;
-let _pendingAuth = false; // WS open but agent was empty — send auth when agent is set
// Refs (re-bound on connect)
-let _selectedAgentRef: Ref | null = null;
-let _selectedModeRef: Ref | null = null;
let _isLoggedInRef: Ref | null = null;
let _loginErrorRef: Ref | null = null;
let _takeover: ReturnType | null = null;
+// Abort controller for in-flight chat request
+let _chatAbort: AbortController | null = null;
+// Health stream abort + reconnect
+let _healthAbort: AbortController | null = null;
+let _healthReconnectTimer: ReturnType | null = null;
const connected = H.wsConnected ?? ref(false);
const status = H.wsStatus ?? ref('Disconnected');
@@ -54,8 +54,25 @@ H.wsInit = isInitialLoad;
H.wsCbs = _onMessageCallbacks;
H.wsBuf = _messageBuffer;
-function send(payload: MessagePayload): void {
- if (_ws && _ws.readyState === WebSocket.OPEN) _ws.send(JSON.stringify(payload));
+function getToken(): string {
+ return localStorage.getItem('nyx_session') || '';
+}
+
+function getApiBase(): string {
+ const wsUrl = import.meta.env.VITE_WS_URL as string | undefined;
+ if (!wsUrl) return '';
+ try {
+ const url = new URL(wsUrl);
+ const proto = url.protocol === 'wss:' ? 'https:' : 'http:';
+ return `${proto}//${url.host}`;
+ } catch {
+ return '';
+ }
+}
+
+function _dispatch(data: any) {
+ _messageBuffer.push(data);
+ _onMessageCallbacks.forEach(fn => fn(data));
}
function getTakeover() {
@@ -63,132 +80,278 @@ function getTakeover() {
return _takeover;
}
-// Dev service token — skip login UI for now
-const DEV_TOKEN = '7Oorb9S3OpwFyWgm4zi_Tq7GeamefbjjTgooPVPWAwPDOf6B4TvgvQlLbhmT4DjsqBS_D1g';
+/**
+ * Health stream: SSE connection for instant disconnect detection.
+ * Server sends heartbeat every 15s. If stream breaks → disconnected.
+ */
+async function _startHealthStream(): Promise {
+ if (_healthAbort) _healthAbort.abort();
+ _healthAbort = new AbortController();
+ const base = getApiBase();
+ const token = getToken();
-function getWsUrl(): string {
- let base: string;
- if (import.meta.env.VITE_WS_URL) {
- base = import.meta.env.VITE_WS_URL as string;
- } else {
- const params = new URLSearchParams(window.location.search);
- const wsHost = params.get('ws') || window.location.hostname;
- const wsPort = params.get('port') || window.location.port;
- const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
- base = `${protocol}//${wsHost}:${wsPort}/ws`;
+ try {
+ const res = await fetch(`${base}/api/health-stream`, {
+ headers: { 'Authorization': `Bearer ${token}` },
+ signal: _healthAbort.signal,
+ });
+ if (!res.ok) return;
+
+ const reader = res.body!.getReader();
+ const decoder = new TextDecoder();
+ const wasDisconnected = !connected.value;
+ connected.value = true;
+ status.value = 'Connected';
+ if (wasDisconnected) {
+ _dispatch({ type: 'connection_state', state: 'SYNCED' });
+ }
+
+ while (true) {
+ const { done, value } = await reader.read();
+ if (done) break;
+ const text = decoder.decode(value, { stream: true });
+ if (text.includes('heartbeat')) {
+ connected.value = true;
+ status.value = 'Connected';
+ }
+ }
+ } catch (e: any) {
+ if (e.name === 'AbortError') return;
}
- // Append token + session as query params (assay auth pattern)
- const token = localStorage.getItem('nyx_session') || localStorage.getItem('titan_token') || DEV_TOKEN;
- const session = sessionStorage.getItem('nyx_ws_session') || '';
- const qs = new URLSearchParams();
- if (token) qs.set('token', token);
- if (session) qs.set('session', session);
- return qs.toString() ? `${base}?${qs}` : base;
+
+ // Stream ended or errored — server gone
+ connected.value = false;
+ status.value = 'Disconnected';
+ _dispatch({ type: 'connection_state', state: 'CONNECTING' });
+ // Auto-reconnect after 3s
+ if (_healthReconnectTimer) clearTimeout(_healthReconnectTimer);
+ _healthReconnectTimer = setTimeout(() => {
+ _healthReconnectTimer = null;
+ if (_isLoggedInRef?.value !== false) _startHealthStream();
+ }, 3000);
}
-function scheduleReconnect() {
- if (_reconnectTimer) return;
- if (!_isLoggedInRef?.value) return;
- status.value = `Reconnecting in ${Math.round(_reconnectDelay / 1000)}s…`;
- _reconnectTimer = setTimeout(() => {
- _reconnectTimer = null;
- if (_isLoggedInRef?.value) connect(_selectedAgentRef!, _isLoggedInRef!, _loginErrorRef!);
- }, _reconnectDelay);
- _reconnectDelay = Math.min(_reconnectDelay * 2, 16000);
-}
-
-function connect(
+/**
+ * Connect: fetch or create session via GET /api/session, then mark connected.
+ */
+async function connect(
selectedAgent: Ref,
isLoggedInRef: Ref,
loginErrorRef: Ref,
- selectedMode?: Ref
-): void {
- if (_ws && _ws.readyState <= WebSocket.OPEN) return;
- _selectedAgentRef = selectedAgent;
- _selectedModeRef = selectedMode ?? null;
+ _selectedMode?: Ref
+): Promise {
_isLoggedInRef = isLoggedInRef;
_loginErrorRef = loginErrorRef;
- _reconnectDelay = 1000;
- // Poll setup happens in onopen if agent is empty
- console.log('WS CONNECT attempt, ws state:', _ws?.readyState, 'url:', getWsUrl());
- const wsUrl = getWsUrl();
+
if (isInitialLoad.value) {
status.value = 'Connecting...';
isInitialLoad.value = false;
}
- _ws = new WebSocket(wsUrl);
- H.ws = _ws;
+ const base = getApiBase();
+ const token = getToken();
+ const existingSession = sessionStorage.getItem('nyx_ws_session') || '';
+ const qs = new URLSearchParams();
+ if (existingSession) qs.set('session', existingSession);
- _ws.onopen = () => {
- _reconnectDelay = 1000;
- // Auth is via query params — no auth message needed
- // Just start ping keepalive
- if (_pingInterval) clearInterval(_pingInterval);
- _pingInterval = setInterval(() => {
- if (_ws?.readyState === WebSocket.OPEN) _ws.send(JSON.stringify({ type: 'ping' }));
- }, 30000);
- H.wsPing = _pingInterval;
- };
-
- _ws.onmessage = (event) => {
- try {
- const data = JSON.parse(event.data);
- if (data.type === 'dev_cmd' && data.cmdId && data.cmd) {
- getTakeover().dispatch(data.cmdId, data.cmd, data.args || {}, send);
- return;
- }
- // Session info from assay — store for reconnect
- if (data.type === 'session_info') {
- sessionId.value = data.session_id;
- sessionStorage.setItem('nyx_ws_session', data.session_id);
- }
- // Ready signal from assay — mark connected
- if (data.type === 'ready') {
- connected.value = true;
- status.value = 'Connected';
- }
- if (data.type === 'error' && data.code === 'SESSION_TERMINATED') {
- console.warn('Message bounced: Session terminated.');
- }
- _messageBuffer.push(data);
- _onMessageCallbacks.forEach(fn => fn(data));
- } catch (e) {
- console.error('Parse error:', e);
- }
- };
-
- _ws.onclose = (e) => {
- if (_pingInterval) { clearInterval(_pingInterval); _pingInterval = null; }
- connected.value = false;
- _messageBuffer.length = 0;
- if (e.code === 4001) {
+ try {
+ const res = await fetch(`${base}/api/session?${qs}`, {
+ headers: { 'Authorization': `Bearer ${token}` },
+ });
+ if (res.status === 401) {
isLoggedInRef.value = false;
loginErrorRef.value = 'Session expired. Please log in again.';
localStorage.removeItem('nyx_session');
localStorage.removeItem('titan_token');
- sessionStorage.removeItem('agent');
status.value = 'Logged out';
- // Redirect to login — avoids broken UI with stale state
if (window.location.pathname !== '/login') {
window.location.pathname = '/login';
}
- } else {
- scheduleReconnect();
+ return;
}
+ if (!res.ok) {
+ status.value = `Error ${res.status}`;
+ return;
+ }
+ const data = await res.json();
+ sessionId.value = data.session_id;
+ sessionStorage.setItem('nyx_ws_session', data.session_id);
+
+ // Dispatch session_info + ready (same as old WS handshake)
+ _dispatch({ type: 'session_info', session_id: data.session_id });
+ _dispatch({
+ type: 'ready',
+ session_id: data.session_id,
+ graph: data.graph,
+ history_len: data.history_len,
+ });
+
+ connected.value = true;
+ status.value = 'Connected';
+
+ // Start health stream for instant disconnect detection
+ _startHealthStream();
+ } catch (e) {
+ console.error('[http] connect failed:', e);
+ status.value = 'Connection failed';
+ }
+}
+
+/**
+ * Send a message via POST /api/chat. Response is SSE stream.
+ * Events are dispatched through the same onMessage callbacks.
+ */
+function send(payload: MessagePayload): void {
+ if (!connected.value) return;
+
+ const base = getApiBase();
+ const token = getToken();
+
+ // Build request body
+ const body: Record = {
+ session_id: sessionId.value,
};
- _ws.onerror = () => {};
+ if (payload.type === 'message') {
+ body.content = payload.content || '';
+ if (payload.dashboard) body.dashboard = payload.dashboard;
+ } else if (payload.type === 'action') {
+ body.action = payload.action;
+ if (payload.data) body.action_data = payload.data;
+ } else if (payload.type === 'new') {
+ // New session — use dedicated endpoint
+ _createNewSession();
+ return;
+ } else if (payload.type === 'stop') {
+ _stopPipeline();
+ return;
+ } else if (payload.type === 'ping') {
+ return; // No-op for HTTP
+ } else if (payload.type === 'switch_agent') {
+ // Agent switching not yet implemented in HTTP — ignore for now
+ return;
+ } else {
+ // Unknown type — skip
+ return;
+ }
+
+ // Abort previous in-flight request if any
+ if (_chatAbort) _chatAbort.abort();
+ _chatAbort = new AbortController();
+
+ _streamChat(base, token, body, _chatAbort.signal);
+}
+
+async function _streamChat(base: string, token: string, body: Record, signal: AbortSignal): Promise {
+ try {
+ const res = await fetch(`${base}/api/chat`, {
+ method: 'POST',
+ headers: {
+ 'Authorization': `Bearer ${token}`,
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify(body),
+ signal,
+ });
+
+ if (res.status === 401) {
+ _isLoggedInRef!.value = false;
+ _loginErrorRef!.value = 'Session expired. Please log in again.';
+ status.value = 'Logged out';
+ return;
+ }
+ if (!res.ok) {
+ const detail = await res.text().catch(() => `${res.status}`);
+ console.error('[chat] HTTP error:', res.status, detail);
+ _dispatch({ type: 'error', detail });
+ return;
+ }
+
+ // Read SSE stream
+ const reader = res.body!.getReader();
+ const decoder = new TextDecoder();
+ let buffer = '';
+
+ while (true) {
+ const { done, value } = await reader.read();
+ if (done) break;
+
+ buffer += decoder.decode(value, { stream: true });
+
+ // Parse SSE events from buffer
+ const lines = buffer.split('\n');
+ buffer = lines.pop()!; // Keep incomplete last line
+
+ for (const line of lines) {
+ if (line.startsWith('data: ')) {
+ try {
+ const data = JSON.parse(line.slice(6));
+ _dispatch(data);
+ } catch (e) {
+ console.error('[chat] SSE parse error:', e, line);
+ }
+ }
+ // Skip event: lines — we get the type from the data payload
+ }
+ }
+
+ // Process any remaining buffer
+ if (buffer.startsWith('data: ')) {
+ try {
+ const data = JSON.parse(buffer.slice(6));
+ _dispatch(data);
+ } catch { /* ignore partial */ }
+ }
+ } catch (e: any) {
+ if (e.name === 'AbortError') return; // Intentional abort
+ console.error('[chat] stream error:', e);
+ } finally {
+ _chatAbort = null;
+ }
+}
+
+async function _createNewSession(): Promise {
+ const base = getApiBase();
+ const token = getToken();
+ try {
+ const res = await fetch(`${base}/api/sessions`, {
+ method: 'POST',
+ headers: {
+ 'Authorization': `Bearer ${token}`,
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({}),
+ });
+ if (!res.ok) return;
+ const data = await res.json();
+ sessionId.value = data.session_id;
+ sessionStorage.setItem('nyx_ws_session', data.session_id);
+ _dispatch({ type: 'session_info', session_id: data.session_id });
+ _dispatch({ type: 'cleared' });
+ } catch (e) {
+ console.error('[http] new session failed:', e);
+ }
+}
+
+async function _stopPipeline(): Promise {
+ const base = getApiBase();
+ const token = getToken();
+ try {
+ await fetch(`${base}/api/stop`, {
+ method: 'POST',
+ headers: { 'Authorization': `Bearer ${token}` },
+ });
+ if (_chatAbort) _chatAbort.abort();
+ _dispatch({ type: 'stopped' });
+ } catch (e) {
+ console.error('[http] stop failed:', e);
+ }
}
function disconnect(): void {
- if (_pingInterval) { clearInterval(_pingInterval); _pingInterval = null; H.wsPing = null; }
- if (_ws) {
- _ws.onclose = null;
- _ws.close();
- _ws = null;
- H.ws = null;
- }
+ if (_chatAbort) { _chatAbort.abort(); _chatAbort = null; }
+ if (_healthAbort) { _healthAbort.abort(); _healthAbort = null; }
+ if (_healthReconnectTimer) { clearTimeout(_healthReconnectTimer); _healthReconnectTimer = null; }
connected.value = false;
status.value = 'Disconnected';
currentUser.value = '';
@@ -196,23 +359,9 @@ function disconnect(): void {
isInitialLoad.value = true;
}
-function sendDeferredAuth(): void {
- // Auth is via query params now — no-op for backward compat
-}
-
-// Poll for agent becoming available after deferred auth (no Vue watch to avoid circular imports)
-let _deferredAuthPoll: ReturnType | null = null;
-function setupDeferredAuthPoll() {
- if (_deferredAuthPoll) return;
- _deferredAuthPoll = setInterval(() => {
- if (!_pendingAuth) { clearInterval(_deferredAuthPoll!); _deferredAuthPoll = null; return; }
- sendDeferredAuth();
- }, 100);
-}
-
function switchAgent(agentId: string, mode?: string): void {
_messageBuffer.length = 0;
- send({ type: 'switch_agent', agent: agentId, mode: mode ?? _selectedModeRef?.value ?? 'private' });
+ send({ type: 'switch_agent', agent: agentId, mode: mode ?? 'private' });
}
function clearBuffer(): void {
@@ -231,6 +380,9 @@ function replayBuffer(fn: (data: any) => void): void {
_messageBuffer.forEach(data => fn(data));
}
+// Backward compat — not needed for HTTP but some code may reference it
+function sendDeferredAuth(): void {}
+
export function useWebSocket() {
return {
connected, status, currentUser, sessionId,
diff --git a/src/main.ts b/src/main.ts
index 541c92d..aaaa578 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -28,7 +28,6 @@ import '../css/markdown.css';
import '../css/views/agents.css';
import '../css/views/home.css';
import '../css/views/login.css';
-import '../css/views/dev.css';
import App from './App.vue';
import router from './router';
diff --git a/src/router.ts b/src/router.ts
index 9c4a67e..fde05dc 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -9,14 +9,25 @@ const router = createRouter({
{ path: '/impressum', name: 'impressum', component: () => import('./views/ImpressumView.vue'), meta: { suffix: 'Impressum' } },
{ path: '/datenschutz', name: 'datenschutz', component: () => import('./views/DatenschutzView.vue'), meta: { suffix: 'Datenschutz' } },
{ path: '/login', name: 'login', component: LoginView, meta: { suffix: 'Login' } },
- { path: '/agents', name: 'agents', component: () => import('./views/AgentsView.vue'), meta: { suffix: 'Home', requiresSocket: true } },
- { path: '/chat', redirect: '/agents' },
- { path: '/dev', name: 'dev', component: () => import('./views/DevView.vue'), meta: { suffix: 'Dev', requiresSocket: true } },
- { path: '/viewer', name: 'viewer', component: () => import('./views/ViewerView.vue'), meta: { suffix: 'Viewer', requiresSocket: true } },
+ { path: '/nyx', name: 'nyx', component: () => import('./views/AgentsView.vue'), meta: { suffix: 'nyx', requiresAuth: true } },
+ { path: '/agents', redirect: '/nyx' },
+ { path: '/chat', redirect: '/nyx' },
+ { path: '/viewer', name: 'viewer', component: () => import('./views/ViewerView.vue'), meta: { suffix: 'Viewer', requiresAuth: true } },
{ path: '/:pathMatch(.*)*', redirect: '/' },
],
});
+// Auth guard — redirect to /login for protected routes
+router.beforeEach((to) => {
+ if (to.meta?.requiresAuth) {
+ const token = localStorage.getItem('nyx_session');
+ if (!token) {
+ sessionStorage.setItem('auth_return_path', to.fullPath);
+ return { name: 'login' };
+ }
+ }
+});
+
router.afterEach((to) => {
const { theme } = useTheme();
const brand = THEME_NAMES[theme.value] || 'loop42';
diff --git a/src/store.ts b/src/store.ts
index 6c9c763..f1f0cbf 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -28,12 +28,14 @@ export const takeover = ws.getTakeover();
export const agents = useAgents(ws.connected);
agents.setCurrentUser(ws.currentUser);
-// Auth — on login, connect WS (sends auth — BE returns agent list even without agent selected)
+// Auth — on login/auto-connect, start HTTP transport
export const auth = useAuth(() => {
ws.connect(agents.selectedAgent, auth.isLoggedIn, auth.loginError, agents.selectedMode);
// Pre-warm viewer token in background so agent→viewer is instant
useViewerStore().acquire();
});
+// Auto-connect if valid token exists from previous session (deferred so Pinia is ready)
+setTimeout(() => auth.tryAutoConnect(), 0);
// Re-export viewer store accessor for use in views
export { useViewerStore };
diff --git a/src/views/AgentsView.vue b/src/views/AgentsView.vue
index 329e9e6..844c306 100644
--- a/src/views/AgentsView.vue
+++ b/src/views/AgentsView.vue
@@ -239,15 +239,8 @@ import { getApiBase } from '../utils/apiBase';
const agentsRoute = useRoute();
const chatStore = useChatStore();
-// Show picker when route has no ?agent= param (overview mode)
-const showPicker = computed(() => !agentsRoute.query.agent);
-
-// When navigating to /agents without params, clear selection so picker shows
-watch(() => agentsRoute.query.agent, (val) => {
- if (!val && agentsRoute.name === 'agents') {
- // Don't clear selectedAgent ref — just show picker via showPicker computed
- }
-}, { immediate: true });
+// No picker — always show chat.
+const showPicker = computed(() => false);
// Previous sessions (server-fetched, supports load-more)
interface PrevSession { messages: any[]; timestamp: string | null; timeLabel: string }
const prevSessions = ref([]);
@@ -316,7 +309,7 @@ function pickAgent(agentId: string, mode: string) {
sessionStorage.setItem('agent', agentId);
sessionStorage.setItem('agent_mode', mode);
// Update URL with query params so showPicker switches to chat
- router.push({ name: 'agents', query: { agent: agentId, mode } });
+ router.push({ name: 'nyx', query: { agent: agentId, mode } });
if (ws.connected.value) {
ws.switchAgent(agentId, mode);
} else {
@@ -326,6 +319,18 @@ function pickAgent(agentId: string, mode: string) {
const agentLogo = computed(() => getAgentLogo(selectedAgent.value));
+// Auto-select default agent when navigating to /nyx without ?agent= param
+// Watch both query.agent and defaultAgent — defaultAgent arrives from server after connect
+watch(
+ [() => agentsRoute.query.agent, defaultAgent],
+ ([queryAgent, defAgent]) => {
+ if (!queryAgent && agentsRoute.name === 'nyx' && defAgent && !selectedAgent.value) {
+ pickAgent(defAgent, 'private');
+ }
+ },
+ { immediate: true },
+);
+
const { sending, input, messagesEl, scrollToBottom, scrollIfAtBottom, send: _send, onInputChange, navigateHistory, restoreLastSent } = useMessages(wsSend);
const controlsEl = ref(null);
@@ -374,7 +379,7 @@ if (typeof window !== 'undefined') {
(window as any).__toolCallMap = toolCallMapSnapshot;
}
-const viewActive = computed(() => agentsRoute.name === 'agents');
+const viewActive = computed(() => agentsRoute.name === 'nyx');
// --- Scroll logic ---
// On user send: scroll so user message sits at top of viewport.
diff --git a/src/views/CompanyView.vue b/src/views/CompanyView.vue
index e3ef9f2..5f9c396 100644
--- a/src/views/CompanyView.vue
+++ b/src/views/CompanyView.vue
@@ -5,7 +5,6 @@
Eigene Plattform. Eigene Infrastruktur. Eigene Regeln.
nyx
Produkte kennenlernen, ausprobieren, Zugang einrichten — direkt hier, direkt mit nyx.
-
nyx öffnen
+
nyx öffnen
Don't Panic.