@nextclaw/ui 0.22.5 → 0.24.0-beta.0

package/src/features/panel-apps/managers/panel-app-bridge.manager.ts

@@ -9,6 +9,9 @@ import type {
   ServiceActionGrantView,
   ServiceActionInvokeResultView,
   ServiceActionListView,
+  PortableRuntimeAcceptanceExportApiView,
+  PortableRuntimeAcceptanceStatusApiView,
+  RuntimeVerificationRecordListView,
 } from '@nextclaw/client-sdk';
 import type { ServiceActionAuthorizationManager } from '@/features/service-apps';
 import { nextclawClient } from '@/shared/lib/api';
@@ -26,13 +29,20 @@ type PanelAppBridgeRequest = {
   method:
     | 'agent.generateObject'
     | 'agent.send'
+    | 'acceptance.export'
+    | 'acceptance.status'
     | 'invoke'
     | 'list'
     | 'requestGrant'
-    | 'revokeGrant';
+    | 'revokeGrant'
+    | 'verification.list';
   payload?: {
+    acceptanceId?: string;
     actionId?: string;
+    appId?: string;
     input?: unknown;
+    limit?: number;
+    locale?: string;
     request?: unknown;
   };
 };
@@ -103,6 +113,9 @@ export class PanelAppBridgeManager {
     | PanelAppAgentGenerateObjectResultView
     | PanelAppAgentSendResultView
     | PanelAppCapabilityGrantView
+    | PortableRuntimeAcceptanceExportApiView
+    | PortableRuntimeAcceptanceStatusApiView
+    | RuntimeVerificationRecordListView
     | ServiceActionGrantView
     | ServiceActionInvokeResultView
     | ServiceActionListView
@@ -126,6 +139,25 @@ export class PanelAppBridgeManager {
         return await this.sendAgentMessageWithAuthorization(session, request);
       case 'agent.generateObject':
         return await this.generateAgentObjectWithAuthorization(session, request);
+      case 'verification.list':
+        return await nextclawClient.serviceApps.listVerificationRecords({
+          acceptanceId: request.payload?.acceptanceId,
+          appId: request.payload?.appId,
+          limit: request.payload?.limit,
+          bridgeSessionToken: session.token,
+        });
+      case 'acceptance.status':
+        return await nextclawClient.serviceApps.getPortableRuntimeAcceptanceStatus({
+          appId: request.payload?.appId,
+          locale: request.payload?.locale,
+          bridgeSessionToken: session.token,
+        });
+      case 'acceptance.export':
+        return await nextclawClient.serviceApps.exportPortableRuntimeAcceptance({
+          appId: request.payload?.appId,
+          locale: request.payload?.locale,
+          bridgeSessionToken: session.token,
+        });
       default:
         throw new Error(`Unsupported panel bridge method: ${String(request.method)}`);
     }
@@ -378,9 +410,12 @@ export class PanelAppBridgeManager {
       (candidate.method === 'invoke' ||
         candidate.method === 'agent.send' ||
         candidate.method === 'agent.generateObject' ||
+        candidate.method === 'acceptance.export' ||
+        candidate.method === 'acceptance.status' ||
         candidate.method === 'list' ||
         candidate.method === 'requestGrant' ||
-        candidate.method === 'revokeGrant')
+        candidate.method === 'revokeGrant' ||
+        candidate.method === 'verification.list')
     );
   };
 }

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>
+  );
+}

package/src/features/projects/components/project-artifacts.test.tsx

@@ -0,0 +1,77 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import type { ProjectObservationSnapshot } from "@nextclaw/client-sdk";
+import { ProjectArtifacts } from "./project-artifacts";
+
+const observedAt = "2026-08-30T00:00:00.000Z";
+const designs = Array.from({ length: 11 }, (_, index) => ({
+  id: `design-${index + 1}`,
+  path: `docs/designs/${index + 1}.md`,
+  categoryId: "designs",
+  categoryLabel: "Designs",
+  exists: true,
+  fileUpdatedAt: `2026-08-${String(index + 1).padStart(2, "0")}T00:00:00.000Z`,
+  references: [],
+}));
+
+const snapshot: ProjectObservationSnapshot = {
+  asOf: observedAt,
+  project: { name: "Research", rootPath: "/tmp/research", context: [] },
+  sources: [],
+  workflows: [],
+  runs: [],
+  workItems: [],
+  artifactCategories: [
+    { id: "plans", label: "Plans" },
+    { id: "designs", label: "Designs" },
+  ],
+  artifacts: [
+    ...designs,
+    {
+      id: "plan-1",
+      path: "docs/plans/delivery.md",
+      categoryId: "plans",
+      categoryLabel: "Plans",
+      exists: true,
+      fileUpdatedAt: "2026-08-30T00:00:00.000Z",
+      references: [],
+    },
+  ],
+  signals: [],
+  requests: [],
+  activity: [],
+  skills: [],
+  diagnostics: [],
+  dataQuality: "complete",
+};
+
+describe("ProjectArtifacts", () => {
+  it("groups in configuration order, expands incrementally, filters, and opens the selected file", () => {
+    const onOpenFile = vi.fn();
+    render(<ProjectArtifacts snapshot={snapshot} onOpenFile={onOpenFile} />);
+
+    const groupHeaders = screen.getAllByRole("button", { name: /Plans 1|Designs 11/ });
+    expect(groupHeaders.map((header) => header.getAttribute("aria-label"))).toEqual([
+      "Plans 1",
+      "Designs 11",
+    ]);
+    expect(screen.getByTitle("docs/designs/11.md")).toBeTruthy();
+    expect(screen.queryByTitle("docs/designs/1.md")).toBeNull();
+
+    fireEvent.click(screen.getByRole("button", { name: /Show more \(1\)/ }));
+    expect(screen.getByTitle("docs/designs/1.md")).toBeTruthy();
+
+    fireEvent.change(screen.getByPlaceholderText("Search artifacts"), {
+      target: { value: "delivery" },
+    });
+    expect(screen.queryByRole("button", { name: /Designs 11/ })).toBeNull();
+    expect(screen.getByTitle("docs/plans/delivery.md")).toBeTruthy();
+    fireEvent.click(screen.getByTitle("docs/plans/delivery.md"));
+    expect(onOpenFile).toHaveBeenCalledWith("docs/plans/delivery.md", "docs/plans/delivery.md");
+
+    const plansHeader = screen.getByRole("button", { name: /Plans 1/ });
+    fireEvent.click(plansHeader);
+    expect(plansHeader.getAttribute("aria-expanded")).toBe("false");
+    expect(screen.queryByTitle("docs/plans/delivery.md")).toBeNull();
+  });
+});

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

@@ -0,0 +1,188 @@
+import { useMemo, useState } from "react";
+import type { ProjectObservationSnapshot } from "@nextclaw/client-sdk";
+import { formatDateTime, formatNumber, t } from "@/shared/lib/i18n";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/components/ui/select";
+import { ProjectEmptyState, ProjectFilePreviewButton } from "./project-section";
+import {
+  DEFAULT_PROJECT_ARTIFACT_SORT,
+  formatProjectRelativeTime,
+  sortProjectArtifacts,
+  type ProjectArtifactSort,
+} from "../utils/project-artifact-view.utils";
+
+const INITIAL_VISIBLE_COUNT = 10;
+
+type ArtifactGroup = {
+  id: string;
+  label: string;
+  artifacts: ProjectObservationSnapshot["artifacts"];
+};
+
+function createArtifactGroups(
+  snapshot: ProjectObservationSnapshot,
+  query: string,
+  sort: ProjectArtifactSort,
+): ArtifactGroup[] {
+  const normalizedQuery = query.trim().toLocaleLowerCase();
+  const filteredArtifacts = normalizedQuery
+    ? snapshot.artifacts.filter((artifact) => artifact.path.toLocaleLowerCase().includes(normalizedQuery))
+    : snapshot.artifacts;
+  const artifacts = sortProjectArtifacts(filteredArtifacts, sort);
+  const artifactsByCategory = new Map<string, ProjectObservationSnapshot["artifacts"]>();
+  for (const artifact of artifacts) {
+    const group = artifactsByCategory.get(artifact.categoryId) ?? [];
+    group.push(artifact);
+    artifactsByCategory.set(artifact.categoryId, group);
+  }
+  const configuredCategories = snapshot.artifactCategories ?? [];
+  const configuredIds = new Set(configuredCategories.map((category) => category.id));
+  const groups = configuredCategories.flatMap((category) => {
+    const groupArtifacts = artifactsByCategory.get(category.id) ?? [];
+    return groupArtifacts.length ? [{ ...category, artifacts: groupArtifacts }] : [];
+  });
+  const unconfiguredGroups = [...artifactsByCategory.entries()]
+    .filter(([categoryId]) => !configuredIds.has(categoryId))
+    .map(([id, groupArtifacts]) => ({
+      id,
+      label: groupArtifacts[0]?.categoryLabel ?? id,
+      artifacts: groupArtifacts,
+    }))
+    .sort((left, right) => left.label.localeCompare(right.label));
+  return [...groups, ...unconfiguredGroups];
+}
+
+export function ProjectArtifacts({
+  snapshot,
+  onOpenFile,
+}: {
+  snapshot: ProjectObservationSnapshot;
+  onOpenFile: (path: string, label: string) => void;
+}) {
+  const [query, setQuery] = useState("");
+  const [sort, setSort] = useState<ProjectArtifactSort>(DEFAULT_PROJECT_ARTIFACT_SORT);
+  const [collapsedGroups, setCollapsedGroups] = useState<Set<string>>(() => new Set());
+  const [visibleCounts, setVisibleCounts] = useState<Record<string, number>>({});
+  const groups = useMemo(() => createArtifactGroups(snapshot, query, sort), [query, snapshot, sort]);
+  const canSortByCreated = snapshot.artifacts.some((artifact) => artifact.fileCreatedAt);
+
+  if (!snapshot.artifacts.length) {
+    return <ProjectEmptyState>{t("projectsNoArtifacts")}</ProjectEmptyState>;
+  }
+
+  return (
+    <section className="min-w-0" aria-label={t("projectsArtifacts")}>
+      <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
+        <p className="text-sm text-muted-foreground">
+          {formatNumber(snapshot.artifacts.length)} {t("projectsArtifactsCountSuffix")}
+        </p>
+        <div className="flex w-full flex-wrap items-center gap-2 sm:w-auto">
+          <Select value={sort} onValueChange={(value) => setSort(value as ProjectArtifactSort)}>
+            <SelectTrigger aria-label={t("projectsArtifactsSort")} className="h-8 w-32 rounded-lg">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="updated-desc">{t("projectsArtifactsSortUpdatedDesc")}</SelectItem>
+              <SelectItem value="updated-asc">{t("projectsArtifactsSortUpdatedAsc")}</SelectItem>
+              {canSortByCreated ? (
+                <SelectItem value="created-desc">{t("projectsArtifactsSortCreatedDesc")}</SelectItem>
+              ) : null}
+              <SelectItem value="name">{t("projectsArtifactsSortName")}</SelectItem>
+            </SelectContent>
+          </Select>
+          <input
+            type="search"
+            value={query}
+            className="h-8 min-w-0 flex-1 rounded-lg border border-border/60 bg-transparent px-3 text-sm outline-none placeholder:text-muted-foreground focus-visible:ring-1 focus-visible:ring-border sm:w-60"
+            placeholder={t("projectsArtifactsSearchPlaceholder")}
+            onChange={(event) => {
+              setQuery(event.target.value);
+              setVisibleCounts({});
+            }}
+          />
+        </div>
+      </div>
+      {groups.length ? (
+        <div className="space-y-2">
+          {groups.map((group) => {
+            const collapsed = collapsedGroups.has(group.id);
+            const visibleCount = visibleCounts[group.id] ?? INITIAL_VISIBLE_COUNT;
+            const visibleArtifacts = group.artifacts.slice(0, visibleCount);
+            return (
+              <section key={group.id} className="overflow-hidden rounded-xl border border-border/60">
+                <button
+                  type="button"
+                  className="flex w-full items-center justify-between gap-3 bg-muted/30 px-3 py-2.5 text-left text-sm transition-colors hover:bg-[var(--interaction-hover)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
+                  aria-label={`${group.label} ${formatNumber(group.artifacts.length)}`}
+                  aria-expanded={!collapsed}
+                  onClick={() => setCollapsedGroups((current) => {
+                    const next = new Set(current);
+                    if (next.has(group.id)) next.delete(group.id);
+                    else next.add(group.id);
+                    return next;
+                  })}
+                >
+                  <span className="min-w-0 truncate font-medium">{group.label}</span>
+                  <span className="shrink-0 text-xs text-muted-foreground">
+                    {formatNumber(group.artifacts.length)} {collapsed ? "▸" : "▾"}
+                  </span>
+                </button>
+                {!collapsed ? (
+                  <div className="divide-y divide-border/60">
+                    {visibleArtifacts.map((artifact) => (
+                      <ProjectFilePreviewButton
+                        key={artifact.id}
+                        available={artifact.exists}
+                        path={artifact.path}
+                        label={artifact.path}
+                        onOpen={onOpenFile}
+                        className="flex w-full min-w-0 items-center gap-3 px-3 py-2.5 text-left text-sm transition-colors enabled:hover:bg-[var(--interaction-hover)] enabled:focus-visible:outline-none enabled:focus-visible:ring-1 enabled:focus-visible:ring-border"
+                      >
+                        <span className="min-w-0 flex-1 truncate">{artifact.path}</span>
+                        {artifact.fileUpdatedAt ? (
+                          <time
+                            className="shrink-0 text-xs text-muted-foreground"
+                            dateTime={artifact.fileUpdatedAt}
+                            title={formatDateTime(artifact.fileUpdatedAt)}
+                          >
+                            {formatProjectRelativeTime(artifact.fileUpdatedAt)}
+                          </time>
+                        ) : null}
+                        {!artifact.exists ? (
+                          <span className="shrink-0 text-xs text-destructive">
+                            {t("projectsUnavailable")}
+                          </span>
+                        ) : null}
+                      </ProjectFilePreviewButton>
+                    ))}
+                    {group.artifacts.length > visibleArtifacts.length ? (
+                      <button
+                        type="button"
+                        className="w-full px-3 py-2.5 text-left text-sm text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
+                        onClick={() => setVisibleCounts((current) => ({
+                          ...current,
+                          [group.id]: visibleCount + INITIAL_VISIBLE_COUNT,
+                        }))}
+                      >
+                        {t("projectsArtifactsShowMore")} ({formatNumber(
+                          Math.min(INITIAL_VISIBLE_COUNT, group.artifacts.length - visibleArtifacts.length),
+                        )})
+                      </button>
+                    ) : null}
+                  </div>
+                ) : null}
+              </section>
+            );
+          })}
+        </div>
+      ) : (
+        <ProjectEmptyState>{t("projectsArtifactsNoMatches")}</ProjectEmptyState>
+      )}
+    </section>
+  );
+}

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

@@ -0,0 +1,150 @@
+import { Link } from "react-router-dom";
+import type { ProjectObservationSnapshot } from "@nextclaw/client-sdk";
+import { Button } from "@/shared/components/ui/button";
+import { formatDateTime, t } from "@/shared/lib/i18n";
+import {
+  ProjectEmptyState,
+  ProjectFilePreviewButton,
+  ProjectSection,
+} from "./project-section";
+import {
+  DEFAULT_PROJECT_ARTIFACT_SORT,
+  formatProjectRelativeTime,
+  sortProjectArtifacts,
+} from "../utils/project-artifact-view.utils";
+import { ProjectRuns } from "./project-runs";
+
+export function ProjectOverview({
+  hasProjectSessions,
+  snapshot,
+  onStartObservationSetup,
+  onStartProjectWork,
+  onOpenFile,
+  shouldOfferObservationSetup,
+}: {
+  hasProjectSessions: boolean;
+  snapshot: ProjectObservationSnapshot;
+  onStartObservationSetup: () => void;
+  onStartProjectWork: () => void;
+  onOpenFile: (path: string, label: string) => void;
+  shouldOfferObservationSetup: boolean;
+}) {
+  const openSignals = snapshot.signals.filter((signal) => signal.status === "open");
+  const recentArtifacts = sortProjectArtifacts(snapshot.artifacts, DEFAULT_PROJECT_ARTIFACT_SORT).slice(0, 5);
+  const recentActivity = [...snapshot.activity]
+    .sort((left, right) => right.at.localeCompare(left.at))
+    .slice(0, 6);
+  return (
+    <div className="grid min-w-0 gap-4 lg:grid-cols-2">
+      {shouldOfferObservationSetup ? (
+        <ProjectSection title={t("projectsObservationSetupTitle")} className="lg:col-span-2">
+          <p className="text-sm text-muted-foreground">
+            {t("projectsObservationSetupDescription")}
+          </p>
+          <button
+            type="button"
+            className="mt-3 rounded-lg bg-primary px-3 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
+            onClick={onStartObservationSetup}
+          >
+            {t("projectsObservationSetupAction")}
+          </button>
+        </ProjectSection>
+      ) : null}
+      {(snapshot.runs?.length ?? 0) > 0 ? (
+        <ProjectSection title={t("projectsAiActivity")} className="lg:col-span-2">
+          <ProjectRuns limit={5} snapshot={snapshot} />
+        </ProjectSection>
+      ) : null}
+      <ProjectSection title={t("projectsAttention")}>
+        {openSignals.length ? (
+          <div className="space-y-2">
+            {openSignals.map((signal) => (
+              <div key={signal.id} className="rounded-xl bg-muted/45 p-3 text-sm">
+                <p className="font-medium">{signal.message}</p>
+                <p className="mt-1 text-xs text-muted-foreground">{signal.reference.label} · {signal.level}</p>
+              </div>
+            ))}
+          </div>
+        ) : <ProjectEmptyState>{t("projectsNoAttention")}</ProjectEmptyState>}
+      </ProjectSection>
+      <ProjectSection title={t("projectsWork")}>
+        {snapshot.workItems.length ? (
+          <div className="space-y-2">
+            {snapshot.workItems.slice(0, 5).map((item) => (
+              <div key={item.id} className="rounded-xl bg-muted/45 p-3 text-sm">
+                <p className="font-medium">{item.name}</p>
+                <p className="mt-1 text-xs text-muted-foreground">
+                  {item.reference.label} · {t(`projectsStatus_${item.status}`)}
+                </p>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <>
+            <ProjectEmptyState>
+              {t(
+                shouldOfferObservationSetup
+                  ? "projectsWorkNeedsSetup"
+                  : hasProjectSessions
+                    ? "projectsWorkNoReports"
+                    : "projectsWorkNoSessions",
+              )}
+            </ProjectEmptyState>
+            {!shouldOfferObservationSetup ? (
+              <Button size="sm" variant="outline" onClick={onStartProjectWork}>
+                {t("projectsStartProjectWork")}
+              </Button>
+            ) : null}
+          </>
+        )}
+      </ProjectSection>
+      <ProjectSection title={t("projectsArtifacts")}>
+        {recentArtifacts.length ? (
+          <div className="space-y-2">
+            {recentArtifacts.map((artifact) => (
+              <ProjectFilePreviewButton
+                key={artifact.id}
+                available={artifact.exists}
+                path={artifact.path}
+                label={artifact.path}
+                onOpen={onOpenFile}
+                className="block w-full rounded-xl bg-muted/45 p-3 text-left text-sm transition-colors enabled:hover:bg-[var(--interaction-hover)] enabled:focus-visible:outline-none enabled:focus-visible:ring-1 enabled:focus-visible:ring-border"
+              >
+                <span className="block truncate font-medium">{artifact.path}</span>
+                <span className="mt-1 block text-xs text-muted-foreground">
+                  {artifact.categoryLabel}
+                  {artifact.fileUpdatedAt ? (
+                    <time dateTime={artifact.fileUpdatedAt} title={formatDateTime(artifact.fileUpdatedAt)}>
+                      {` · ${formatProjectRelativeTime(artifact.fileUpdatedAt)}`}
+                    </time>
+                  ) : null}
+                  {!artifact.exists ? ` · ${t("projectsUnavailable")}` : ""}
+                </span>
+              </ProjectFilePreviewButton>
+            ))}
+          </div>
+        ) : <ProjectEmptyState>{t("projectsNoArtifacts")}</ProjectEmptyState>}
+      </ProjectSection>
+      <ProjectSection title={t("projectsActivity")}>
+        {recentActivity.length ? (
+          <div className="space-y-3">
+            {recentActivity.map((activity) => (
+              <div key={activity.id} className="text-sm">
+                <p>{activity.message}</p>
+                <p className="mt-1 text-xs text-muted-foreground">
+                  {activity.reference.sessionId ? (
+                    <Link className="underline underline-offset-2" to={`/chat/${encodeURIComponent(activity.reference.sessionId)}`}>
+                      {activity.reference.label}
+                    </Link>
+                  ) : activity.reference.label} · <time dateTime={activity.at} title={formatDateTime(activity.at)}>
+                    {formatProjectRelativeTime(activity.at)}
+                  </time>
+                </p>
+              </div>
+            ))}
+          </div>
+        ) : <ProjectEmptyState>{t("projectsNoActivity")}</ProjectEmptyState>}
+      </ProjectSection>
+    </div>
+  );
+}

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

@@ -0,0 +1,57 @@
+import { Link } from "react-router-dom";
+import type { ObservedRequest } from "@nextclaw/client-sdk";
+import { Button, buttonVariants } from "@/shared/components/ui/button";
+import { t } from "@/shared/lib/i18n";
+import { canReplyToProjectRequest } from "@/features/projects/presenters/project-home.presenter";
+import type { ProjectRequestDecision } from "@/features/projects/utils/project-request-response.utils";
+import { ProjectSection } from "./project-section";
+
+export function ProjectRequests({
+  requests,
+  pendingRequestId,
+  onReply,
+}: {
+  requests: ObservedRequest[];
+  pendingRequestId: string | null;
+  onReply: (request: ObservedRequest, decision: ProjectRequestDecision) => void;
+}) {
+  if (requests.length === 0) return null;
+  return (
+    <ProjectSection title={t("projectsRequests")}>
+      <div className="space-y-2">
+        {requests.map((request) => {
+          const { id, prompt, reference: { label, sessionId }, reply } = request;
+          const isPending = pendingRequestId === id;
+          return (
+            <div key={id} className="flex flex-wrap items-center gap-2 rounded-xl bg-muted/45 p-3">
+              <div className="min-w-48 flex-1">
+                <p className="text-sm font-medium">{prompt}</p>
+                <p className="mt-1 text-xs text-muted-foreground">
+                  {reply ? t("projectsResponseWaiting") : label}
+                </p>
+              </div>
+              {canReplyToProjectRequest(request) ? (
+                <>
+                  <Button size="sm" disabled={isPending} onClick={() => onReply(request, "confirmed")}>
+                    {t("projectsConfirm")}
+                  </Button>
+                  <Button size="sm" variant="outline" disabled={isPending} onClick={() => onReply(request, "rejected")}>
+                    {t("projectsReject")}
+                  </Button>
+                </>
+              ) : null}
+              {sessionId ? (
+                <Link
+                  className={buttonVariants({ size: "sm", variant: "ghost" })}
+                  to={`/chat/${encodeURIComponent(sessionId)}`}
+                >
+                  {t("projectsOpenSession")}
+                </Link>
+              ) : null}
+            </div>
+          );
+        })}
+      </div>
+    </ProjectSection>
+  );
+}