@nextclaw/ui 0.24.2 → 0.25.0

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

@@ -1,11 +1,13 @@
 import { useMemo, useState, type ReactNode } from "react";
-import { Link, useLocation } from "react-router-dom";
+import { Link, useLocation, useNavigate } from "react-router-dom";
 import {
   AlarmClock,
   ChevronDown,
   ChevronRight,
   Folder,
+  FolderMinus,
   MessageSquareText,
+  MoreVertical,
   Pin,
   Plus,
 } from "lucide-react";
@@ -22,6 +24,9 @@ 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";
+import { useRemoveProject } from "@/shared/hooks/use-projects";
+import { useConfirmDialog } from "@/shared/hooks/use-confirm-dialog";
+import { ChatSessionHeaderMenuItem } from "@/features/chat/features/session/components/session-header/chat-session-header-menu-item";
 
 export type { ChatSidebarProjectGroup };
 
@@ -57,10 +62,16 @@ export function ChatSidebarProjectGroups(props: ChatSidebarProjectGroupsProps) {
   } = props;
   const presenter = usePresenter();
   const location = useLocation();
+  const navigate = useNavigate();
+  const projectRemoval = useRemoveProject();
+  const { confirm, ConfirmDialog } = useConfirmDialog();
   const collapsedProjectRoots = useChatSessionListStore(
     (state) => state.snapshot.collapsedProjectRoots,
   );
   const [openProjectRoot, setOpenProjectRoot] = useState<string | null>(null);
+  const [openProjectMenuRoot, setOpenProjectMenuRoot] = useState<string | null>(
+    null,
+  );
   const preferredSessionType = useMemo(
     () =>
       resolveProjectGroupDefaultSessionType(
@@ -70,6 +81,25 @@ export function ChatSidebarProjectGroups(props: ChatSidebarProjectGroupsProps) {
     [defaultSessionType, sessionTypeOptions],
   );
   const supportsSessionTypeChoice = sessionTypeOptions.length > 1;
+  const removeProject = async (group: ChatSidebarProjectGroup) => {
+    if (!group.projectId) return;
+    setOpenProjectMenuRoot(null);
+    const confirmed = await confirm({
+      title: `${t("projectsRemoveConfirmTitle")} “${group.projectName}”`,
+      description: t("projectsRemoveConfirmDescription"),
+      confirmLabel: t("projectsRemoveConfirmAction"),
+      variant: "default",
+    });
+    if (!confirmed) return;
+    try {
+      await projectRemoval.mutateAsync(group.projectId);
+      if (location.pathname.startsWith(`/projects/${group.projectId}/`)) {
+        navigate("/projects");
+      }
+    } catch {
+      // The mutation owns the visible error and the project stays available.
+    }
+  };
 
   return (
     <div className="space-y-0.5">
@@ -116,7 +146,7 @@ export function ChatSidebarProjectGroups(props: ChatSidebarProjectGroupsProps) {
               >
                 <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",
+                    "flex h-full w-full min-w-0 items-center group-hover/project:pr-20 group-has-[[data-project-actions]:focus-within]/project:pr-20",
                     hasRunningSession && "pr-7",
                   )}
                 >
@@ -243,6 +273,37 @@ export function ChatSidebarProjectGroups(props: ChatSidebarProjectGroupsProps) {
                     )
                   }
                 />
+                {group.projectId ? (
+                  <Popover
+                    open={openProjectMenuRoot === group.projectRoot}
+                    onOpenChange={(nextOpen) =>
+                      setOpenProjectMenuRoot(
+                        nextOpen ? group.projectRoot : null,
+                      )
+                    }
+                  >
+                    <PopoverTrigger asChild>
+                      <IconActionButton
+                        icon={<MoreVertical className="h-3.5 w-3.5" />}
+                        label={t("projectsMoreActions").replace(
+                          "{name}",
+                          group.projectName,
+                        )}
+                        tooltip={false}
+                        disabled={projectRemoval.isPending}
+                        onClick={(event) => event.stopPropagation()}
+                      />
+                    </PopoverTrigger>
+                    <ChatPopoverContent align="end" className="w-56 p-2">
+                      <ChatSessionHeaderMenuItem
+                        icon={FolderMinus}
+                        label={t("projectsRemoveFromList")}
+                        disabled={projectRemoval.isPending}
+                        onClick={() => void removeProject(group)}
+                      />
+                    </ChatPopoverContent>
+                  </Popover>
+                ) : null}
               </div>
             </div>
             {isCollapsed ? null : (
@@ -253,6 +314,7 @@ export function ChatSidebarProjectGroups(props: ChatSidebarProjectGroupsProps) {
           </div>
         );
       })}
+      <ConfirmDialog key="project-remove-confirm-dialog" />
     </div>
   );
 }

package/src/features/chat/index.ts

@@ -22,3 +22,4 @@ export {
   resolveSessionTypeLabel,
   type ChatSessionTypeOption,
 } from "./features/session-type/utils/chat-session-type.utils";
+export { ChatVoiceShortcutControl } from './features/conversation/components/chat-voice-shortcut-control';

package/src/features/chat/managers/chat-voice-input.manager.ts

@@ -0,0 +1,174 @@
+import type { ChatComposerDictationSession } from '@nextclaw/agent-chat-ui';
+
+export type VoicePhase = 'idle' | 'ready' | 'starting' | 'recording' | 'stopping' | 'error';
+export type VoiceError = 'unsupported' | 'permission' | 'network' | 'audio-capture' | 'no-speech' | 'interrupted' | 'timeout' | 'failed';
+export type VoiceSnapshot = { phase: VoicePhase; text: string; interim: string; seconds: number; error: VoiceError | null };
+export type SpeechRecognitionLike = {
+  lang: string;
+  continuous: boolean;
+  interimResults: boolean;
+  start: () => void;
+  stop: () => void;
+  abort: () => void;
+  onstart: (() => void) | null;
+  onresult: ((event: { results: ArrayLike<{ isFinal: boolean; 0: { transcript: string } }> }) => void) | null;
+  onend: (() => void) | null;
+  onerror: ((event: { error: string }) => void) | null;
+};
+type RecognitionConstructor = new () => SpeechRecognitionLike;
+const createBrowserRecognition = (): SpeechRecognitionLike | null => {
+  const host = window as Window & { SpeechRecognition?: RecognitionConstructor; webkitSpeechRecognition?: RecognitionConstructor };
+  const Constructor = host.SpeechRecognition ?? host.webkitSpeechRecognition;
+  return Constructor ? new Constructor() : null;
+};
+const initialSnapshot = (): VoiceSnapshot => ({ phase: 'idle', text: '', interim: '', seconds: 0, error: null });
+const isActive = (phase: VoicePhase) => ['starting', 'recording', 'stopping'].includes(phase);
+
+/** Owns one explicit dictation session; never writes to the chat draft or sends messages. */
+export class ChatVoiceInputManager {
+  private snapshot = initialSnapshot();
+  private listeners = new Set<() => void>();
+  private recognition: SpeechRecognitionLike | null = null;
+  private deadline: ReturnType<typeof setTimeout> | undefined;
+  private ticker: ReturnType<typeof setInterval> | undefined;
+  private context = '';
+  private settingsRequested = false;
+  private draft: ChatComposerDictationSession | null = null;
+
+  constructor(private readonly createRecognition = createBrowserRecognition) {}
+
+  getSnapshot = (): VoiceSnapshot => this.snapshot;
+  subscribe = (listener: () => void): (() => void) => {
+    this.listeners.add(listener);
+    return () => { this.listeners.delete(listener); };
+  };
+  private update = (patch: Partial<VoiceSnapshot>): void => {
+    this.snapshot = { ...this.snapshot, ...patch };
+    this.listeners.forEach((listener) => listener());
+  };
+  open = (context: string): void => {
+    if (this.snapshot.phase !== 'idle') return;
+    this.context = context;
+    this.update({ ...initialSnapshot(), phase: 'ready' });
+  };
+  openSettings = (): void => {
+    this.settingsRequested = true;
+    if (this.snapshot.phase === 'recording') { this.finish(); return; }
+    if (this.snapshot.phase === 'stopping') return;
+    const { context } = this;
+    this.acceptDraft();
+    this.open(context);
+  };
+  start = (language: string, context: string, draft: ChatComposerDictationSession | null): void => {
+    if (isActive(this.snapshot.phase)) return;
+    if (!draft) return;
+    this.release();
+    this.context = context;
+    this.draft = draft;
+    this.update({ ...initialSnapshot(), phase: 'starting' });
+    try {
+      const recognition = this.createRecognition();
+      if (!recognition) { this.fail('unsupported'); return; }
+      this.recognition = recognition;
+      recognition.lang = language === 'zh' ? 'zh-CN' : 'en-US';
+      recognition.continuous = true;
+      recognition.interimResults = true;
+      this.connect(recognition);
+      this.setDeadline(15000);
+      recognition.start();
+    } catch { this.fail('failed'); }
+  };
+  private connect = (recognition: SpeechRecognitionLike): void => {
+    recognition.onstart = () => {
+      if (this.recognition !== recognition || this.snapshot.phase !== 'starting') return;
+      clearTimeout(this.deadline);
+      this.update({ phase: 'recording' });
+      const started = Date.now();
+      this.ticker = setInterval(() => {
+        const seconds = Math.floor((Date.now() - started) / 1000);
+        this.update({ seconds });
+        if (seconds >= 60) this.finish();
+      }, 1000);
+    };
+    recognition.onresult = (event) => {
+      if (this.recognition !== recognition) return;
+      const finals: string[] = [];
+      const interim: string[] = [];
+      for (let i = 0; i < event.results.length; i += 1) {
+        const result = event.results[i];
+        const text = result[0]?.transcript?.trim();
+        if (text) (result.isFinal ? finals : interim).push(text);
+      }
+      this.update({ text: finals.join(' '), interim: interim.join(' ') });
+      this.draft?.update(this.snapshot.text, this.snapshot.interim);
+    };
+    recognition.onerror = ({ error }) => {
+      if (this.recognition !== recognition) return;
+      const reason: VoiceError = error === 'not-allowed' || error === 'service-not-allowed'
+        ? 'permission'
+        : error === 'network' || error === 'audio-capture' || error === 'no-speech' ? error : 'failed';
+      this.fail(reason);
+    };
+    recognition.onend = () => {
+      if (this.recognition !== recognition) return;
+      const text = this.snapshot.text.trim();
+      this.release(false);
+      if (!text) { this.fail('no-speech'); return; }
+      this.draft?.commit(text);
+      this.draft = null;
+      const { settingsRequested, context } = this;
+      this.cancel();
+      if (settingsRequested) this.open(context);
+    };
+  };
+  finish = (): void => {
+    if (this.snapshot.phase === 'starting') { this.cancel(); return; }
+    if (this.snapshot.phase !== 'recording' || !this.recognition) return;
+    clearInterval(this.ticker);
+    this.update({ phase: 'stopping' });
+    this.setDeadline(8000);
+    try { this.recognition.stop(); } catch { this.fail('failed'); }
+  };
+  interrupt = (): void => {
+    if (isActive(this.snapshot.phase)) this.fail('interrupted');
+  };
+  acceptDraft = (): void => {
+    this.draft?.commit();
+    this.draft = null;
+    this.cancel();
+  };
+  cancel = (): void => {
+    this.settingsRequested = false;
+    this.release();
+    this.context = '';
+    this.draft?.cancel();
+    this.draft = null;
+    this.update(initialSnapshot());
+  };
+  private fail = (error: VoiceError): void => {
+    this.release();
+    if (this.snapshot.text) this.draft?.commit(this.snapshot.text);
+    else this.draft?.cancel();
+    this.draft = null;
+    this.update(this.settingsRequested ? { ...initialSnapshot(), phase: 'ready' } : { phase: 'error', error, interim: '' });
+    this.settingsRequested = false;
+  };
+  private setDeadline = (milliseconds: number): void => {
+    clearTimeout(this.deadline);
+    this.deadline = setTimeout(() => this.fail('timeout'), milliseconds);
+  };
+  private release = (abort = true): void => {
+    clearTimeout(this.deadline);
+    clearInterval(this.ticker);
+    const { recognition } = this;
+    this.recognition = null;
+    if (!recognition) return;
+    recognition.onstart = null;
+    recognition.onend = null;
+    recognition.onerror = null;
+    recognition.onresult = null;
+    if (abort) {
+      try { recognition.abort(); } catch { /* Already released by the browser. */ }
+    }
+  };
+}

package/src/features/chat/presenters/chat.presenter.ts

@@ -4,8 +4,10 @@ import { ChatQueryManager } from '@/features/chat/managers/chat-query.manager';
 import { ChatThreadManager } from '@/features/chat/managers/chat-thread.manager';
 import type { ChatComposerIntentManager } from '@/features/chat/managers/chat-composer-intent.manager';
 import type { AppPresenter } from '@/app/presenters/app.presenter';
+import { ChatVoiceInputManager } from '@/features/chat/managers/chat-voice-input.manager';
 
 export class ChatPresenter {
+  readonly chatVoiceInputManager = new ChatVoiceInputManager();
   readonly chatUiManager: ChatUiManager;
   readonly chatSessionListManager: ChatSessionListManager;
   readonly chatQueryManager: ChatQueryManager;

package/src/features/chat/stores/chat-voice-shortcut.store.ts

@@ -0,0 +1,31 @@
+import { create } from 'zustand';
+import { createJSONStorage, persist } from 'zustand/middleware';
+
+export type VoiceShortcut = { code: string; ctrl: boolean; meta: boolean; alt: boolean; shift: boolean };
+export function isVoiceShortcut(value: unknown): value is VoiceShortcut {
+  if (!value || typeof value !== 'object') return false;
+  const key = value as VoiceShortcut;
+  const unmodified = key.ctrl === false && key.meta === false && key.alt === false && key.shift === false;
+  return typeof key.code === 'string' && (/^Key[A-Z]$/.test(key.code) || /^F(?:[6-9]|10)$/.test(key.code)) &&
+    typeof key.ctrl === 'boolean' && typeof key.meta === 'boolean' &&
+    typeof key.alt === 'boolean' && typeof key.shift === 'boolean' &&
+    (unmodified || (key.alt && key.ctrl !== key.meta));
+}
+
+type ShortcutState = { shortcut: VoiceShortcut | null; setShortcut: (shortcut: VoiceShortcut | null) => void };
+export const useChatVoiceShortcutStore = create<ShortcutState>()(persist(
+  (set) => ({ shortcut: null, setShortcut: (shortcut) => set({ shortcut }) }),
+  {
+    name: 'nextclaw.chat.voice-shortcut', version: 1,
+    storage: createJSONStorage(() => window.localStorage),
+    partialize: (state) => ({ shortcut: state.shortcut }),
+    merge: (persisted, current) => {
+      const value = (persisted as { shortcut?: unknown } | null)?.shortcut;
+      return { ...current, shortcut: isVoiceShortcut(value) ? value : null };
+    },
+  },
+));
+
+export function voiceShortcutLabel(shortcut: VoiceShortcut): string {
+  return [shortcut.ctrl && 'Ctrl', shortcut.meta && '⌘', shortcut.alt && 'Alt/⌥', shortcut.shift && 'Shift', shortcut.code.replace(/^Key/, '')].filter(Boolean).join(' + ');
+}

package/src/features/desktop-capabilities/index.ts

@@ -1 +1,2 @@
 export { DesktopAuthorizationDialog } from "./components/desktop-authorization-dialog";
+export { useDesktopCapabilityAvailability } from './hooks/use-desktop-capabilities';

package/src/features/panel-apps/components/__tests__/panel-app-open-standalone-menu-item.test.tsx

@@ -32,7 +32,7 @@ describe("PanelAppOpenStandaloneMenuItem", () => {
     setDesktopHost(undefined);
   });
 
-  it("uses a real new-tab link on the web", () => {
+  it("uses an auxiliary new-tab link that installed PWA navigation cannot capture", () => {
     const onSelect = vi.fn();
     setDesktopHost(undefined);
     render(
@@ -44,7 +44,8 @@ describe("PanelAppOpenStandaloneMenuItem", () => {
       "/apps/panel/publisher.todo%20board/standalone",
     );
     expect(link.getAttribute("target")).toBe("_blank");
-    expect(link.getAttribute("rel")).toBe("noopener noreferrer");
+    expect(link.getAttribute("rel")).toBe("opener");
+    expect(link.getAttribute("referrerpolicy")).toBe("no-referrer");
   });
 
   it("describes the same link as opening in the browser inside Desktop", () => {

package/src/features/panel-apps/components/panel-app-open-standalone-menu-item.tsx

@@ -18,7 +18,10 @@ export function PanelAppOpenStandaloneMenuItem({
     <a
       href={href}
       target="_blank"
-      rel="noopener noreferrer"
+      // Chrome captures non-auxiliary in-scope links into an installed PWA.
+      // `opener` keeps this trusted same-origin target auxiliary, so the current browser owns the new tab.
+      rel="opener"
+      referrerPolicy="no-referrer"
       className="flex w-full items-center gap-2 rounded-lg px-2.5 py-2 text-left text-sm text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-accent-foreground"
       onClick={onSelect}
     >

package/src/features/projects/AGENTS.md

@@ -1,7 +1,6 @@
 # Projects UI boundary
 
-- 本目录拥有 Projects 页面、presenter、查询状态和用户回复编排；项目观测事实来自 `client.projects` 公共快照，工作项来自 Project Work API，组件不得自行扫描文件或解析 Marker。
-- 页面默认只读；确认/拒绝只复用现有 agent-run 消息入口，并携带可追踪、可幂等的响应元数据，不创建第二套 response bridge。
+- 本目录拥有 Projects 页面、presenter 和查询状态；工作项与产物来自 Project Work API，Skills 与工作约定来自独立的有界材料 API，组件不得读取项目配置、扫描文件或从会话正文重建项目事实。
 - Overview、列表和看板消费同一份工作项查询状态；所有工作项入口统一打开右侧详情抽屉，不得在页面内追加平铺详情。
 - `project.work.changed` 只用于失效查询；UI 不重放事件历史，也不以轮询或目录扫描代替业务存储。
 - 组件负责连接与展示，跨组件状态归 hook/presenter；用户文案必须走 Projects i18n 资源。

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

@@ -1,4 +1,4 @@
-import type { ProjectObservationSnapshot } from "@nextclaw/client-sdk";
+import type { ProjectAgreementMaterial } from "@nextclaw/client-sdk";
 import { t } from "@/shared/lib/i18n";
 import {
   ProjectEmptyState,
@@ -7,86 +7,45 @@ import {
 } from "./project-section";
 
 export function ProjectAgreement({
-  snapshot,
+  agreement,
+  isLoading,
+  isError,
   onOpenFile,
 }: {
-  snapshot: ProjectObservationSnapshot;
+  agreement?: ProjectAgreementMaterial;
+  isLoading: boolean;
+  isError: boolean;
   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>
+    <ProjectSection title={t("projectsAgreementFile")}>
+      <p className="mb-4 text-sm text-muted-foreground">
+        {t("projectsAgreementDescription")}
+      </p>
+      {isLoading ? (
+        <p className="py-5 text-sm text-muted-foreground">
+          {t("projectsLoading")}
+        </p>
+      ) : isError ? (
+        <p className="py-5 text-sm text-destructive">
+          {t("projectsLoadFailed")}
+        </p>
+      ) : agreement?.available ? (
+        <ProjectFilePreviewButton
+          available
+          path={agreement.path}
+          label={agreement.path}
+          onOpen={onOpenFile}
+          className="block w-full rounded-xl bg-muted/45 p-3 text-left 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 text-sm font-medium">{agreement.path}</span>
+          <span className="mt-1 block text-xs text-muted-foreground">
+            {t("projectsAgreementOpen")}
+          </span>
+        </ProjectFilePreviewButton>
+      ) : (
+        <ProjectEmptyState>{t("projectsNoAgreement")}</ProjectEmptyState>
+      )}
+    </ProjectSection>
   );
 }