@thaut/claude-ide 0.0.0-stage → 1.0.0

package/web/src/components/ActivityNotifier.tsx

@@ -0,0 +1,22 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router";
+import { onActivity } from "../live.ts";
+import { notifyInPage } from "../notify.ts";
+
+const KIND_ZH = { done: "已完成", attention: "等你处理", error: "出错了" } as const;
+
+/** Turns session activity (finished / waiting) into notifications, unless you are looking at that session. */
+export function ActivityNotifier() {
+  const location = useLocation();
+  useEffect(
+    () =>
+      onActivity((a) => {
+        const url = `/p/${a.projectId}/s/${a.sessionId}`;
+        if (location.pathname.startsWith(url) && document.visibilityState === "visible") return;
+        // Same tag as the server's push, so a device shows one notification, not two.
+        void notifyInPage({ kind: a.kind, title: a.title || "会话", body: KIND_ZH[a.kind], url, tag: `${a.sessionId}:${a.kind}` });
+      }),
+    [location.pathname],
+  );
+  return null;
+}

package/web/src/components/AnnotationEditor.tsx

@@ -0,0 +1,135 @@
+import { useEffect, useId, useState } from "react";
+import { createPortal } from "react-dom";
+import { Link } from "react-router";
+import { addAnnotation, ensureAnnotationsLoaded, rememberAnnotationSession, updateAnnotation, useAnnotations, type AnnotationSource, type DraftAnnotation } from "../annotations.ts";
+import { useSessions } from "../hooks.ts";
+import { Button } from "../ui/Button.tsx";
+import { textareaCls } from "../ui/Form.tsx";
+import { Select } from "../ui/Select.tsx";
+import { Modal } from "./Modal.tsx";
+import { encodePath } from "./ProjectNav.tsx";
+
+export function annotationSourceLabel(source: Extract<AnnotationSource, { kind: "file" }>) {
+  const lines = source.startLine ? `:${source.startLine}${source.endLine && source.endLine !== source.startLine ? `–${source.endLine}` : ""}` : "";
+  return `${source.path}${lines}`;
+}
+
+export function AnnotationSourceLink({ projectId, source }: { projectId: string; source: AnnotationSource }) {
+  if (source.kind !== "file") return null;
+  const project = `/p/${encodeURIComponent(projectId)}`;
+  const to = `${project}/files/${encodePath(source.path)}${source.startLine ? `?line=${source.startLine}` : ""}`;
+  return <Link to={to} title={annotationSourceLabel(source)} className="min-w-0 truncate text-xs text-accent hover:underline">{annotationSourceLabel(source)}</Link>;
+}
+
+/** The quote and source are immutable snapshots. Editing an annotation only changes its comment. */
+export function AnnotationEditor({ projectId, sessionId, source, quote, annotation, onClose }: {
+  projectId: string;
+  /** A transcript/editor supplies a fixed target; a file selection lets the user choose. */
+  sessionId?: string;
+  source: AnnotationSource;
+  quote: string;
+  annotation?: DraftAnnotation;
+  onClose: () => void;
+}) {
+  const sessions = useSessions(projectId);
+  const recent = useAnnotations((state) => state.recentSessions[projectId]);
+  const storageError = useAnnotations((state) => state.storageError);
+  const [comment, setComment] = useState(annotation?.comment ?? "");
+  const [chosenSession, setChosenSession] = useState(recent ?? "");
+  const [saveError, setSaveError] = useState("");
+  const targetId = useId();
+  const commentId = useId();
+  const lockedSession = annotation?.targetSessionId ?? sessionId;
+  const options = sessions.data ?? [];
+  const selected = options.find((item) => item.id === chosenSession);
+  const targetSessionId = lockedSession ?? selected?.id;
+  const targetTitle = options.find((item) => item.id === lockedSession)?.title;
+  const staleRecent = !!chosenSession && !selected && sessions.isSuccess;
+  const titleCounts = new Map<string, number>();
+  for (const item of options) {
+    const title = item.title.trim() || "未命名会话";
+    titleCounts.set(title, (titleCounts.get(title) ?? 0) + 1);
+  }
+  const sessionOptions = options.map((item) => {
+    const title = item.title.trim() || "未命名会话";
+    const date = new Date(item.createdAt ?? item.lastModified).toLocaleString("zh-CN", { year: "numeric", month: "numeric", day: "numeric", hour: "2-digit", minute: "2-digit" });
+    return { id: item.id, label: (titleCounts.get(title) ?? 0) > 1 ? `${title} · ${date}` : title };
+  });
+
+  useEffect(() => { ensureAnnotationsLoaded(); }, []);
+
+  function save() {
+    if (!comment.trim() || !targetSessionId) return;
+    try {
+      if (annotation) updateAnnotation(annotation.id, comment.trim());
+      else addAnnotation({ projectId, targetSessionId, source, quote, comment: comment.trim() });
+      rememberAnnotationSession(projectId, targetSessionId);
+      onClose();
+    } catch (error) {
+      setSaveError(error instanceof Error ? error.message : "无法保存批注，请重试。");
+    }
+  }
+
+  return createPortal(
+    <Modal title={annotation ? "编辑批注" : "添加批注"} onClose={onClose} testId="annotation-editor">
+      <div className="space-y-4" data-annotation-exclude>
+        <div>
+          {source.kind === "file" && <div className="mb-1.5 flex min-w-0 items-center gap-2"><span className="shrink-0 text-xs text-muted">来源</span><AnnotationSourceLink projectId={projectId} source={source} /></div>}
+          <pre data-testid="annotation-quote" className="max-h-40 overflow-auto whitespace-pre-wrap break-words rounded-md border border-border bg-surface-2/60 px-3 py-2 font-mono text-xs leading-relaxed">{quote}</pre>
+        </div>
+        <div>
+          <label htmlFor={targetId} className="mb-1.5 block text-xs font-medium text-muted">发送到会话</label>
+          {lockedSession ? (
+            <div id={targetId} data-testid="annotation-target" data-value={lockedSession} className="rounded-md border border-border bg-surface-2/60 px-3 py-2 text-sm">
+              <span className="block truncate">{targetTitle?.trim() || "当前会话"}</span>
+            </div>
+          ) : (
+            <>
+              <Select
+                id={targetId}
+                label="发送到会话"
+                testId="annotation-target"
+                value={selected?.id ?? ""}
+                onChange={setChosenSession}
+                options={sessionOptions.map((item) => ({ value: item.id, label: item.label }))}
+                placeholder={sessions.isPending ? "正在加载会话…" : "请选择会话"}
+                emptyText="此项目暂无会话"
+                disabled={sessions.isPending || sessions.isError || options.length === 0}
+                className="w-full min-w-0"
+              />
+              {sessions.isError && <p role="alert" className="mt-1 text-xs text-danger">会话列表加载失败：{sessions.error.message}</p>}
+              {sessions.isSuccess && options.length === 0 && <p className="mt-1 text-xs text-muted">此项目暂无会话。请先打开或创建一个会话，再添加批注。</p>}
+              {staleRecent && <p className="mt-1 text-xs text-muted">最近使用的会话已不可用，请重新选择。</p>}
+            </>
+          )}
+        </div>
+        <div>
+          <label htmlFor={commentId} className="mb-1.5 block text-xs font-medium text-muted">批注内容</label>
+          <textarea
+            id={commentId}
+            data-testid="annotation-comment"
+            autoFocus
+            rows={4}
+            value={comment}
+            onChange={(event) => { setComment(event.target.value); setSaveError(""); }}
+            onKeyDown={(event) => {
+              if ((event.metaKey || event.ctrlKey) && event.key === "Enter" && !event.nativeEvent.isComposing) {
+                event.preventDefault();
+                save();
+              }
+            }}
+            placeholder="写下希望 agent 处理的内容…"
+            className={textareaCls}
+          />
+          <p className="mt-1 text-xs text-muted">保存后会随该会话的下一条消息发送。</p>
+        </div>
+        {(saveError || storageError) && <p role="alert" className="text-xs text-danger">{saveError || storageError}</p>}
+        <div className="flex justify-end gap-2">
+          <Button onClick={onClose}>取消</Button>
+          <Button variant="primary" onClick={save} disabled={!comment.trim() || !targetSessionId} data-testid="annotation-save">保存批注</Button>
+        </div>
+      </div>
+    </Modal>,
+    document.body,
+  );
+}

package/web/src/components/AnnotationSelection.tsx

@@ -0,0 +1,122 @@
+import { useEffect, useRef, useState, type ReactNode } from "react";
+import { createPortal } from "react-dom";
+import { useLocation } from "react-router";
+import { annotationMenuPosition, captureAnnotationSelection, type AnnotationSelection as CapturedSelection } from "../annotation-selection.ts";
+import { useAnnotations } from "../annotations.ts";
+import { Button } from "../ui/Button.tsx";
+import { AnnotationEditor } from "./AnnotationEditor.tsx";
+
+export type AnnotationSelectionProps = {
+  projectId: string;
+  sessionId?: string;
+  agentToolUseId?: string;
+  filePath?: string;
+  fileContent?: string;
+  enabled?: boolean;
+  children: ReactNode;
+  className?: string;
+};
+
+/** Adds a selection action without changing native selection, copying, scrolling or pointer handling. */
+export function AnnotationSelection({ projectId, sessionId, agentToolUseId, filePath, fileContent, enabled = true, children, className }: AnnotationSelectionProps) {
+  const root = useRef<HTMLDivElement>(null);
+  const menuRef = useRef<HTMLButtonElement>(null);
+  const [selection, setSelection] = useState<CapturedSelection | null>(null);
+  const [editing, setEditing] = useState<CapturedSelection | null>(null);
+  const storageError = useAnnotations((state) => state.storageError);
+  const location = useLocation();
+
+  useEffect(() => {
+    setSelection(null);
+    setEditing(null);
+  }, [projectId, sessionId, agentToolUseId, filePath, location.key]);
+
+  useEffect(() => {
+    if (!enabled || editing) {
+      setSelection(null);
+      return;
+    }
+    let frame = 0;
+    let dragging = false;
+    const read = () => {
+      frame = 0;
+      if (dragging || !root.current) return;
+      setSelection(captureAnnotationSelection(root.current, window.getSelection(), { sessionId, agentToolUseId, filePath, fileContent }));
+    };
+    const scheduleRead = () => {
+      if (frame) cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(read);
+    };
+    const pointerDown = (event: PointerEvent) => {
+      if (event.target instanceof Node && menuRef.current?.contains(event.target)) return;
+      dragging = event.target instanceof Node && !!root.current?.contains(event.target);
+      setSelection(null);
+    };
+    const pointerUp = () => {
+      const selectedInside = dragging;
+      dragging = false;
+      if (selectedInside) scheduleRead();
+    };
+    const close = () => {
+      dragging = false;
+      if (frame) cancelAnimationFrame(frame);
+      frame = 0;
+      setSelection(null);
+    };
+    const escape = (event: KeyboardEvent) => { if (event.key === "Escape") close(); };
+    document.addEventListener("selectionchange", scheduleRead);
+    document.addEventListener("pointerdown", pointerDown);
+    document.addEventListener("pointerup", pointerUp);
+    document.addEventListener("pointercancel", close);
+    document.addEventListener("scroll", close, true);
+    document.addEventListener("keydown", escape);
+    window.addEventListener("resize", close);
+    window.visualViewport?.addEventListener("resize", close);
+    window.visualViewport?.addEventListener("scroll", close);
+    return () => {
+      if (frame) cancelAnimationFrame(frame);
+      document.removeEventListener("selectionchange", scheduleRead);
+      document.removeEventListener("pointerdown", pointerDown);
+      document.removeEventListener("pointerup", pointerUp);
+      document.removeEventListener("pointercancel", close);
+      document.removeEventListener("scroll", close, true);
+      document.removeEventListener("keydown", escape);
+      window.removeEventListener("resize", close);
+      window.visualViewport?.removeEventListener("resize", close);
+      window.visualViewport?.removeEventListener("scroll", close);
+    };
+  }, [enabled, editing, sessionId, agentToolUseId, filePath, fileContent]);
+
+  const viewport = typeof window !== "undefined" ? window.visualViewport : null;
+  const bounds = typeof window !== "undefined" ? {
+    left: viewport?.offsetLeft ?? 0,
+    top: viewport?.offsetTop ?? 0,
+    width: viewport?.width ?? window.innerWidth,
+    height: viewport?.height ?? window.innerHeight,
+  } : null;
+  const position = selection && bounds ? annotationMenuPosition(selection.rect, bounds) : null;
+
+  return (
+    <div ref={root} className={className}>
+      {filePath !== undefined && storageError && <p role="alert" data-testid="annotation-storage-error" data-annotation-exclude className="shrink-0 border-b border-danger/30 bg-danger/5 px-3 py-2 text-xs text-danger">{storageError}</p>}
+      {children}
+      {selection && position && bounds && createPortal(
+        <Button
+          ref={menuRef}
+          variant="primary"
+          data-testid="annotation-add"
+          className="fixed z-40 shadow-lg"
+          style={{
+            width: `min(${position.width}px, calc(100vw - max(8px, env(safe-area-inset-left)) - max(8px, env(safe-area-inset-right))))`,
+            left: `clamp(max(${bounds.left + 8}px, env(safe-area-inset-left)), ${position.left}px, min(${bounds.left + bounds.width - position.width - 8}px, calc(100vw - ${position.width}px - max(8px, env(safe-area-inset-right)))))`,
+            top: `clamp(max(${bounds.top + 8}px, env(safe-area-inset-top)), ${position.top}px, min(${bounds.top + bounds.height - 48}px, calc(100dvh - 40px - max(8px, env(safe-area-inset-bottom)))))`,
+          }}
+          onPointerDown={(event) => event.preventDefault()}
+          onClick={() => { setEditing(selection); setSelection(null); }}
+        >添加批注</Button>,
+        document.body,
+      )}
+      {editing && <AnnotationEditor projectId={projectId} sessionId={sessionId} source={editing.source} quote={editing.quote} onClose={() => setEditing(null)} />}
+    </div>
+  );
+}