feat(settings): data-safe editors, deep-linked search, Data/About/Cost pages

- EditorModal loads once per path (a parent re-render no longer reloads the
  file over the user's typing), refuses Save after a failed load, opens a
  truncated (>256 KB) file read-only, and asks before overwriting a file
  that changed on disk or could not be re-read.
- Settings/Hooks editors unset only keys from the snapshot taken at Edit,
  warn when the file changed underneath, keep a renamed key's value, and
  refuse a new key named like a redacted one (env) or a read-only hook
  event, which used to replace the secret/hooks.
- Project scope shows its resolved folder and is disabled inside the
  plugin cache. Account-profile, pricing-row and pet deletes confirm;
  two-click actions disarm after 3 s; unsaved drafts ask before closing.
- Search indexes every Claude Code / Codex sub-tab, opens it via ?tab= and
  scrolls to + highlights the row; the active config tab is in the URL.
- General splits into General / Data / About; Pricing moves to a Cost
  group with one shared load; config tabs group as Content / Extensions /
  Config with arrow-key roving; Promise.allSettled per tab.
- Data: browser-preferences export/import (allowlisted keys), per-section
  reset, housekeeping dry-run first, clear-all behind a typed phrase.
  Server: purge days must be a whole number >= 1 (INVALID_PURGE_DAYS) and
  dry_run returns exactly what the real run would delete.
- Alerts can be edited; webhooks/alerts/remote-source failures toast;
  copies go through copyText; modals get dialog roles and useDialog.
- Sagi: Ctrl/Cmd+B only when shown and not typing, default spot clear of
  row controls, arrow keys move it, reduced motion honoured; the dead
  /run launch link goes to the workspace.
This commit is contained in:
2026-10-05 13:22:08 +07:00
parent 03f1673fce
commit 6715fbd971
68 changed files with 4817 additions and 1374 deletions
@@ -5,14 +5,18 @@
* server's refusal inline, the saved value while the field differs from it,
* and a warning when the real
* environment sets the variable (the environment wins at the next start, so a
* saved value would not survive a restart). The server validates and persists;
* this component only loads, submits and reports.
* saved value would not survive a restart). Enter saves; a caller may ask for
* a confirmation first (`confirm`). The server validates and persists; this
* component only loads, submits and reports.
* @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
*/
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { AlertTriangle, FolderOpen } from "lucide-react";
import { confirmDialog } from "../../lib/confirm";
import { isSubmitEnter } from "../../lib/keys";
import { SettingsSection } from "./SettingsRow";
export interface HomeDirValue {
value: string;
@@ -29,6 +33,8 @@ interface Props {
/** Optional second line under the description. */
note?: string;
placeholder: string;
/** Ask this before saving (a change with wide effects, like CLAUDE_HOME). */
confirm?: { title: string; message?: string };
load: () => Promise<HomeDirValue>;
save: (path: string) => Promise<HomeDirValue>;
}
@@ -37,7 +43,16 @@ interface Props {
* An editable home directory with its own load/save cycle.
* @returns The section, or its skeleton-free shell while loading.
*/
export function HomeDirSetting({ id, title, description, note, placeholder, load, save }: Props) {
export function HomeDirSetting({
id,
title,
description,
note,
placeholder,
confirm,
load,
save,
}: Props) {
const { t } = useTranslation("settings");
const [current, setCurrent] = useState<HomeDirValue | null>(null);
const [input, setInput] = useState("");
@@ -61,7 +76,8 @@ export function HomeDirSetting({ id, title, description, note, placeholder, load
}, []);
const handleSave = async () => {
if (!current || input === current.value) return;
if (!current || input === current.value || saving) return;
if (confirm && !(await confirmDialog({ ...confirm, confirmLabel: t("homeDir.save") }))) return;
setSaving(true);
setError(null);
try {
@@ -76,15 +92,18 @@ export function HomeDirSetting({ id, title, description, note, placeholder, load
};
return (
<section id={id} className="scroll-mt-24">
<h3 className="text-sm font-medium text-fg-secondary flex items-center gap-2 mb-1">
<FolderOpen className="w-4 h-4 text-fg-muted" />
{title}
</h3>
<p className="text-xs text-fg-muted mb-1">{description}</p>
{note && <p className="text-[11px] text-fg-muted italic mb-4 leading-snug">{note}</p>}
<div className={`card p-5 space-y-4 ${note ? "" : "mt-3"}`}>
<SettingsSection
id={id}
title={
<span className="flex items-center gap-2">
<FolderOpen className="w-4 h-4 text-fg-muted" />
{title}
</span>
}
description={description}
>
<div className="space-y-4">
{note && <p className="text-[11px] text-fg-muted italic leading-snug">{note}</p>}
<div className="flex items-center gap-3">
<input
type="text"
@@ -94,10 +113,17 @@ export function HomeDirSetting({ id, title, description, note, placeholder, load
setInput(e.target.value);
setError(null);
}}
className="flex-1 bg-surface-4 border border-surface-3 rounded-lg px-3 py-2 text-sm text-fg-secondary font-mono focus:outline-none focus:border-violet-500/50"
onKeyDown={(e) => {
if (isSubmitEnter(e)) {
e.preventDefault();
void handleSave();
}
}}
className="input flex-1 font-mono"
placeholder={placeholder}
/>
<button
type="button"
onClick={handleSave}
disabled={saving || !current || input === current.value}
className="btn-primary px-4 py-2 text-sm disabled:opacity-50 disabled:cursor-not-allowed"
@@ -125,6 +151,6 @@ export function HomeDirSetting({ id, title, description, note, placeholder, load
</p>
)}
</div>
</section>
</SettingsSection>
);
}