@nextclaw/ui 0.25.4 → 0.26.1

package/src/features/right-panel-resources/components/page-resource-icon.tsx

@@ -0,0 +1,245 @@
+import { parseSystemObjectReferenceUri } from "@nextclaw/shared";
+import { useInfiniteNcpSessions } from "@/features/chat";
+import { parseSessionKeyFromPanelUrl } from "@/features/chat";
+import { useAgentIdentity } from "@/shared/components/common/agent-identity/use-agent-identity";
+import { parseResourceUri } from "@/shared/lib/resource-uri";
+import { useState } from "react";
+import {
+  Plug,
+  ListTodo,
+  Bot,
+  Folder,
+  Sparkles,
+  Inbox,
+  AlarmClock,
+  AppWindow,
+  BookOpen,
+  Boxes,
+  Eye,
+  File,
+  FolderTree,
+  GitBranch,
+  Github,
+  Globe,
+  LayoutDashboard,
+  Link2,
+  MessageSquare,
+  PanelsTopLeft,
+  Plus,
+} from "lucide-react";
+import { usePanelApps } from "@/features/panel-apps";
+import { readPanelAppIdFromParsedResourceUri } from "@/features/right-panel-resources/utils/right-panel-resource-uri.utils";
+import type { DocBrowserDockIcon } from "@/shared/components/doc-browser/types/doc-browser.types";
+import { FileTypeIcon } from "@/shared/components/file-type-icon";
+
+const RESOURCE_ICONS = {
+  mcp: Plug,
+  work: ListTodo,
+  agent: Bot,
+  project: Folder,
+  skill: Sparkles,
+  inbox: Inbox,
+  session: MessageSquare,
+  file: File,
+  app: AppWindow,
+  docs: BookOpen,
+  website: Globe,
+  generic: Link2,
+  page: PanelsTopLeft,
+  overview: LayoutDashboard,
+  "child-sessions": GitBranch,
+  "project-files": FolderTree,
+  cron: AlarmClock,
+  "continuous-attention": Eye,
+};
+const OBJECT_TYPE_ICONS: Record<string, keyof typeof RESOURCE_ICONS> = {
+  agent: "agent",
+  project: "project",
+  skill: "skill",
+  "cron-job": "cron",
+  "inbox-delivery": "inbox",
+  "service-app": "app",
+  "panel-app": "app",
+  "mcp-server": "mcp",
+  "project-work": "work",
+};
+const BUILTIN_ICONS: Record<string, typeof Globe> = {
+  apps: Boxes,
+  docs: BookOpen,
+  github: Github,
+  "new-tab": Plus,
+  "panel-app": AppWindow,
+  "service-apps": AppWindow,
+};
+
+function resourceTypeIcon(
+  uri: string,
+  appId: string | null,
+): keyof typeof RESOURCE_ICONS {
+  if (uri.startsWith("nextclaw://workspace?")) {
+    const kind = new URL(uri).searchParams.get("page");
+    return kind && Object.hasOwn(RESOURCE_ICONS, kind)
+      ? (kind as keyof typeof RESOURCE_ICONS)
+      : "page";
+  }
+  const object = parseSystemObjectReferenceUri(uri);
+  if (object) return OBJECT_TYPE_ICONS[object.objectType] ?? "generic";
+  if (
+    uri.startsWith("nextclaw://skill/") ||
+    uri.startsWith("nextclaw://marketplace-detail/skill")
+  )
+    return "skill";
+  if (uri.startsWith("nextclaw://page?")) return "page";
+  if (uri.startsWith("nextclaw://chat-session")) return "session";
+  if (
+    uri.startsWith("nextclaw://workspace-file") ||
+    uri.startsWith("file:") ||
+    uri.startsWith("nextclaw://file/")
+  )
+    return "file";
+  if (
+    appId ||
+    uri.startsWith("nextclaw://apps") ||
+    uri.startsWith("nextclaw://marketplace")
+  )
+    return "app";
+  if (uri.startsWith("nextclaw://docs")) return "docs";
+  return /^https?:/.test(uri) ? "website" : "generic";
+}
+
+function appIcon(value?: string): DocBrowserDockIcon | undefined {
+  if (!value) return undefined;
+  return /^(https?:|data:image\/|\/)/.test(value)
+    ? { type: "url", url: value }
+    : { type: "text", value };
+}
+
+function PanelAppResourceIcon({ uri, appId }: { uri: string; appId: string }) {
+  const apps = usePanelApps();
+  return (
+    <ResourceIcon
+      uri={uri}
+      specific={appIcon(
+        apps.data?.entries.find((entry) => entry.appId === appId || entry.id === appId)?.icon,
+      )}
+    />
+  );
+}
+
+function ConversationResourceIcon({
+  uri,
+  sessionKey,
+}: {
+  uri: string;
+  sessionKey: string;
+}) {
+  const sessions = useInfiniteNcpSessions({ pageSize: 100 });
+  const session = sessions.data?.pages
+    .flatMap((page) => page.sessions)
+    .find((item) => item.sessionId === sessionKey);
+  const identity = useAgentIdentity(session?.agentId);
+  return (
+    <ResourceIcon
+      uri={uri}
+      specific={
+        identity?.avatarUrl
+          ? { type: "url", url: identity.avatarUrl }
+          : undefined
+      }
+    />
+  );
+}
+
+function AgentResourceIcon({ uri, agentId }: { uri: string; agentId: string }) {
+  const identity = useAgentIdentity(agentId);
+  return (
+    <ResourceIcon
+      uri={uri}
+      specific={
+        identity?.avatarUrl
+          ? { type: "url", url: identity.avatarUrl }
+          : undefined
+      }
+    />
+  );
+}
+
+export function PageResourceIcon({
+  uri,
+  icon,
+}: {
+  uri: string;
+  icon?: DocBrowserDockIcon;
+}) {
+  const appId = readPanelAppIdFromParsedResourceUri(parseResourceUri(uri));
+  const sessionKey = parseSessionKeyFromPanelUrl(uri);
+  const object = parseSystemObjectReferenceUri(uri);
+  if (object?.objectType === "panel-app" && !icon)
+    return <PanelAppResourceIcon uri={uri} appId={object.objectId} />;
+  if (object?.objectType === "agent" && !icon)
+    return <AgentResourceIcon uri={uri} agentId={object.objectId} />;
+  if (sessionKey && !icon)
+    return <ConversationResourceIcon uri={uri} sessionKey={sessionKey} />;
+  return appId && !icon ? (
+    <PanelAppResourceIcon uri={uri} appId={appId} />
+  ) : (
+    <ResourceIcon uri={uri} specific={icon} />
+  );
+}
+
+function ResourceIcon({
+  uri,
+  specific,
+}: {
+  uri: string;
+  specific?: DocBrowserDockIcon;
+}) {
+  const appId = readPanelAppIdFromParsedResourceUri(parseResourceUri(uri));
+  const [failedUrl, setFailedUrl] = useState<string | null>(null);
+  if (
+    specific?.type === "url" &&
+    specific.url !== failedUrl &&
+    /^(https?:\/\/|data:image\/|\/)/.test(specific.url)
+  ) {
+    return (
+      <img
+        src={specific.url}
+        alt=""
+        referrerPolicy="no-referrer"
+        className="shrink-0 rounded-sm object-contain align-[-0.12em]"
+        // Inline geometry keeps prose image rules from expanding resource icons.
+        style={{ display: "inline-block", width: "1em", height: "1em", maxWidth: "1em", margin: 0 }}
+        onError={() => setFailedUrl(specific.url)}
+      />
+    );
+  }
+  if (specific?.type === "text")
+    return (
+      <span
+        aria-hidden="true"
+        className="inline-block h-[1em] w-[1em] shrink-0 overflow-hidden text-center leading-none"
+      >
+        {specific.value}
+      </span>
+    );
+  let pathname = uri;
+  try {
+    pathname = new URL(uri).searchParams.get("path") ?? new URL(uri).pathname;
+  } catch {
+    /* Local file link. */
+  }
+  if (
+    resourceTypeIcon(uri, appId) === "file" &&
+    /\.[a-z0-9]{1,8}(?:[?#]|$)/i.test(pathname)
+  )
+    return <FileTypeIcon fileName={pathname} size="compact" />;
+  const Icon =
+    (specific?.type === "builtin" && BUILTIN_ICONS[specific.name]) ||
+    RESOURCE_ICONS[resourceTypeIcon(uri, appId)];
+  return (
+    <Icon
+      aria-hidden="true"
+      className="inline-block h-[1em] w-[1em] shrink-0 align-[-0.12em]"
+    />
+  );
+}

package/src/features/right-panel-resources/components/page-resource-sidebar-nav.tsx

@@ -0,0 +1,119 @@
+import { useState } from "react";
+import { ChevronDown, PanelsTopLeft } from "lucide-react";
+import { SidebarNavLinkItem } from "@/app/components/layout/sidebar-items";
+import { SIDEBAR_RAIL_CONTROL_CLASS, SIDEBAR_RAIL_SURFACE_CLASS } from "@/app/components/layout/sidebar-rail.styles";
+import { usePanelApps } from "@/features/panel-apps";
+import { createPanelAppRightPanelResourceTarget } from "@/features/right-panel-resources/utils/right-panel-resource-uri.utils";
+import {
+  pageResourceFromTarget,
+  pageResourceMainPath,
+} from "@/features/right-panel-resources/utils/page-resource-identity.utils";
+import { usePageNavigationStore } from "@/features/right-panel-resources/stores/page-navigation.store";
+import { PageResourceActionsMenu } from "./page-resource-actions-menu";
+import { PageResourceIcon } from "./page-resource-icon";
+import { useAppPresenter } from "@/app/components/app-presenter-provider";
+import { viewportLayoutManager } from "@/app/managers/viewport-layout.manager";
+import { useViewportLayoutStore } from "@/app/stores/viewport-layout.store";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/shared/components/ui/popover";
+import type { PageResource } from "@/features/right-panel-resources/types/page-resource.types";
+import { t } from "@/shared/lib/i18n";
+
+function PageResourceSidebarItems({
+  pages,
+  onNavigate,
+}: {
+  pages: PageResource[];
+  onNavigate?: () => void;
+}) {
+  const app = useAppPresenter();
+  return (
+    <ul className="space-y-0.5">
+      {pages.map((page) => (
+        <li
+          key={page.uri}
+        >
+          <SidebarNavLinkItem
+            to={pageResourceMainPath(page)}
+            label={page.title}
+            density="compact"
+            iconNode={<PageResourceIcon uri={page.uri} icon={page.target.dockIcon} />}
+            actions={<PageResourceActionsMenu page={page} revealOnHover />}
+            onNavigate={() => {
+              app.pageResourceManager.remember(page);
+              onNavigate?.();
+            }}
+          />
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+export function PageResourceSidebarNav({
+  isCollapsed,
+}: {
+  isCollapsed: boolean;
+}) {
+  const apps = usePanelApps();
+  const pinned = usePageNavigationStore((state) => state.pinned);
+  const groupCollapsed = useViewportLayoutStore(
+    (state) => state.isMainSidebarAppGroupCollapsed,
+  );
+  const [railOpen, setRailOpen] = useState(false);
+  const appPages = (apps.data?.entries ?? [])
+    .filter((entry) => entry.mainSidebar)
+    .sort((a, b) => (a.mainSidebarOrder ?? 0) - (b.mainSidebarOrder ?? 0))
+    .map((entry) =>
+      pageResourceFromTarget(createPanelAppRightPanelResourceTarget(entry)),
+    );
+  const pages = [
+    ...appPages,
+    ...pinned.filter((page) => !appPages.some((app) => app.uri === page.uri)),
+  ];
+  if (!pages.length) return null;
+  if (isCollapsed)
+    return (
+      <Popover open={railOpen} onOpenChange={setRailOpen}>
+        <PopoverTrigger asChild>
+          <button
+            type="button"
+            aria-label={t("pageSidebar")}
+            className={`mx-auto my-1 flex items-center justify-center ${SIDEBAR_RAIL_CONTROL_CLASS} ${SIDEBAR_RAIL_SURFACE_CLASS}`}
+          >
+            <PanelsTopLeft className="h-4 w-4" />
+          </button>
+        </PopoverTrigger>
+        <PopoverContent side="right" className="w-64 p-2">
+          <PageResourceSidebarItems
+            pages={pages}
+            onNavigate={() => setRailOpen(false)}
+          />
+        </PopoverContent>
+      </Popover>
+    );
+  return (
+    <nav
+      aria-label={t("pageSidebar")}
+      className="mt-1 border-t border-border/50 px-3 pt-1"
+      data-testid="page-resource-sidebar-nav"
+    >
+      <button
+        type="button"
+        aria-expanded={!groupCollapsed}
+        onClick={viewportLayoutManager.toggleMainSidebarAppGroupCollapsed}
+        className="flex w-full items-center gap-2 px-2.5 py-1.5 text-[13px] text-muted-foreground"
+      >
+        <ChevronDown
+          className={`h-3.5 w-3.5 ${groupCollapsed ? "-rotate-90" : ""}`}
+        />
+        <span className="flex-1 text-left">{t("pageSidebar")}</span>
+        <span>{pages.length}</span>
+      </button>
+      {!groupCollapsed && <PageResourceSidebarItems pages={pages} />}
+    </nav>
+  );
+}

package/src/features/right-panel-resources/components/system-object-resource.tsx

@@ -0,0 +1,100 @@
+import { NextClawClientError } from "@nextclaw/client-sdk";
+import { useQuery } from "@tanstack/react-query";
+import { nextclawClient, buildNcpAssetContentUrl } from "@/shared/lib/api";
+import { ChatSessionWorkspaceFilePreview } from "@/features/chat";
+import { createWorkspaceFileTab } from "@/features/chat";
+import { createWorkspaceFilePanelTarget } from "@/features/chat";
+import type {
+  DocBrowserCustomTabRenderParams,
+  DocBrowserCustomTabRenderers,
+} from "@/shared/components/doc-browser/doc-browser-renderer.types";
+import { t } from "@/shared/lib/i18n";
+
+function SystemObjectResource({
+  tab,
+  openTarget,
+}: DocBrowserCustomTabRenderParams) {
+  const uri = tab.resourceUri ?? tab.currentUrl;
+  const query = useQuery({
+    queryKey: ["resource-object-snapshot", uri],
+    queryFn: async ({ signal }) => {
+      const reference =
+        await nextclawClient.systemObjectReferences.resolve(uri);
+      const response = await fetch(
+        buildNcpAssetContentUrl(reference.assetUri),
+        { signal },
+      );
+      if (!response.ok)
+        throw new Error(`Unable to read resource (${response.status})`);
+      return { reference, content: await response.text() };
+    },
+    retry: false,
+  });
+  if (query.isPending)
+    return (
+      <p role="status" className="p-4 text-sm text-muted-foreground">
+        {t("loading")}
+      </p>
+    );
+  if (!query.data) {
+    const code =
+      query.error instanceof NextClawClientError ? query.error.code : undefined;
+    const message =
+      code === "SYSTEM_OBJECT_NOT_FOUND"
+        ? "resourceNotFound"
+        : code === "SYSTEM_OBJECT_INVALID_REFERENCE"
+          ? "resourceInvalid"
+          : "resourceLoadFailed";
+    return (
+      <div className="space-y-2 p-4">
+        <p role="alert" className="text-sm text-destructive">
+          {t(message)}
+        </p>
+        <button
+          type="button"
+          className="text-sm underline"
+          onClick={() => void query.refetch()}
+        >
+          {t("resourceRetry")}
+        </button>
+      </div>
+    );
+  }
+  const { reference, content } = query.data;
+  const file = createWorkspaceFileTab(
+    {
+      path: reference.fileName,
+      label: reference.label,
+      viewMode: "preview",
+      previewViewer: "rendered",
+      rawText: content,
+      mimeType: reference.mimeType,
+    },
+    null,
+  )!;
+  return (
+    <ChatSessionWorkspaceFilePreview
+      file={{ ...file, key: uri }}
+      sessionWorkingDir={null}
+      sessionProjectRoot={null}
+      onFileOpen={(action) => {
+        const next = createWorkspaceFileTab(action, null);
+        if (next)
+          openTarget(
+            createWorkspaceFilePanelTarget(next, {
+              workingDir: null,
+              projectRoot: null,
+            }),
+            { newTab: true },
+          );
+      }}
+    />
+  );
+}
+
+export const SYSTEM_OBJECT_RESOURCE_RENDERERS: DocBrowserCustomTabRenderers = {
+  "system-object": {
+    getTitle: (tab) => tab.title,
+    renderContent: (params) => <SystemObjectResource {...params} />,
+  },
+};

package/src/features/right-panel-resources/components/workspace-file-resource.tsx

@@ -0,0 +1,56 @@
+import { FileText } from "lucide-react";
+import type {
+  DocBrowserCustomTabRenderers,
+  DocBrowserCustomTabRenderParams,
+} from "@/shared/components/doc-browser/doc-browser-renderer.types";
+import { ChatSessionWorkspaceFilePreview } from "@/features/chat";
+import {
+  createWorkspaceFilePanelTarget,
+  readWorkspaceFilePanelView,
+  WORKSPACE_FILE_PANEL_KIND,
+} from "@/features/chat";
+import { createWorkspaceFileTab } from "@/features/chat";
+import { t } from "@/shared/lib/i18n";
+
+function WorkspaceFilePanelContent({
+  tab,
+  openTarget,
+}: DocBrowserCustomTabRenderParams) {
+  const view = readWorkspaceFilePanelView(tab);
+  if (!view)
+    return (
+      <p role="status" className="p-4 text-sm text-muted-foreground">
+        {t("workbenchFileUnavailable")}
+      </p>
+    );
+  return (
+    <div
+      className="flex h-full min-h-0 flex-col"
+      data-testid="workspace-file-panel-tab"
+    >
+      <ChatSessionWorkspaceFilePreview
+        file={view.file}
+        sessionWorkingDir={view.workingDir}
+        sessionProjectRoot={view.projectRoot}
+        onFileOpen={(action) => {
+          const file = createWorkspaceFileTab(
+            action,
+            view.file.parentSessionKey,
+          );
+          if (file)
+            openTarget(createWorkspaceFilePanelTarget(file, view), {
+              newTab: true,
+            });
+        }}
+      />
+    </div>
+  );
+}
+
+export const WORKSPACE_FILE_PANEL_RENDERERS: DocBrowserCustomTabRenderers = {
+  [WORKSPACE_FILE_PANEL_KIND]: {
+    getTitle: (tab) => tab.title,
+    renderIcon: () => <FileText className="h-4 w-4" />,
+    renderContent: (params) => <WorkspaceFilePanelContent {...params} />,
+  },
+};

package/src/features/right-panel-resources/configs/right-panel-resource-routes.config.ts

@@ -1,4 +1,6 @@
+import { parseSystemObjectReferenceUri, createPanelAppResourceUri as buildPanelAppResourceUri } from '@nextclaw/shared';
 import { t } from '@/shared/lib/i18n';
+import { buildSessionPanelUrl, CHAT_SESSION_PANEL_KIND, parseSessionKeyFromPanelUrl } from '@/features/chat';
 import { parseResourceUri, type ParsedResourceUri, type ResourceUriRouteDefinition } from '@/shared/lib/resource-uri';
 import {
   getDefaultDocsUrl,
@@ -77,9 +79,7 @@ function createPanelAppResourceUri(uri: ParsedResourceUri): string {
   if (!appId) {
     return 'nextclaw://panel-app';
   }
-  const resourceUri = `nextclaw://panel-app/${encodeURIComponent(appId)}`;
-  const path = uri.searchParams.get('path')?.trim();
-  return path ? `${resourceUri}?${new URLSearchParams({ path }).toString()}` : resourceUri;
+  return buildPanelAppResourceUri(appId, uri.searchParams.get('path') ?? undefined);
 }
 
 function arePanelAppUrlsEquivalent(left: string, right: string): boolean {
@@ -95,6 +95,49 @@ function arePanelAppUrlsEquivalent(left: string, right: string): boolean {
 }
 
 export const RIGHT_PANEL_RESOURCE_ROUTE_DEFINITIONS: RightPanelResourceRouteDefinition[] = [
+  {
+    id: 'system-object', kind: 'system-object', defaultUrl: () => 'nextclaw://objects',
+    match: (uri) => Boolean(parseSystemObjectReferenceUri(uri.raw)),
+    resolve: (uri) => ({ kind: 'system-object', title: parseSystemObjectReferenceUri(uri.raw)!.objectId, url: uri.raw, resourceUri: uri.raw, historyPolicy: 'none' }),
+    areEquivalent: (left, right) => left === right,
+  },
+  {
+    id: 'marketplace-detail', kind: 'marketplace-detail', defaultUrl: () => 'nextclaw://marketplace-detail',
+    match: (uri) => uri.scheme === 'nextclaw' && uri.authority === 'marketplace-detail' && uri.pathSegments.length === 1,
+    resolve: (uri) => ({ kind: 'marketplace-detail', title: decodeURIComponent(uri.pathSegments[0]), url: uri.raw, resourceUri: uri.raw, historyPolicy: 'managed' }),
+    areEquivalent: (left, right) => left === right,
+  },
+  {
+    id: 'marketplace', kind: 'route', defaultUrl: () => 'nextclaw://marketplace',
+    match: (uri) => uri.scheme === 'nextclaw' && uri.authority === 'marketplace' && uri.pathSegments.length === 0,
+    resolve: (uri) => ({ kind: 'route', title: t('marketplaceTypeSkill'), url: '/skills', resourceUri: uri.raw, historyPolicy: 'none' }),
+    areEquivalent: (left, right) => left === right,
+  },
+  {
+    id: 'workspace-file', kind: 'workspace-file', defaultUrl: () => 'nextclaw://workspace-file',
+    match: (uri) => uri.scheme === 'nextclaw' && uri.authority === 'workspace-file',
+    resolve: (uri) => ({ kind: 'workspace-file', title: t('chatWorkspaceProjectFiles'), url: uri.raw, resourceUri: uri.raw, dedupeKey: uri.raw, historyPolicy: 'none' }),
+    areEquivalent: (left, right) => left === right,
+  },
+  {
+    defaultUrl: () => 'nextclaw://chat-session/',
+    id: CHAT_SESSION_PANEL_KIND,
+    kind: CHAT_SESSION_PANEL_KIND,
+    match: (uri) => uri.scheme === 'nextclaw' && uri.authority === 'chat-session',
+    resolve: (uri) => {
+      const sessionKey = parseSessionKeyFromPanelUrl(uri.raw);
+      const url = sessionKey ? buildSessionPanelUrl(sessionKey) : uri.raw;
+      return {
+        kind: CHAT_SESSION_PANEL_KIND,
+        title: t('chatFloatingConversation'),
+        url,
+        resourceUri: url,
+        dedupeKey: url,
+        historyPolicy: 'none',
+      };
+    },
+    areEquivalent: (left, right) => left === right,
+  },
   {
     defaultUrl: () => RIGHT_PANEL_HOME_URL,
     id: 'home',