@thaut/claude-ide 0.0.0-stage → 1.0.0

package/web/src/pages/settings/ConfigPage.tsx

@@ -0,0 +1,181 @@
+import { useEffect, useState } from "react";
+import { useDiscardEditors, useUnsavedChanges } from "../../unsaved.tsx";
+import { SCOPE_LABEL, type SettingsInfo, type SettingsScope } from "@shared/config.ts";
+import { api } from "../../api.ts";
+import { Button } from "../../ui/Button.tsx";
+import { Select } from "../../ui/Select.tsx";
+import { Segmented } from "../../ui/Form.tsx";
+import { ShieldIcon, SlidersIcon, XIcon } from "../../ui/icons.tsx";
+import { Card, ErrorLine, Loading, PageTitle, Tag, Toggle, cfgUrl, inputCls, useCfg, useCfgMutation, useProjectParam } from "./ui.tsx";
+
+type FieldDef =
+  | { key: string; label: string; hint?: string; kind: "select"; options: (info: SettingsInfo) => { value: string; label: string; hint?: string }[] }
+  | { key: string; label: string; hint?: string; kind: "bool" }
+  | { key: string; label: string; hint?: string; kind: "text" | "number"; placeholder?: string };
+
+const FIELDS: FieldDef[] = [
+  {
+    key: "model",
+    label: "默认模型",
+    kind: "select",
+    hint: "新会话默认使用的模型",
+    options: (i) => i.models.map((m) => ({ value: m.value, label: m.displayName, hint: m.description })),
+  },
+  {
+    key: "effortLevel",
+    label: "默认思考强度",
+    kind: "select",
+    hint: "模型思考的投入程度",
+    options: () => ["low", "medium", "high", "xhigh"].map((v) => ({ value: v, label: v })),
+  },
+  { key: "outputStyle", label: "输出风格", kind: "select", hint: "回复的语气与格式", options: (i) => i.outputStyles.map((v) => ({ value: v, label: v })) },
+  { key: "alwaysThinkingEnabled", label: "默认开启扩展思考", kind: "bool" },
+  { key: "showThinkingSummaries", label: "显示思考摘要", kind: "bool" },
+  { key: "includeGitInstructions", label: "在系统提示中包含 git 说明", kind: "bool" },
+  { key: "respectGitignore", label: "文件选择遵守 .gitignore", kind: "bool" },
+  { key: "language", label: "回复语言", kind: "text", placeholder: "例如 chinese" },
+  { key: "cleanupPeriodDays", label: "会话记录保留天数", kind: "number", placeholder: "30" },
+  { key: "autoUpdatesChannel", label: "CLI 更新通道", kind: "select", options: () => ["latest", "stable", "rc"].map((v) => ({ value: v, label: v })) },
+];
+
+export function ConfigPage() {
+  const discardEditors = useDiscardEditors();
+  const pid = useProjectParam();
+  const info = useCfg<SettingsInfo>("settings", pid);
+  const [scope, setScope] = useState<SettingsScope>("user");
+  useEffect(() => {
+    if (!pid) setScope("user");
+  }, [pid]);
+  const set = useCfgMutation(
+    (v: { key: string; value: unknown }) => api<SettingsInfo>(cfgUrl("settings", pid), { method: "PUT", json: { scope, key: v.key, value: v.value } }),
+    ["settings", "memory"],
+  );
+  const layer = info.data?.layers.find((l) => l.scope === scope);
+  const setHere = layer ? FIELDS.filter((f) => layer.settings[f.key] !== undefined).length : 0;
+
+  return (
+    <div>
+      <PageTitle title="设置" desc="常用的 settings 键。按层级写入，优先级：项目本地 > 项目共享 > 用户。" />
+      <Card icon={<ShieldIcon />} title="权限模式">
+        <div className="flex flex-wrap items-center gap-2 text-sm">
+          <Tag tone="accent">全部放行</Tag>
+          <code className="font-mono text-xs text-muted">bypassPermissions</code>
+        </div>
+        <p className="mt-1.5 text-xs leading-relaxed text-muted">网页会话默认使用这一模式，不提供逐次审批；需要限制时在会话里切到“工作区”模式，项目目录外的写入和命令会被拦下。</p>
+      </Card>
+      {info.isPending && <Loading />}
+      <ErrorLine error={info.error || set.error} />
+      {info.data && (
+        <Card
+          icon={<SlidersIcon />}
+          title="写入层级"
+          sub={layer?.path}
+          actions={
+            <Segmented<SettingsScope>
+              label="写入层级"
+              size="sm"
+              value={scope}
+              onChange={async (next) => {
+                if (next !== scope && await discardEditors()) setScope(next);
+              }}
+              options={info.data.layers.map((l) => ({ value: l.scope, label: SCOPE_LABEL[l.scope] }))}
+            />
+          }
+          flush
+        >
+          <p className="border-b border-border bg-surface-2/40 px-4 py-2 text-xs text-muted">
+            {setHere ? `这一层设置了 ${setHere} 项；` : "这一层还没有设置这些键；"}修改只写入“{SCOPE_LABEL[scope]}”，其它层不变。
+          </p>
+          <ul className="divide-y divide-border">
+            {FIELDS.map((f) => (
+              <SettingRow
+                key={`${scope}:${f.key}`}
+                def={f}
+                info={info.data}
+                value={layer?.settings[f.key]}
+                effective={info.data.effective[f.key]}
+                busy={set.isPending}
+                onSet={(value) => set.mutate({ key: f.key, value })}
+              />
+            ))}
+          </ul>
+        </Card>
+      )}
+    </div>
+  );
+}
+
+const show = (v: unknown) => (v === undefined ? "未设置" : typeof v === "boolean" ? (v ? "开" : "关") : String(v));
+
+function SettingRow({ def, info, value, effective, busy, onSet }: { def: FieldDef; info: SettingsInfo; value: unknown; effective: unknown; busy: boolean; onSet: (v: unknown) => void }) {
+  const saved = value === undefined ? "" : String(value);
+  const [text, setText] = useState(saved);
+  const { discard } = useUnsavedChanges((def.kind === "text" || def.kind === "number") && text !== saved, def.label);
+  const cancel = async () => { if (await discard()) setText(saved); };
+  useEffect(() => setText(saved), [saved]);
+  let control;
+  if (def.kind === "select") {
+    const opts = def.options(info);
+    const all = saved && !opts.some((o) => o.value === saved) ? [...opts, { value: saved, label: saved }] : opts;
+    control = (
+      <Select
+        label={def.label}
+        value={saved}
+        onChange={(v) => onSet(v || null)}
+        disabled={busy}
+        className="w-full md:w-64"
+        menuWidth={320}
+        options={[{ value: "", label: "未设置", text: "未设置", hint: "使用其它层或默认值" }, ...all.map((o) => ({ value: o.value, label: o.label, text: o.label, hint: o.hint }))]}
+      />
+    );
+  } else if (def.kind === "bool") {
+    control = (
+      <div className="flex items-center justify-end gap-1 md:w-64">
+        {value !== undefined && (
+          <Button variant="ghost" size="sm" icon={<XIcon />} onClick={() => onSet(null)} disabled={busy}>
+            清除
+          </Button>
+        )}
+        <Toggle label={def.label} checked={value === true} onChange={(v) => onSet(v)} disabled={busy} />
+      </div>
+    );
+  } else {
+    const dirty = text !== saved;
+    control = (
+      <form
+        className="flex gap-1.5 md:w-64"
+        onSubmit={(e) => {
+          e.preventDefault();
+          onSet(text.trim() === "" ? null : def.kind === "number" ? Number(text) : text);
+        }}
+      >
+        <input aria-label={def.label} value={text} onChange={(e) => setText(e.target.value)} onKeyDown={(e) => e.key === "Escape" && void cancel()} inputMode={def.kind === "number" ? "numeric" : undefined} placeholder={def.placeholder} className={inputCls} />
+        {dirty && (
+          <>
+            <Button variant="ghost" iconOnly aria-label="撤销修改" title="撤销修改" onClick={cancel}>
+              <XIcon />
+            </Button>
+            <Button type="submit" variant="primary" disabled={busy}>
+              保存
+            </Button>
+          </>
+        )}
+      </form>
+    );
+  }
+  return (
+    <li className="flex flex-col gap-2 px-4 py-3 md:flex-row md:items-center md:gap-4" data-setting={def.key}>
+      <div className="min-w-0 flex-1">
+        <div className="flex flex-wrap items-center gap-1.5">
+          <span className="text-sm font-medium">{def.label}</span>
+          {value !== undefined && <Tag tone="accent">本层已设置</Tag>}
+        </div>
+        <div className="mt-0.5 text-xs text-muted">
+          {def.hint ? `${def.hint} · ` : ""}
+          <code className="font-mono">{def.key}</code> · 生效值：{show(effective)}
+        </div>
+      </div>
+      {control}
+    </li>
+  );
+}

package/web/src/pages/settings/GeneralPage.tsx

@@ -0,0 +1,27 @@
+import { MESSAGE_FONT_OPTIONS, setMessageFontSize, useMessageFontSize } from "../../message-font-size.ts";
+import { Segmented } from "../../ui/Form.tsx";
+import { Switch } from "../../ui/Controls.tsx";
+import { setReasoningExpanded, useReasoningExpanded } from "../../reasoning-preference.ts";
+import { Card, PageTitle } from "./ui.tsx";
+
+export function GeneralPage() {
+  const size = useMessageFontSize();
+  const reasoningExpanded = useReasoningExpanded();
+  const selected = MESSAGE_FONT_OPTIONS.find((option) => option.value === size)!;
+  return (
+    <div>
+      <PageTitle title="通用" />
+      <Card title="消息字号" testId="message-font-setting">
+        <Segmented label="消息字号" value={size} onChange={setMessageFontSize} options={MESSAGE_FONT_OPTIONS} />
+        <p className="mt-4 rounded-lg border border-border bg-bg p-3 leading-relaxed" style={{ fontSize: `${selected.bodyRem}rem` }} data-testid="message-font-preview">
+          消息正文预览：Claude 正在帮你处理任务。
+        </p>
+        <p className="mt-3 text-xs text-muted">应用于本浏览器的所有会话，修改后自动保存。</p>
+      </Card>
+      <Card title="思考过程" testId="reasoning-setting">
+        <Switch label="默认展开思考过程" checked={reasoningExpanded} onChange={setReasoningExpanded} className="[&>span:first-child]:inline" />
+        <p className="mt-3 text-xs leading-relaxed text-muted">新显示的思考块按此设置展开或收起，手动调整的状态会保留。设置自动保存到本浏览器。</p>
+      </Card>
+    </div>
+  );
+}

package/web/src/pages/settings/HooksPage.tsx

@@ -0,0 +1,244 @@
+import { useState } from "react";
+import { useDiscardEditors, useUnsavedChanges } from "../../unsaved.tsx";
+import { SCOPE_LABEL, type HookCommand, type HookEventInfo, type HookOp, type HooksListing, type SettingsScope } from "@shared/config.ts";
+import { api } from "../../api.ts";
+import { Button } from "../../ui/Button.tsx";
+import { Select } from "../../ui/Select.tsx";
+import { HookIcon, PencilIcon, PlusSmIcon, TrashIcon } from "../../ui/icons.tsx";
+import { Card, ConfirmButton, EmptyState, ErrorLine, Field, Loading, NeedProject, PageTitle, ScopeBadge, ScopeSelect, Tag, cfgUrl, inputCls, monoInputCls, useCfg, useCfgMutation, useProjectParam } from "./ui.tsx";
+
+export function HooksPage() {
+  const discardEditors = useDiscardEditors();
+  const pid = useProjectParam();
+  const listing = useCfg<HooksListing>("hooks", pid);
+  const op = useCfgMutation((body: HookOp) => api<HooksListing>(cfgUrl("hooks", pid), { method: "POST", json: body }), ["hooks", "settings"]);
+  const [adding, setAdding] = useState(false);
+  const events = listing.data?.events ?? [];
+  const total = listing.data?.layers.reduce((n, l) => n + Object.values(l.hooks).reduce((m, gs) => m + gs.reduce((k, g) => k + g.hooks.length, 0), 0), 0) ?? 0;
+
+  return (
+    <div>
+      <PageTitle title="钩子" desc="settings 的 hooks：在特定事件发生时由 CLI 执行的命令，例如编辑后自动格式化、提交前跑检查。">
+        <Button size="sm" variant="primary" icon={<PlusSmIcon />} onClick={async () => {
+          if (!adding || await discardEditors()) setAdding((value) => !value);
+        }} aria-expanded={adding}>
+          添加钩子
+        </Button>
+      </PageTitle>
+      {listing.isPending && <Loading />}
+      <ErrorLine error={listing.error || op.error} />
+      {!pid && <NeedProject />}
+      {adding && listing.data && (
+        <Card title="添加钩子" icon={<PlusSmIcon />} className="border-accent/30">
+          <HookForm
+            events={events}
+            scopes={listing.data.layers.map((l) => l.scope)}
+            busy={op.isPending}
+            onCancel={() => setAdding(false)}
+            onSubmit={(v) => op.mutateAsync({ op: "add", scope: v.scope, event: v.event, matcher: v.matcher, hook: v.hook }).then(() => setAdding(false))}
+          />
+        </Card>
+      )}
+      {listing.data && total === 0 && !adding && (
+        <div className="mb-4">
+          <EmptyState
+            icon={<HookIcon size={16} />}
+            title="还没有钩子"
+            action={
+              <Button variant="primary" icon={<PlusSmIcon />} onClick={() => setAdding(true)}>
+                添加钩子
+              </Button>
+            }
+          >
+            比如在 PostToolUse 事件、匹配 <code className="font-mono">Edit|Write</code> 时运行 <code className="font-mono">npx prettier --write</code>，让 Claude 改过的文件自动格式化。
+          </EmptyState>
+        </div>
+      )}
+      {listing.data?.layers.map((l) => {
+        const entries = Object.entries(l.hooks);
+        const n = entries.reduce((m, [, gs]) => m + gs.reduce((k, g) => k + g.hooks.length, 0), 0);
+        if (total === 0) return null;
+        return (
+          <Card key={l.scope} icon={<HookIcon />} title={SCOPE_LABEL[l.scope]} count={n} sub={l.path} testId={`hook-layer-${l.scope}`} actions={<ScopeBadge scope={l.scope} />}>
+            {entries.length === 0 && <p className="text-sm text-muted">这一层没有钩子。</p>}
+            <div className="space-y-4">
+              {entries.map(([event, groups]) => (
+                <div key={event}>
+                  <div className="mb-1.5 flex items-center gap-2">
+                    <Tag tone="accent" mono>
+                      {event}
+                    </Tag>
+                    <span className="truncate text-xs text-muted">{events.find((e) => e.name === event)?.summary}</span>
+                  </div>
+                  <ul className="divide-y divide-border rounded-lg border border-border">
+                    {groups.flatMap((g, gi) =>
+                      g.hooks.map((h, hi) => (
+                        <HookRow
+                          key={`${gi}:${hi}`}
+                          scope={l.scope}
+                          event={event}
+                          matcher={g.matcher}
+                          hook={h}
+                          events={events}
+                          busy={op.isPending}
+                          onRemove={() => op.mutate({ op: "remove", scope: l.scope, event, group: gi, index: hi })}
+                          onReplace={(matcher, hook) => op.mutateAsync({ op: "replace", scope: l.scope, event, group: gi, index: hi, matcher, hook })}
+                        />
+                      )),
+                    )}
+                  </ul>
+                </div>
+              ))}
+            </div>
+          </Card>
+        );
+      })}
+      {listing.data && listing.data.readonly.length > 0 && (
+        <Card title="其它来源（只读）" count={listing.data.readonly.length} flush>
+          <ul className="divide-y divide-border">
+            {listing.data.readonly.map((h, i) => (
+              <li key={i} className="px-4 py-2.5 text-sm">
+                <div className="flex flex-wrap items-center gap-1.5">
+                  <Tag tone="accent" mono>
+                    {h.event}
+                  </Tag>
+                  {h.matcher && <Tag mono>{h.matcher}</Tag>}
+                  <Tag>{h.label}</Tag>
+                </div>
+                <code className="mt-1 block break-all font-mono text-xs">{h.text}</code>
+              </li>
+            ))}
+          </ul>
+        </Card>
+      )}
+    </div>
+  );
+}
+
+function HookRow({
+  event,
+  matcher,
+  hook,
+  events,
+  busy,
+  onRemove,
+  onReplace,
+}: {
+  scope: SettingsScope;
+  event: string;
+  matcher?: string;
+  hook: HookCommand;
+  events: HookEventInfo[];
+  busy: boolean;
+  onRemove: () => void;
+  onReplace: (matcher: string | undefined, hook: HookCommand) => Promise<unknown>;
+}) {
+  const [edit, setEdit] = useState(false);
+  const isCommand = hook.type === "command";
+  if (edit)
+    return (
+      <li className="bg-bg p-3">
+        <HookForm events={events} fixedEvent={event} initial={{ matcher, hook }} busy={busy} onCancel={() => setEdit(false)} onSubmit={(v) => onReplace(v.matcher, v.hook).then(() => setEdit(false))} />
+      </li>
+    );
+  return (
+    <li className="flex flex-wrap items-center gap-1 py-1.5 pl-3 pr-1" data-testid="hook" data-command={hook.command}>
+      <div className="min-w-0 flex-1 basis-48 py-0.5">
+        <code className="block break-all font-mono text-[13px]">{isCommand ? hook.command : JSON.stringify(hook)}</code>
+        <div className="mt-1 flex flex-wrap gap-1.5">
+          <Tag mono title="matcher">
+            {matcher || "全部工具"}
+          </Tag>
+          {hook.type !== "command" && <Tag>{hook.type}</Tag>}
+          {hook.timeout !== undefined && <Tag>超时 {String(hook.timeout)}s</Tag>}
+        </div>
+      </div>
+      {isCommand && (
+        <Button variant="ghost" size="sm" icon={<PencilIcon />} onClick={() => setEdit(true)} disabled={busy}>
+          修改
+        </Button>
+      )}
+      <ConfirmButton variant="ghost" icon={<TrashIcon />} confirmText="删除？" onConfirm={onRemove} disabled={busy} label={`删除钩子 ${hook.command ?? ""}`}>
+        删除
+      </ConfirmButton>
+    </li>
+  );
+}
+
+type FormValue = { scope: SettingsScope; event: string; matcher?: string; hook: HookCommand };
+
+function HookForm({
+  events,
+  scopes,
+  fixedEvent,
+  initial,
+  busy,
+  onSubmit,
+  onCancel,
+}: {
+  events: HookEventInfo[];
+  scopes?: SettingsScope[];
+  fixedEvent?: string;
+  initial?: { matcher?: string; hook: HookCommand };
+  busy: boolean;
+  onSubmit: (v: FormValue) => Promise<unknown>;
+  onCancel: () => void;
+}) {
+  const [scope, setScope] = useState<SettingsScope>(scopes?.includes("local") ? "local" : "user");
+  const [event, setEvent] = useState(fixedEvent ?? "PreToolUse");
+  const [matcher, setMatcher] = useState(initial?.matcher ?? "");
+  const [command, setCommand] = useState(initial?.hook.command ?? "");
+  const [timeout, setTimeoutV] = useState(initial?.hook.timeout !== undefined ? String(initial.hook.timeout) : "");
+  const values = JSON.stringify({ scope, event, matcher, command, timeout });
+  const [original] = useState(values);
+  const { discard } = useUnsavedChanges(values !== original, "钩子配置");
+  const cancel = async () => { if (await discard()) onCancel(); };
+  const info = events.find((e) => e.name === event);
+  const supportsMatcher = info ? info.supportsMatcher : true;
+  const eventList = events.length ? events : [{ name: "PreToolUse", summary: "", supportsMatcher: true }];
+  return (
+    <form
+      className="grid gap-3 md:grid-cols-2"
+      onKeyDown={(e) => e.key === "Escape" && void cancel()}
+      onSubmit={(e) => {
+        e.preventDefault();
+        onSubmit({
+          scope,
+          event,
+          matcher: supportsMatcher ? matcher.trim() || undefined : undefined,
+          hook: { ...(initial?.hook ?? {}), type: "command", command: command.trim(), ...(timeout.trim() ? { timeout: Number(timeout) } : { timeout: undefined }) },
+        }).catch(() => {});
+      }}
+    >
+      {scopes && (
+        <Field group label="写入">
+          <ScopeSelect label="写入" value={scope} onChange={setScope} scopes={scopes} />
+        </Field>
+      )}
+      {!fixedEvent && (
+        <Field group label="事件" hint={info?.summary}>
+          <Select label="事件" value={event} onChange={setEvent} className="w-full font-mono" menuWidth={360} options={eventList.map((e) => ({ value: e.name, label: <span className="font-mono">{e.name}</span>, text: e.name, hint: e.summary || undefined }))} />
+        </Field>
+      )}
+      {supportsMatcher && (
+        <Field label="匹配（matcher，可留空）" hint="例如 Edit|Write，或工具名的正则；留空表示所有工具">
+          <input aria-label="匹配" value={matcher} onChange={(e) => setMatcher(e.target.value)} className={monoInputCls} placeholder="Edit|Write" />
+        </Field>
+      )}
+      <Field label="命令">
+        <input autoFocus={!!fixedEvent} aria-label="钩子命令" value={command} onChange={(e) => setCommand(e.target.value)} className={monoInputCls} placeholder="npx prettier --write ." />
+      </Field>
+      <Field label="超时（秒，可留空）">
+        <input aria-label="超时" inputMode="numeric" value={timeout} onChange={(e) => setTimeoutV(e.target.value)} className={inputCls} placeholder="60" />
+      </Field>
+      <div className="flex justify-end gap-2 border-t border-border pt-3 md:col-span-2">
+        <Button variant="ghost" onClick={cancel}>
+          取消
+        </Button>
+        <Button type="submit" variant="primary" disabled={!command.trim()} loading={busy}>
+          保存
+        </Button>
+      </div>
+    </form>
+  );
+}