@nextclaw/ui 0.23.0 → 0.24.0-beta.0

package/src/features/chat/features/conversation/utils/session-message-composer.utils.ts

@@ -14,7 +14,6 @@ import {
   resolveInlineTokensForText,
   type ChatInlineTokenSource,
 } from '@/features/chat/features/input/utils/chat-inline-token.utils';
-import { normalizeRequestedSkills } from '@/features/chat/features/runtime/utils/chat-runtime.utils';
 import type { SessionConversationComposerState } from '@/features/chat/features/conversation/hooks/use-session-conversation-input-state';
 
 export type SessionMessageComposerSnapshot = SessionConversationComposerState & {
@@ -55,15 +54,6 @@ function buildTextNodes(
   return nodes;
 }
 
-function readRequestedSkills(metadata: Record<string, unknown>): string[] {
-  const raw = metadata.requested_skill_refs;
-  return normalizeRequestedSkills(
-    Array.isArray(raw)
-      ? raw.filter((value): value is string => typeof value === 'string')
-      : undefined,
-  );
-}
-
 export function buildSessionMessageComposerSnapshot(params: {
   readonly attachmentIdPrefix: string;
   readonly availableSkills: readonly { ref: string; name: string }[];
@@ -107,8 +97,17 @@ export function buildSessionMessageComposerSnapshot(params: {
   });
 
   const normalizedNodes = normalizeChatComposerNodes(nodes);
-  const selectedSkills = readRequestedSkills(metadata);
+  const skillTokens = metadataTokens.filter(
+    (token): token is Extract<ChatInlineTokenSource, { kind: 'skill' }> =>
+      token.kind === 'skill',
+  );
+  const selectedSkills = [...new Set(skillTokens.map((token) => token.ref))];
   const skillNameByRef = new Map(availableSkills.map(({ ref, name }) => [ref, name]));
+  for (const token of skillTokens) {
+    if (!skillNameByRef.has(token.ref)) {
+      skillNameByRef.set(token.ref, token.name);
+    }
+  }
   return {
     text: deriveChatComposerDraft(normalizedNodes),
     nodes: normalizedNodes,

package/src/features/chat/features/input/input-surface-plugins/__tests__/context-reference-plugin.test.ts

@@ -32,6 +32,7 @@ function createPanelApp(): PanelAppEntryView {
 
 function createProject(): ProjectView {
   return {
+    id: 'project-nextclaw',
     name: 'NextClaw',
     rootPath: '/tmp/nextclaw',
     createdAt: '2026-07-28T00:00:00.000Z',

package/src/features/chat/features/message/hooks/use-chat-message-actions.tsx

@@ -41,7 +41,6 @@ function buildEditedMessageMetadata(
   snapshot: SessionMessageComposerSnapshot,
 ): Record<string, unknown> | undefined {
   const metadata = { ...message.metadata };
-  delete metadata.requested_skill_refs;
   delete metadata[CHAT_INLINE_TOKENS_METADATA_KEY];
   const skillRecords = readInlineTokensFromMetadata(message.metadata).flatMap(
     (token) =>
@@ -59,7 +58,6 @@ function buildEditedMessageMetadata(
   );
   Object.assign(metadata, buildChatRunMetadata({
     composerNodes: [...snapshot.nodes],
-    requestedSkills: [...snapshot.selectedSkills],
     skillRecords,
   }));
   return Object.keys(metadata).length > 0 ? metadata : undefined;

package/src/features/chat/features/runtime/utils/chat-runtime.utils.ts

@@ -216,20 +216,6 @@ class HistoryMessageBuilder {
   };
 }
 
-export function normalizeRequestedSkills(value: string[] | undefined): string[] {
-  if (!Array.isArray(value)) {
-    return [];
-  }
-  const deduped = new Set<string>();
-  for (const item of value) {
-    const trimmed = item.trim();
-    if (trimmed) {
-      deduped.add(trimmed);
-    }
-  }
-  return [...deduped];
-}
-
 export function buildUiMessagesFromHistoryMessages(messages: SessionMessageView[]): UIMessage[] {
   return new HistoryMessageBuilder().build(messages);
 }

package/src/features/chat/features/session/components/__tests__/chat-sidebar-project-groups.test.tsx

@@ -1,7 +1,11 @@
 import { fireEvent, render, screen, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { beforeEach, describe, expect, it, vi } from "vitest";
-import { ChatSidebarProjectGroups } from "@/features/chat/features/session/components/chat-sidebar-project-groups";
+import { MemoryRouter, useLocation } from "react-router-dom";
+import {
+  ChatSidebarProjectGroups,
+  type ChatSidebarProjectGroup,
+} from "@/features/chat/features/session/components/chat-sidebar-project-groups";
 import { useChatSessionListStore } from "@/features/chat/stores/chat-session-list.store";
 
 const mocks = vi.hoisted(() => ({
@@ -16,7 +20,8 @@ vi.mock("@/features/chat/components/providers/chat-presenter.provider", () => ({
   }),
 }));
 
-const projectGroup = {
+const projectGroup: ChatSidebarProjectGroup = {
+  projectId: "project-analysis",
   projectRoot: "/tmp/analysis-project",
   projectName: "analysis-project",
   items: [
@@ -35,17 +40,30 @@ const projectGroup = {
   isPinned: false,
 };
 
-function renderProjectGroups(isPinned = false) {
+function LocationProbe() {
+  const location = useLocation();
+  return (
+    <output data-testid="location">{`${location.pathname}${location.search}`}</output>
+  );
+}
+
+function renderProjectGroups(
+  isPinned = false,
+  group: ChatSidebarProjectGroup = projectGroup,
+) {
   return render(
-    <ChatSidebarProjectGroups
-      groups={[{ ...projectGroup, isPinned }]}
-      projectCronJobCountByRoot={new Map([[projectGroup.projectRoot, 2]])}
-      defaultSessionType="native"
-      sessionTypeOptions={[
-        { value: "native", label: "Native", icon: null, ready: true },
-      ]}
-      renderSessionItem={() => <div>Project session</div>}
-    />,
+    <MemoryRouter initialEntries={["/chat"]}>
+      <ChatSidebarProjectGroups
+        groups={[{ ...group, isPinned }]}
+        projectCronJobCountByRoot={new Map([[projectGroup.projectRoot, 2]])}
+        defaultSessionType="native"
+        sessionTypeOptions={[
+          { value: "native", label: "Native", icon: null, ready: true },
+        ]}
+        renderSessionItem={() => <div>Project session</div>}
+      />
+      <LocationProbe />
+    </MemoryRouter>,
   );
 }
 
@@ -72,18 +90,23 @@ describe("ChatSidebarProjectGroups", () => {
     const { container } = renderProjectGroups();
 
     const header = screen.getByLabelText("Collapse project");
+    const projectLink = screen.getByRole("link", { name: "analysis-project" });
+    const projectRow = projectLink.parentElement?.parentElement;
     expect(container.firstElementChild?.className).toBe("space-y-0.5");
-    expect(header.parentElement?.className).toContain("h-8");
-    expect(header.parentElement?.className).toContain("hover:bg-gray-200/60");
-    expect(header.parentElement?.className).not.toContain("focus-within:bg");
-    expect(
-      screen.getByText("analysis-project").nextElementSibling?.tagName,
-    ).toBe("svg");
+    expect(projectRow?.className).toContain("h-8");
+    expect(projectRow?.className).toContain("hover:bg-gray-200/60");
+    const projectContent = projectLink.parentElement;
+    expect(projectContent?.classList.contains("pr-14")).toBe(false);
+    expect(projectContent?.className).toContain("group-hover/project:pr-14");
+    expect(projectContent?.className).toContain(
+      "group-has-[[data-project-actions]:focus-within]/project:pr-14",
+    );
+    expect(projectLink.querySelector("span")?.className).not.toContain("uppercase");
+    expect(projectLink.querySelector("span")?.className).toContain("text-[13px]");
     expect(
-      screen
-        .getByText("analysis-project")
-        .nextElementSibling?.getAttribute("class"),
-    ).toContain("opacity-0");
+      header.compareDocumentPosition(projectLink) &
+        Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
     expect(screen.queryByText("Sessions")).toBeNull();
 
     fireEvent.click(header);
@@ -97,6 +120,31 @@ describe("ChatSidebarProjectGroups", () => {
     expect(screen.queryByText("Project session")).toBeNull();
   });
 
+  it("opens the project home from the project name without changing expansion", () => {
+    renderProjectGroups();
+
+    fireEvent.click(screen.getByRole("link", { name: "analysis-project" }));
+
+    expect(mocks.toggleProjectCollapsed).not.toHaveBeenCalled();
+    expect(screen.getByTestId("location").textContent).toBe(
+      "/projects/project-analysis/overview",
+    );
+    expect(screen.getByText("Project session")).toBeTruthy();
+  });
+
+  it("surfaces a running child session while its project is collapsed", () => {
+    renderProjectGroups(false, {
+      ...projectGroup,
+      items: [{ ...projectGroup.items[0], runStatus: "running" as const }],
+    });
+
+    expect(screen.queryByLabelText("Running")).toBeNull();
+
+    fireEvent.click(screen.getByLabelText("Collapse project"));
+
+    expect(screen.getByLabelText("Running")).toBeTruthy();
+  });
+
   it("shows project context from the row on hover", async () => {
     const user = userEvent.setup();
     renderProjectGroups();

package/src/features/chat/features/session/components/chat-sidebar-project-groups.tsx

@@ -1,4 +1,5 @@
 import { useMemo, useState, type ReactNode } from "react";
+import { Link, useLocation } from "react-router-dom";
 import {
   AlarmClock,
   ChevronDown,
@@ -19,6 +20,8 @@ import type { ChatSidebarProjectGroup } from "@/features/chat/features/session/u
 import { useChatSessionListStore } from "@/features/chat/stores/chat-session-list.store";
 import { t } from "@/shared/lib/i18n";
 import { ChatSidebarContextCard } from "@/features/chat/features/session/components/chat-sidebar-context-card";
+import { SessionRunBadge } from "@/features/chat/features/session/components/session-run-badge";
+import { cn } from "@/shared/lib/utils";
 
 export type { ChatSidebarProjectGroup };
 
@@ -53,6 +56,7 @@ export function ChatSidebarProjectGroups(props: ChatSidebarProjectGroupsProps) {
     projectCronJobCountByRoot,
   } = props;
   const presenter = usePresenter();
+  const location = useLocation();
   const collapsedProjectRoots = useChatSessionListStore(
     (state) => state.snapshot.collapsedProjectRoots,
   );
@@ -72,13 +76,23 @@ export function ChatSidebarProjectGroups(props: ChatSidebarProjectGroupsProps) {
       {groups.map((group) => {
         const actionLabel = `${t("chatSidebarNewTask")} · ${group.projectName}`;
         const isCollapsed = collapsedProjectRoots.includes(group.projectRoot);
+        const hasRunningSession = isCollapsed && group.items.some(
+          (item) => item.runStatus === "running",
+        );
+        const isSelected = Boolean(group.projectId) &&
+          location.pathname.startsWith(`/projects/${group.projectId}/`);
         const pinLabel = t(
           group.isPinned ? "chatSidebarUnpinProject" : "chatSidebarPinProject",
         );
 
         return (
           <div key={group.projectRoot}>
-            <div className="group/project relative h-8 rounded-lg px-2 text-muted-foreground transition-colors hover:bg-gray-200/60 hover:text-gray-900">
+            <div
+              className={cn(
+                "group/project relative h-8 rounded-lg px-1 text-muted-foreground transition-colors hover:bg-gray-200/60 hover:text-gray-900",
+                isSelected && "bg-gray-200/60 text-gray-900",
+              )}
+            >
               <ChatSidebarContextCard
                 title={group.projectName}
                 metrics={[
@@ -100,42 +114,75 @@ export function ChatSidebarProjectGroups(props: ChatSidebarProjectGroupsProps) {
                   },
                 ]}
               >
-                <button
-                  type="button"
-                  aria-expanded={!isCollapsed}
-                  aria-label={t(
-                    isCollapsed
-                      ? "chatSidebarExpandProject"
-                      : "chatSidebarCollapseProject",
+                <div
+                  className={cn(
+                    "flex h-full w-full min-w-0 items-center group-hover/project:pr-14 group-has-[[data-project-actions]:focus-within]/project:pr-14",
+                    hasRunningSession && "pr-7",
                   )}
-                  className="flex h-full w-full min-w-0 items-center gap-1.5 pr-14 text-left focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
-                  onClick={() =>
-                    presenter.chatSessionListManager.toggleProjectCollapsed(
-                      group.projectRoot,
-                    )
-                  }
                 >
-                  <Folder className="h-3.5 w-3.5 shrink-0" aria-hidden="true" />
-                  <span
-                    className="truncate text-[11px] font-medium uppercase tracking-wider"
-                    title={group.projectRoot}
-                  >
-                    {group.projectName}
-                  </span>
-                  {isCollapsed ? (
-                    <ChevronRight
-                      className="h-3.5 w-3.5 shrink-0 opacity-0 transition-opacity group-hover/project:opacity-100 group-focus-within/project:opacity-100"
-                      aria-hidden="true"
-                    />
+                  <IconActionButton
+                    icon={
+                      isCollapsed ? (
+                        <ChevronRight className="h-3.5 w-3.5" />
+                      ) : (
+                        <ChevronDown className="h-3.5 w-3.5" />
+                      )
+                    }
+                    label={t(
+                      isCollapsed
+                        ? "chatSidebarExpandProject"
+                        : "chatSidebarCollapseProject",
+                    )}
+                    aria-expanded={!isCollapsed}
+                    size="sm"
+                    tone="surface"
+                    tooltip={false}
+                    onClick={() =>
+                      presenter.chatSessionListManager.toggleProjectCollapsed(
+                        group.projectRoot,
+                      )
+                    }
+                  />
+                  {group.projectId ? (
+                    <Link
+                      to={`/projects/${encodeURIComponent(group.projectId)}/overview`}
+                      className="flex h-full min-w-0 flex-1 items-center gap-1.5 rounded-md px-1 text-left focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
+                      aria-current={isSelected ? "page" : undefined}
+                      title={group.projectRoot}
+                    >
+                      <Folder
+                        className="h-3.5 w-3.5 shrink-0"
+                        aria-hidden="true"
+                      />
+                      <span className="truncate text-[13px] font-medium">
+                        {group.projectName}
+                      </span>
+                    </Link>
                   ) : (
-                    <ChevronDown
-                      className="h-3.5 w-3.5 shrink-0 opacity-0 transition-opacity group-hover/project:opacity-100 group-focus-within/project:opacity-100"
-                      aria-hidden="true"
-                    />
+                    <span
+                      className="flex h-full min-w-0 flex-1 items-center gap-1.5 rounded-md px-1 text-left"
+                      title={group.projectRoot}
+                    >
+                      <Folder
+                        className="h-3.5 w-3.5 shrink-0"
+                        aria-hidden="true"
+                      />
+                      <span className="truncate text-[13px] font-medium">
+                        {group.projectName}
+                      </span>
+                    </span>
                   )}
-                </button>
+                </div>
               </ChatSidebarContextCard>
-              <div className="pointer-events-none absolute right-2 top-1/2 flex -translate-y-1/2 items-center opacity-0 transition-opacity group-hover/project:pointer-events-auto group-hover/project:opacity-100 focus-within:pointer-events-auto focus-within:opacity-100">
+              {hasRunningSession ? (
+                <span className="absolute right-2 top-1/2 inline-flex -translate-y-1/2 transition-opacity group-hover/project:opacity-0 group-has-[[data-project-actions]:focus-within]/project:opacity-0">
+                  <SessionRunBadge status="running" />
+                </span>
+              ) : null}
+              <div
+                data-project-actions
+                className="pointer-events-none absolute right-2 top-1/2 flex -translate-y-1/2 items-center opacity-0 transition-opacity group-hover/project:pointer-events-auto group-hover/project:opacity-100 focus-within:pointer-events-auto focus-within:opacity-100"
+              >
                 {supportsSessionTypeChoice ? (
                   <Popover
                     open={openProjectRoot === group.projectRoot}

package/src/features/chat/features/session/utils/__tests__/chat-sidebar-session-groups.utils.test.ts

@@ -4,6 +4,7 @@ import { groupSessionsByProject } from "@/features/chat/features/session/utils/c
 describe("groupSessionsByProject", () => {
   it("uses registered projects as the project-first baseline", () => {
     const groups = groupSessionsByProject([], new Set(), new Set(), [{
+      id: "project-knowledge",
       name: "Knowledge",
       rootPath: "/tmp/knowledge",
       template: "knowledge-base",
@@ -12,6 +13,7 @@ describe("groupSessionsByProject", () => {
     }]);
 
     expect(groups).toEqual([{
+      projectId: "project-knowledge",
       projectRoot: "/tmp/knowledge",
       projectName: "Knowledge",
       items: [],

package/src/features/chat/features/session/utils/chat-run-metadata.utils.ts

@@ -8,7 +8,6 @@ import {
   createInlineTokensMetadata,
   type ChatSkillReferenceSnapshot,
 } from "@/features/chat/features/input/utils/chat-inline-token.utils";
-import { normalizeRequestedSkills } from "@/features/chat/features/runtime/utils/chat-runtime.utils";
 import { normalizeSessionProjectRootValue } from "@/shared/lib/session-project";
 
 function createMetadataFields(
@@ -24,7 +23,6 @@ export function buildChatRunMetadata(payload: {
   thinkingLevel?: string;
   sessionType?: string;
   projectRoot?: string | null;
-  requestedSkills?: string[];
   skillRecords?: readonly ChatSkillReferenceSnapshot[];
   composerNodes?: Parameters<typeof buildInlineTokensFromComposer>[0];
   sessionMaterialization?: AgentRunSessionMaterializationMetadata | null;
@@ -37,10 +35,6 @@ export function buildChatRunMetadata(payload: {
     ...createMetadataFields(payload.agentId?.trim(), ["agentId", "agent_id"]),
     ...createMetadataFields(projectRoot ?? undefined, ["projectRoot", "project_root"]),
   };
-  const requestedSkills = normalizeRequestedSkills(payload.requestedSkills);
-  if (requestedSkills.length > 0) {
-    metadata.requested_skill_refs = requestedSkills;
-  }
   const inlineTokens = payload.composerNodes
     ? buildInlineTokensFromComposer(payload.composerNodes, payload.skillRecords)
     : [];

package/src/features/chat/features/session/utils/chat-sidebar-session-groups.utils.ts

@@ -9,6 +9,7 @@ export type ChatSidebarDateGroup = {
 };
 
 export type ChatSidebarProjectGroup = {
+  projectId?: string;
   projectRoot: string;
   projectName: string;
   items: NcpSessionListItemView[];
@@ -102,6 +103,7 @@ export function groupSessionsByProject(
 
   for (const project of projects) {
     grouped.set(project.rootPath, {
+      projectId: project.id,
       projectRoot: project.rootPath,
       projectName: project.name,
       items: [],

package/src/features/chat/features/welcome/utils/__tests__/chat-welcome-project-options.utils.test.ts

@@ -60,6 +60,7 @@ describe("buildChatWelcomeProjectOptions", () => {
     const options = buildChatWelcomeProjectOptions({
       defaultProjectRoot: "/Users/demo/.nextclaw/workspace",
       projects: [{
+        id: "project-knowledge",
         name: "Knowledge",
         rootPath: "/tmp/knowledge",
         template: "knowledge-base",

package/src/features/chat/managers/__tests__/chat-session-list.manager.test.ts

@@ -230,6 +230,33 @@ describe("ChatSessionListManager draft and selection flow", () => {
     });
   });
 
+  it("keeps a project-bound initial prompt as an editable unsent draft", () => {
+    const uiManager = {
+      goToChatRoot: vi.fn(),
+      navigateTo: vi.fn(),
+      goToSession: vi.fn(),
+      isAtChatRoot: vi.fn(() => true),
+    } as unknown as ConstructorParameters<typeof ChatSessionListManager>[0];
+
+    const manager = new ChatSessionListManager(uiManager);
+    manager.createSession({
+      projectRoot: "/tmp/project-alpha",
+      prompt: "Use the project observation capability.",
+    });
+
+    expect(uiManager.navigateTo).toHaveBeenCalledWith("/chat/draft", {
+      replace: true,
+      state: {
+        chatDraft: {
+          sessionType: "native",
+          projectRoot: "/tmp/project-alpha",
+          prompt: "Use the project observation capability.",
+        },
+      },
+    });
+    expect(useChatThreadStore.getState().snapshot.hasSubmittedDraftMessage).toBe(false);
+  });
+
   it("does not eagerly replace the old selected session before the route finishes switching", () => {
     const uiManager = {
       goToChatRoot: vi.fn(),

package/src/features/chat/pages/__tests__/ncp-chat-page.test.ts

@@ -180,19 +180,8 @@ describe('buildChatRunMetadata', () => {
     ).not.toHaveProperty('project_root');
   });
 
-  it('sends requested skill refs instead of legacy requested skill names', () => {
-    expect(
-      buildChatRunMetadata({
-        requestedSkills: ['project:/tmp/project-alpha/.agents/skills/review'],
-      }),
-    ).toMatchObject({
-      requested_skill_refs: ['project:/tmp/project-alpha/.agents/skills/review'],
-    });
-  });
-
-  it('snapshots explicit skill references while keeping internal refs out of message text', () => {
+  it('snapshots skill token presentation without creating runtime selection metadata', () => {
     expect(buildChatRunMetadata({
-      requestedSkills: ['workspace:/tmp/workspace/skills/review'],
       skillRecords: [{
         ref: 'workspace:/tmp/workspace/skills/review',
         name: 'review',
@@ -204,8 +193,7 @@ describe('buildChatRunMetadata', () => {
         tokenKey: 'workspace:/tmp/workspace/skills/review',
         label: 'review',
       })],
-    })).toMatchObject({
-      requested_skill_refs: ['workspace:/tmp/workspace/skills/review'],
+    })).toEqual({
       ui_inline_tokens: {
         schemaVersion: 2,
         items: [{

package/src/features/chat/types/chat-run.types.ts

@@ -16,7 +16,6 @@ export type SendMessageParams = {
   model?: string;
   thinkingLevel?: ThinkingLevel;
   projectRoot?: string | null;
-  requestedSkills?: string[];
   attachments?: NcpDraftAttachment[];
   parts?: NcpMessagePart[];
   composerNodes?: ChatComposerNode[];

package/src/features/projects/AGENTS.md

@@ -0,0 +1,6 @@
+# Projects UI boundary
+
+- 本目录拥有 Projects 页面、presenter、查询状态和用户回复编排；事实来源只能是 `client.projects` 的公共快照，组件不得自行扫描文件或解析 Marker。
+- 页面默认只读；确认/拒绝只复用现有 agent-run 消息入口，并携带可追踪、可幂等的响应元数据，不创建第二套 response bridge。
+- Overview、列表、看板、甘特图和详情必须消费同一份 snapshot，不为视图复制业务状态或推断缺失阶段、日期与进度。
+- 组件负责连接与展示，跨组件状态归 hook/presenter；用户文案必须走 Projects i18n 资源。

package/src/features/projects/components/project-agreement.tsx

@@ -0,0 +1,92 @@
+import type { ProjectObservationSnapshot } from "@nextclaw/client-sdk";
+import { t } from "@/shared/lib/i18n";
+import {
+  ProjectEmptyState,
+  ProjectFilePreviewButton,
+  ProjectSection,
+} from "./project-section";
+
+export function ProjectAgreement({
+  snapshot,
+  onOpenFile,
+}: {
+  snapshot: ProjectObservationSnapshot;
+  onOpenFile: (path: string, label: string) => void;
+}) {
+  return (
+    <div className="grid min-w-0 gap-4 lg:grid-cols-2">
+      <ProjectSection title={t("projectsVisionAndContext")}>
+        {snapshot.project.summary ? (
+          <p className="mb-4 text-sm">{snapshot.project.summary}</p>
+        ) : null}
+        {snapshot.project.context.length ? (
+          <div className="divide-y divide-border/60">
+            {snapshot.project.context.map((context) => (
+              <ProjectContextReference
+                key={context.id}
+                context={context}
+                onOpenFile={onOpenFile}
+              />
+            ))}
+          </div>
+        ) : (
+          <ProjectEmptyState>{t("projectsNoContext")}</ProjectEmptyState>
+        )}
+      </ProjectSection>
+      <ProjectSection title={t("projectsSourceHealth")}>
+        <div className="space-y-2">
+          {snapshot.sources.map((source) => (
+            <div
+              key={source.id}
+              className="flex items-center justify-between gap-3 rounded-xl bg-muted/45 p-3 text-sm"
+            >
+              <span>{source.label}</span>
+              <span className="text-muted-foreground">
+                {t(`projectsSource_${source.status}`)} · {source.itemCount}
+              </span>
+            </div>
+          ))}
+        </div>
+        {snapshot.diagnostics.length ? (
+          <div className="mt-4 space-y-2 border-t border-border/60 pt-4">
+            {snapshot.diagnostics.map((diagnostic) => (
+              <div
+                key={diagnostic.id}
+                className="rounded-xl bg-muted/35 p-3 text-sm"
+              >
+                <p className="font-medium">{diagnostic.code}</p>
+                <p className="mt-1 text-xs text-muted-foreground">
+                  {diagnostic.message}
+                </p>
+              </div>
+            ))}
+          </div>
+        ) : null}
+      </ProjectSection>
+    </div>
+  );
+}
+
+function ProjectContextReference({
+  context,
+  onOpenFile,
+}: {
+  context: ProjectObservationSnapshot["project"]["context"][number];
+  onOpenFile: (path: string, label: string) => void;
+}) {
+  const { accessible, role, source } = context;
+  return (
+    <ProjectFilePreviewButton
+      available={accessible}
+      path={source}
+      label={role}
+      onOpen={onOpenFile}
+      className="block w-full py-3 text-left first:pt-0 enabled:hover:text-foreground enabled:focus-visible:outline-none enabled:focus-visible:ring-1 enabled:focus-visible:ring-border"
+    >
+      <span className="block text-sm font-medium">{role}</span>
+      <span className="mt-1 block truncate text-xs text-muted-foreground">
+        {source}{!accessible ? ` · ${t("projectsUnavailable")}` : ""}
+      </span>
+    </ProjectFilePreviewButton>
+  );
+}