@nextclaw/ui 0.12.9 → 0.12.11

package/src/lib/session-context.utils.ts

@@ -1,4 +1,4 @@
-import type { SessionEntryView } from '@/api/types';
+import type { SessionEntryView, SessionTypeIconView } from '@/api/types';
 import { t } from '@/lib/i18n';
 import { getChannelLogo } from '@/lib/logos';
 
@@ -6,6 +6,7 @@ type SessionContextSymbolIcon = 'heartbeat' | 'cron';
 
 export type SessionContextIcon =
   | { kind: 'channel-logo'; channel: string }
+  | { kind: 'runtime-image'; src: string; alt?: string | null; name?: string | null }
   | { kind: 'symbol'; icon: SessionContextSymbolIcon };
 
 export type SessionContextView = {
@@ -55,6 +56,17 @@ function resolveSessionTypeLabel(
   return toTitleCaseByDelimiter(normalized);
 }
 
+function resolveSessionTypeOption(
+  sessionType: string,
+  options: Array<{ value: string; label: string; icon?: SessionTypeIconView | null }>
+): { value: string; label: string; icon?: SessionTypeIconView | null } | null {
+  const normalized = normalize(sessionType);
+  if (!normalized || normalized === 'native') {
+    return null;
+  }
+  return options.find((option) => normalize(option.value) === normalized) ?? null;
+}
+
 function resolveChannelLogoName(channel: string): string | null {
   const normalized = normalize(channel);
   if (!normalized) {
@@ -66,7 +78,7 @@ function resolveChannelLogoName(channel: string): string | null {
 
 export function resolveSessionContextView(
   session: SessionEntryView,
-  options: Array<{ value: string; label: string }>
+  options: Array<{ value: string; label: string; icon?: SessionTypeIconView | null }>
 ): SessionContextView {
   const logoChannel = resolveChannelLogoName(session.channel ?? '');
   if (logoChannel) {
@@ -83,6 +95,18 @@ export function resolveSessionContextView(
   }
 
   const sessionType = normalize(session.sessionType);
+  const matchedSessionTypeOption = resolveSessionTypeOption(sessionType, options);
+  if (matchedSessionTypeOption?.icon?.src?.trim()) {
+    return {
+      icon: {
+        kind: 'runtime-image',
+        src: matchedSessionTypeOption.icon.src,
+        alt: matchedSessionTypeOption.icon.alt ?? null,
+        name: matchedSessionTypeOption.label
+      },
+      label: null,
+    };
+  }
   const labelKey = SESSION_TYPE_LABEL_REGISTRY[sessionType];
   if (labelKey) {
     return { icon: null, label: t(labelKey) };
@@ -90,6 +114,7 @@ export function resolveSessionContextView(
 
   return {
     icon: null,
-    label: resolveSessionTypeLabel(session.sessionType, options),
+    label:
+      matchedSessionTypeOption?.label?.trim() || resolveSessionTypeLabel(session.sessionType, options),
   };
 }

package/src/lib/session-project/workspace-file-breadcrumb.test.ts

@@ -0,0 +1,83 @@
+import { describe, expect, it } from "vitest";
+import { buildWorkspaceFileBreadcrumb } from "@/lib/session-project/workspace-file-breadcrumb";
+
+describe("buildWorkspaceFileBreadcrumb", () => {
+  it("builds project-relative breadcrumbs for files inside the active workspace", () => {
+    const breadcrumb = buildWorkspaceFileBreadcrumb({
+      path: "/Users/demo/project-alpha/src/chat/example.tsx",
+      sessionProjectRoot: "/Users/demo/project-alpha",
+      truncated: false,
+    });
+
+    expect(breadcrumb.segments).toEqual([
+      {
+        key: "workspace:project-alpha",
+        label: "project-alpha",
+        kind: "workspace",
+        isCurrent: false,
+      },
+      {
+        key: "0:src",
+        label: "src",
+        kind: "directory",
+        isCurrent: false,
+      },
+      {
+        key: "1:chat",
+        label: "chat",
+        kind: "directory",
+        isCurrent: false,
+      },
+      {
+        key: "2:example.tsx",
+        label: "example.tsx",
+        kind: "file",
+        isCurrent: true,
+      },
+    ]);
+  });
+
+  it("keeps absolute path breadcrumbs when the file sits outside the workspace root", () => {
+    const breadcrumb = buildWorkspaceFileBreadcrumb({
+      path: "/tmp/example.ts",
+      sessionProjectRoot: "/Users/demo/project-alpha",
+      truncated: false,
+    });
+
+    expect(breadcrumb.segments).toEqual([
+      {
+        key: "root:/",
+        label: "/",
+        kind: "root",
+        isCurrent: false,
+      },
+      {
+        key: "0:tmp",
+        label: "tmp",
+        kind: "directory",
+        isCurrent: false,
+      },
+      {
+        key: "1:example.ts",
+        label: "example.ts",
+        kind: "file",
+        isCurrent: true,
+      },
+    ]);
+  });
+
+  it("attaches line metadata for the workspace breadcrumb bar", () => {
+    const breadcrumb = buildWorkspaceFileBreadcrumb({
+      path: "README.md",
+      sessionProjectRoot: "/Users/demo/project-alpha",
+      line: 12,
+      column: 4,
+      truncated: true,
+    });
+
+    expect(breadcrumb.locationLabel).toBe("L12:4");
+    expect(breadcrumb.truncated).toBe(true);
+    expect(breadcrumb.segments[0]?.label).toBe("project-alpha");
+    expect(breadcrumb.segments[1]?.label).toBe("README.md");
+  });
+});

package/src/lib/session-project/workspace-file-breadcrumb.ts

@@ -0,0 +1,188 @@
+import { getSessionProjectName } from "@/lib/session-project/session-project.utils";
+
+export type WorkspaceFileBreadcrumbSegmentViewModel = {
+  key: string;
+  label: string;
+  kind: "workspace" | "root" | "directory" | "file";
+  isCurrent: boolean;
+};
+
+export type WorkspaceFileBreadcrumbViewModel = {
+  fullPath: string;
+  locationLabel: string | null;
+  truncated: boolean;
+  segments: WorkspaceFileBreadcrumbSegmentViewModel[];
+};
+
+function trimPathSeparators(value: string): string {
+  if (/^[A-Za-z]:[\\/]?$/.test(value) || value === "/") {
+    return value;
+  }
+  return value.replace(/[\\/]+$/, "");
+}
+
+function normalizeComparablePath(value: string): string {
+  const trimmed = trimPathSeparators(value.trim().replace(/\\/g, "/"));
+  return /^[A-Za-z]:/.test(trimmed)
+    ? `${trimmed.slice(0, 1).toLowerCase()}${trimmed.slice(1)}`
+    : trimmed;
+}
+
+function readDisplaySegments(value: string): {
+  prefix: string | null;
+  segments: string[];
+} {
+  const normalized = value.trim().replace(/\\/g, "/");
+
+  if (!normalized) {
+    return { prefix: null, segments: [] };
+  }
+
+  if (/^[A-Za-z]:\//.test(normalized)) {
+    return {
+      prefix: normalized.slice(0, 2),
+      segments: normalized.slice(3).split("/").filter(Boolean),
+    };
+  }
+
+  if (normalized.startsWith("/")) {
+    return {
+      prefix: "/",
+      segments: normalized.slice(1).split("/").filter(Boolean),
+    };
+  }
+
+  return {
+    prefix: null,
+    segments: normalized.split("/").filter(Boolean),
+  };
+}
+
+function readRelativeSegments(params: {
+  path: string;
+  sessionProjectRoot: string;
+}): string[] | null {
+  const normalizedPath = normalizeComparablePath(params.path);
+  const normalizedRoot = normalizeComparablePath(params.sessionProjectRoot);
+
+  if (!normalizedPath || !normalizedRoot) {
+    return null;
+  }
+
+  if (
+    !normalizedPath.startsWith("/") &&
+    !/^[A-Za-z]:\//.test(normalizedPath)
+  ) {
+    return normalizedPath.split("/").filter(Boolean);
+  }
+
+  if (normalizedPath === normalizedRoot) {
+    return [];
+  }
+
+  const rootPrefix = normalizedRoot.endsWith("/")
+    ? normalizedRoot
+    : `${normalizedRoot}/`;
+
+  if (!normalizedPath.startsWith(rootPrefix)) {
+    return null;
+  }
+
+  return normalizedPath.slice(rootPrefix.length).split("/").filter(Boolean);
+}
+
+function buildSegmentsFromLabels(params: {
+  labels: string[];
+  leading?: WorkspaceFileBreadcrumbSegmentViewModel | null;
+}): WorkspaceFileBreadcrumbSegmentViewModel[] {
+  const { labels, leading = null } = params;
+  const items = labels.map<WorkspaceFileBreadcrumbSegmentViewModel>(
+    (label, index) => ({
+      key: `${index}:${label}`,
+      label,
+      kind: index === labels.length - 1 ? "file" : "directory",
+      isCurrent: index === labels.length - 1,
+    }),
+  );
+
+  return leading ? [leading, ...items] : items;
+}
+
+function buildLocationLabel(params: {
+  line?: number | null;
+  column?: number | null;
+}): string | null {
+  const { column, line } = params;
+
+  if (typeof line !== "number") {
+    return null;
+  }
+
+  return `L${line}${typeof column === "number" ? `:${column}` : ""}`;
+}
+
+export function buildWorkspaceFileBreadcrumb(params: {
+  path: string;
+  sessionProjectRoot: string | null;
+  line?: number | null;
+  column?: number | null;
+  truncated: boolean;
+}): WorkspaceFileBreadcrumbViewModel {
+  const { column, line, path, sessionProjectRoot, truncated } = params;
+  const fullPath = path.trim();
+  const relativeSegments =
+    sessionProjectRoot?.trim() && fullPath
+      ? readRelativeSegments({
+          path: fullPath,
+          sessionProjectRoot,
+        })
+      : null;
+
+  let segments: WorkspaceFileBreadcrumbSegmentViewModel[];
+
+  if (sessionProjectRoot?.trim() && relativeSegments) {
+    const workspaceLabel =
+      getSessionProjectName(sessionProjectRoot) ?? sessionProjectRoot.trim();
+
+    segments = buildSegmentsFromLabels({
+      labels: relativeSegments,
+      leading: {
+        key: `workspace:${workspaceLabel}`,
+        label: workspaceLabel,
+        kind: "workspace",
+        isCurrent: relativeSegments.length === 0,
+      },
+    });
+  } else {
+    const { prefix, segments: labels } = readDisplaySegments(fullPath);
+    segments = buildSegmentsFromLabels({
+      labels,
+      leading: prefix
+        ? {
+            key: `root:${prefix}`,
+            label: prefix,
+            kind: "root",
+            isCurrent: labels.length === 0,
+          }
+        : null,
+    });
+  }
+
+  if (segments.length === 0) {
+    segments = [
+      {
+        key: "file:unknown",
+        label: fullPath || "file",
+        kind: "file",
+        isCurrent: true,
+      },
+    ];
+  }
+
+  return {
+    fullPath,
+    locationLabel: buildLocationLabel({ line, column }),
+    truncated,
+    segments,
+  };
+}

package/src/platforms/desktop/index.ts

@@ -0,0 +1,20 @@
+export {
+  desktopPresenceManager,
+  DesktopPresenceManager,
+} from './managers/desktop-presence.manager';
+export {
+  desktopUpdateManager,
+  DesktopUpdateManager,
+} from './managers/desktop-update.manager';
+export { useDesktopPresenceStore } from './stores/desktop-presence.store';
+export { useDesktopUpdateStore } from './stores/desktop-update.store';
+export type {
+  DesktopPresencePreferences,
+  DesktopPresenceSnapshot,
+  DesktopReleaseChannel,
+  DesktopRuntimeControlResult,
+  DesktopUpdatePreferences,
+  DesktopUpdateSnapshot,
+  DesktopUpdateStatus,
+  NextClawDesktopBridge,
+} from './types/desktop-update.types';

package/src/{desktop → platforms/desktop}/managers/desktop-presence.manager.ts

@@ -1,8 +1,8 @@
 import type {
   DesktopPresencePreferences,
   NextClawDesktopBridge
-} from '@/desktop/desktop-update.types';
-import { useDesktopPresenceStore } from '@/desktop/stores/desktop-presence.store';
+} from '@/platforms/desktop/types/desktop-update.types';
+import { useDesktopPresenceStore } from '@/platforms/desktop/stores/desktop-presence.store';
 import { t } from '@/lib/i18n';
 import { toast } from 'sonner';
 

package/src/{desktop → platforms/desktop}/managers/desktop-update.manager.ts

@@ -3,8 +3,8 @@ import type {
   DesktopUpdatePreferences,
   DesktopUpdateSnapshot,
   NextClawDesktopBridge
-} from '@/desktop/desktop-update.types';
-import { useDesktopUpdateStore } from '@/desktop/stores/desktop-update.store';
+} from '@/platforms/desktop/types/desktop-update.types';
+import { useDesktopUpdateStore } from '@/platforms/desktop/stores/desktop-update.store';
 import { t } from '@/lib/i18n';
 import { toast } from 'sonner';
 

package/src/{desktop → platforms/desktop}/stores/desktop-presence.store.ts

@@ -1,4 +1,4 @@
-import type { DesktopPresenceSnapshot } from '@/desktop/desktop-update.types';
+import type { DesktopPresenceSnapshot } from '@/platforms/desktop/types/desktop-update.types';
 import { create } from 'zustand';
 
 type DesktopPresenceBusyAction = 'loading' | 'saving-preferences' | null;

package/src/{desktop → platforms/desktop}/stores/desktop-update.store.ts

@@ -1,4 +1,4 @@
-import type { DesktopUpdateSnapshot } from '@/desktop/desktop-update.types';
+import type { DesktopUpdateSnapshot } from '@/platforms/desktop/types/desktop-update.types';
 import { create } from 'zustand';
 
 type DesktopUpdateBusyAction =

package/src/stores/ui.store.ts

@@ -1,12 +1,6 @@
 import { create } from 'zustand';
 
-type ConnectionStatus = 'connected' | 'disconnected' | 'connecting';
-
 interface UiState {
-  // Connection status
-  connectionStatus: ConnectionStatus;
-  setConnectionStatus: (status: ConnectionStatus) => void;
-
   // Channel modal
   channelModal: { open: boolean; channel?: string };
   openChannelModal: (channel?: string) => void;
@@ -14,9 +8,6 @@ interface UiState {
 }
 
 export const useUiStore = create<UiState>((set) => ({
-  connectionStatus: 'disconnected',
-  setConnectionStatus: (status) => set({ connectionStatus: status }),
-
   channelModal: { open: false },
   openChannelModal: (channel) => set({ channelModal: { open: true, channel } }),
   closeChannelModal: () => set({ channelModal: { open: false } })

package/src/transport/{app-client.ts → app-client.service.ts}

@@ -1,5 +1,5 @@
 import { API_BASE } from '@/api/api-base';
-import { LocalAppTransport } from './local.transport';
+import { LocalAppTransport } from './local-transport.service';
 import { RemoteSessionMultiplexTransport } from './remote.transport';
 import type { AppTransport, RemoteRuntimeInfo, RequestInput, StreamInput, StreamSession } from './transport.types';
 
@@ -59,18 +59,18 @@ class AppClient {
 
   constructor(private readonly apiBase: string = API_BASE) {}
 
-  private async getTransport(): Promise<AppTransport> {
+  private getTransport = async (): Promise<AppTransport> => {
     if (!this.transportPromise) {
       this.transportPromise = resolveRuntime(this.apiBase);
     }
     return await this.transportPromise;
-  }
+  };
 
-  async request<T>(input: RequestInput): Promise<T> {
+  request = async <T>(input: RequestInput): Promise<T> => {
     return await (await this.getTransport()).request<T>(input);
-  }
+  };
 
-  openStream<TFinal = unknown>(input: StreamInput): StreamSession<TFinal> {
+  openStream = <TFinal = unknown>(input: StreamInput): StreamSession<TFinal> => {
     let currentSession: StreamSession<TFinal> | null = null;
     let resolveFinished!: (value: TFinal) => void;
     let rejectFinished!: (error: Error) => void;
@@ -94,9 +94,9 @@ class AppClient {
       finished,
       cancel: () => currentSession?.cancel()
     };
-  }
+  };
 
-  subscribe(handler: (event: Parameters<Parameters<AppTransport['subscribe']>[0]>[0]) => void): () => void {
+  subscribe = (handler: (event: Parameters<Parameters<AppTransport['subscribe']>[0]>[0]) => void): () => void => {
     let unsubscribe = () => {};
     let active = true;
     void this.getTransport().then((transport) => {
@@ -117,7 +117,7 @@ class AppClient {
       active = false;
       unsubscribe();
     };
-  }
+  };
 }
 
 export const appClient = new AppClient();

package/src/transport/app-client.test.ts

@@ -21,12 +21,16 @@ describe('appClient runtime detection', () => {
     );
     vi.stubGlobal('fetch', fetchMock);
 
-    const { LocalAppTransport } = await import('@/transport/local.transport');
-    const localRequest = vi
-      .spyOn(LocalAppTransport.prototype, 'request')
-      .mockResolvedValue({ ok: true } as never);
+    const localRequest = vi.fn().mockResolvedValue({ ok: true } as never);
+    vi.doMock('@/transport/local-transport.service', () => ({
+      LocalAppTransport: class {
+        request = localRequest;
+        openStream = vi.fn();
+        subscribe = vi.fn();
+      }
+    }));
 
-    const { appClient } = await import('@/transport/app-client');
+    const { appClient } = await import('@/transport/app-client.service');
     const result = await appClient.request<{ ok: boolean }>({
       method: 'GET',
       path: '/api/config'

package/src/transport/index.ts

@@ -1,4 +1,4 @@
-export { appClient } from './app-client';
+export { appClient } from './app-client.service';
 export type {
   AppEvent,
   AppTransport,

package/src/transport/{local.transport.ts → local-transport.service.ts}

@@ -1,6 +1,7 @@
 import { API_BASE } from '@/api/api-base';
-import { requestRawApiResponse } from '@/api/raw-client';
+import { requestRawApiResponse } from '@/api/raw-client.utils';
 import type { ApiResponse } from '@/api/types';
+import { systemStatusManager } from '@/features/system-status';
 import type { AppEvent, AppTransport, RequestInput, StreamInput, StreamSession } from './transport.types';
 import { readSseStreamResult } from './sse-stream';
 import { resolveTransportWebSocketUrl } from './transport-websocket-url';
@@ -42,7 +43,7 @@ class LocalRealtimeGateway {
 
   constructor(private readonly wsUrl: string) {}
 
-  subscribe(handler: EventHandler): () => void {
+  subscribe = (handler: EventHandler): () => void => {
     this.subscribers.add(handler);
     if (this.subscribers.size === 1) {
       this.connect();
@@ -56,15 +57,15 @@ class LocalRealtimeGateway {
         this.disconnect();
       }
     };
-  }
+  };
 
-  private emit(event: AppEvent): void {
+  private emit = (event: AppEvent): void => {
     for (const subscriber of this.subscribers) {
       subscriber(event);
     }
-  }
+  };
 
-  private connect(): void {
+  private connect = (): void => {
     if (this.socket && (this.socket.readyState === WebSocket.CONNECTING || this.socket.readyState === WebSocket.OPEN)) {
       return;
     }
@@ -96,9 +97,9 @@ class LocalRealtimeGateway {
         this.scheduleReconnect();
       }
     };
-  }
+  };
 
-  private scheduleReconnect(): void {
+  private scheduleReconnect = (): void => {
     if (this.reconnectTimer !== null) {
       return;
     }
@@ -106,9 +107,9 @@ class LocalRealtimeGateway {
       this.reconnectTimer = null;
       this.connect();
     }, 3_000);
-  }
+  };
 
-  private disconnect(): void {
+  private disconnect = (): void => {
     this.manualClose = true;
     if (this.reconnectTimer !== null) {
       window.clearTimeout(this.reconnectTimer);
@@ -116,7 +117,7 @@ class LocalRealtimeGateway {
     }
     this.socket?.close();
     this.socket = null;
-  }
+  };
 }
 
 export class LocalAppTransport implements AppTransport {
@@ -154,7 +155,7 @@ export class LocalAppTransport implements AppTransport {
       return response.data;
     } catch (error) {
       if (controller?.signal.aborted) {
-        const reason = controller.signal.reason;
+        const { reason } = controller.signal;
         throw new Error(typeof reason === 'string' && reason.trim() ? reason : `Request timed out: ${input.method} ${input.path}`);
       }
       if (error instanceof Error) {
@@ -196,6 +197,7 @@ export class LocalAppTransport implements AppTransport {
           signal: controller.signal
         });
       } catch (error) {
+        systemStatusManager.reportTransportFailure(formatUnknownTransportError(error));
         throw createErrorWithCause(
           `Stream request failed for ${input.method} ${input.path} | ${formatUnknownTransportError(error)}`,
           error