claude-smart 0.2.31 → 0.2.32

package/plugin/dashboard/app/configure/env/page.tsx

@@ -8,14 +8,14 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
 import { Separator } from "@/components/ui/separator";
-import { useSettings } from "@/hooks/use-settings";
+import { SETTINGS_CHANGED_EVENT } from "@/hooks/use-settings";
 import type { ClaudeCodeHookConfig, ClaudeSmartConfig } from "@/lib/types";
 
 export default function ConfigureEnvPage() {
-  const { reflexioUrl, setReflexioUrl } = useSettings();
   const [config, setConfig] = useState<ClaudeSmartConfig | null>(null);
   const [hookConfig, setHookConfig] = useState<ClaudeCodeHookConfig | null>(null);
   const [hookDirty, setHookDirty] = useState(false);
+  const [apiKeyDirty, setApiKeyDirty] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [saved, setSaved] = useState(false);
   const [saving, setSaving] = useState(false);
@@ -31,6 +31,7 @@ export default function ConfigureEnvPage() {
         setConfig(envConfig);
         setHookConfig(claudeConfig);
         setHookDirty(false);
+        setApiKeyDirty(false);
       })
       .catch((e) => setError(e instanceof Error ? e.message : String(e)));
   }, []);
@@ -63,11 +64,14 @@ export default function ConfigureEnvPage() {
     setSaving(true);
     setError(null);
     try {
+      const envUpdate: Partial<ClaudeSmartConfig> = { ...config };
+      if (!apiKeyDirty) delete envUpdate.REFLEXIO_API_KEY;
+      delete envUpdate.REFLEXIO_API_KEY_SET;
       const [envRes, hookRes] = await Promise.all([
         fetch("/api/config", {
           method: "PUT",
           headers: { "content-type": "application/json" },
-          body: JSON.stringify(config),
+          body: JSON.stringify(envUpdate),
         }),
         fetch("/api/claude-settings", {
           method: "PUT",
@@ -89,7 +93,9 @@ export default function ConfigureEnvPage() {
       const updatedHook: ClaudeCodeHookConfig = await hookRes.json();
       setConfig(updated);
       setHookConfig(updatedHook);
+      window.dispatchEvent(new Event(SETTINGS_CHANGED_EVENT));
       setHookDirty(false);
+      setApiKeyDirty(false);
       setSaved(true);
     } catch (e) {
       setError(e instanceof Error ? e.message : String(e));
@@ -111,7 +117,7 @@ export default function ConfigureEnvPage() {
         }
       />
 
-      <div className="p-6 max-w-2xl mx-auto space-y-6">
+      <div className="p-6 max-w-3xl mx-auto space-y-5">
         {error && (
           <div className="rounded-lg border border-destructive/30 bg-destructive/5 text-destructive px-4 py-3 text-sm">
             {error}
@@ -124,27 +130,7 @@ export default function ConfigureEnvPage() {
           </div>
         )}
 
-        <section className="space-y-4">
-          <div>
-            <h2 className="text-sm font-semibold">Dashboard</h2>
-            <p className="text-xs text-muted-foreground">
-              Stored in browser localStorage — only affects this UI.
-            </p>
-          </div>
-          <div className="space-y-2">
-            <Label>Reflexio endpoint (dashboard)</Label>
-            <Input
-              value={reflexioUrl}
-              onChange={(e) => setReflexioUrl(e.target.value)}
-              className="font-mono text-xs"
-              placeholder="http://localhost:8071"
-            />
-          </div>
-        </section>
-
-        <Separator />
-
-        <section className="space-y-4">
+        <section className="space-y-4 rounded-lg border border-border bg-card/92 p-5 shadow-sm">
           <div>
             <h2 className="text-sm font-semibold">claude-smart environment</h2>
             <p className="text-xs text-muted-foreground">
@@ -162,11 +148,30 @@ export default function ConfigureEnvPage() {
                 <Input
                   value={config.REFLEXIO_URL}
                   onChange={(e) => update("REFLEXIO_URL", e.target.value)}
-                  className="font-mono text-xs"
+                  className="font-mono text-xs bg-background/80"
                   placeholder="http://localhost:8071/"
                 />
               </div>
 
+              <div className="space-y-2">
+                <Label>REFLEXIO_API_KEY</Label>
+                <Input
+                  type="password"
+                  value={String(config.REFLEXIO_API_KEY ?? "")}
+                  onChange={(e) => {
+                    setApiKeyDirty(true);
+                    update("REFLEXIO_API_KEY", e.target.value);
+                  }}
+                  className="font-mono text-xs bg-background/80"
+                  placeholder={
+                    config.REFLEXIO_API_KEY_SET
+                      ? "(configured - leave blank to keep existing key)"
+                      : "(empty - local mode)"
+                  }
+                  autoComplete="off"
+                />
+              </div>
+
               <div className="flex items-start justify-between gap-4">
                 <div className="min-w-0">
                   <Label htmlFor="use-local-cli">CLAUDE_SMART_USE_LOCAL_CLI</Label>
@@ -206,7 +211,7 @@ export default function ConfigureEnvPage() {
                 <Input
                   value={String(config.CLAUDE_SMART_CLI_PATH ?? "")}
                   onChange={(e) => update("CLAUDE_SMART_CLI_PATH", e.target.value)}
-                  className="font-mono text-xs"
+                  className="font-mono text-xs bg-background/80"
                   placeholder="(empty — auto-detect via $PATH)"
                 />
               </div>
@@ -218,7 +223,7 @@ export default function ConfigureEnvPage() {
                   onChange={(e) =>
                     update("CLAUDE_SMART_CLI_TIMEOUT", e.target.value)
                   }
-                  className="font-mono text-xs"
+                  className="font-mono text-xs bg-background/80"
                   placeholder="120"
                 />
               </div>
@@ -230,7 +235,7 @@ export default function ConfigureEnvPage() {
                   onChange={(e) =>
                     update("CLAUDE_SMART_STATE_DIR", e.target.value)
                   }
-                  className="font-mono text-xs"
+                  className="font-mono text-xs bg-background/80"
                   placeholder="(empty — default ~/.claude-smart/sessions)"
                 />
               </div>
@@ -240,7 +245,7 @@ export default function ConfigureEnvPage() {
 
         <Separator />
 
-        <section className="space-y-4">
+        <section className="space-y-4 rounded-lg border border-border bg-card/92 p-5 shadow-sm">
           <div>
             <h2 className="text-sm font-semibold">Claude Code hook environment</h2>
             <p className="text-xs text-muted-foreground">
@@ -270,7 +275,7 @@ export default function ConfigureEnvPage() {
                   onCheckedChange={updateOptimizer}
                 />
               </div>
-              <div className="rounded-md border border-border bg-muted/20 p-3 text-xs text-muted-foreground space-y-2">
+              <div className="rounded-md border border-border bg-background/60 p-3 text-xs text-muted-foreground space-y-2">
                 <div className="flex items-center justify-between gap-4">
                   <span>Effective value</span>
                   <span className="font-medium text-foreground">

package/plugin/dashboard/app/configure/layout.tsx

@@ -30,7 +30,7 @@ export default function ConfigureLayout({
 
   return (
     <div className="flex-1 flex flex-col overflow-hidden">
-      <div className="border-b border-border bg-muted/20 px-6 py-4">
+      <div className="border-b border-border bg-background/72 px-6 py-4 backdrop-blur">
         <PageTabs
           items={tabs}
           activeId={

package/plugin/dashboard/app/configure/server/page.tsx

@@ -6,7 +6,6 @@ import { PageHeader } from "@/components/common/page-header";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { useSettings } from "@/hooks/use-settings";
 import type { ReflexioConfig } from "@/lib/types";
 
 type ExtractorField =
@@ -14,7 +13,6 @@ type ExtractorField =
   | "user_playbook_extractor_configs";
 
 export default function ConfigureServerPage() {
-  const { reflexioUrl } = useSettings();
   const [srvConfig, setSrvConfig] = useState<ReflexioConfig | null>(null);
   const [srvError, setSrvError] = useState<string | null>(null);
   const [srvSaved, setSrvSaved] = useState(false);
@@ -22,11 +20,8 @@ export default function ConfigureServerPage() {
   const [srvLoading, setSrvLoading] = useState(true);
 
   const fetchSrvConfig = useCallback(async (): Promise<ReflexioConfig> => {
-    const headers: HeadersInit = {};
-    if (reflexioUrl) headers["x-reflexio-url"] = reflexioUrl;
     const res = await fetch("/api/reflexio/api/get_config", {
       cache: "no-store",
-      headers,
     });
     if (!res.ok) {
       const body = await res.json().catch(() => null);
@@ -36,7 +31,7 @@ export default function ConfigureServerPage() {
       throw new Error(detail);
     }
     return (await res.json()) as ReflexioConfig;
-  }, [reflexioUrl]);
+  }, []);
 
   useEffect(() => {
     let alive = true;
@@ -84,7 +79,6 @@ export default function ConfigureServerPage() {
     setSrvError(null);
     try {
       const headers: HeadersInit = { "content-type": "application/json" };
-      if (reflexioUrl) headers["x-reflexio-url"] = reflexioUrl;
       const res = await fetch("/api/reflexio/api/set_config", {
         method: "POST",
         headers,
@@ -120,7 +114,7 @@ export default function ConfigureServerPage() {
         }
       />
 
-      <div className="p-6 max-w-2xl mx-auto space-y-6">
+      <div className="p-6 max-w-3xl mx-auto space-y-5">
         {srvError && (
           <div className="rounded-lg border border-destructive/30 bg-destructive/5 text-destructive px-4 py-3 text-sm">
             {srvError}
@@ -136,7 +130,7 @@ export default function ConfigureServerPage() {
         {srvLoading ? (
           <div className="text-sm text-muted-foreground">Loading…</div>
         ) : srvConfig ? (
-          <section className="space-y-5">
+          <section className="space-y-5 rounded-lg border border-border bg-card/92 p-5 shadow-sm">
             <div className="space-y-2">
               <Label>Additional agent description</Label>
               <p className="text-xs text-muted-foreground">
@@ -148,7 +142,7 @@ export default function ConfigureServerPage() {
                 onChange={(e) =>
                   updateSrv("agent_context_prompt", e.target.value || null)
                 }
-                className="w-full font-mono text-xs min-h-[80px] rounded-md border border-input bg-transparent px-3 py-2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                className="w-full font-mono text-xs min-h-[80px] rounded-md border border-input bg-background/80 px-3 py-2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                 placeholder="(empty)"
               />
             </div>
@@ -170,7 +164,7 @@ export default function ConfigureServerPage() {
                     Number.isFinite(n) && n > 0 ? n : undefined,
                   );
                 }}
-                className="font-mono text-xs"
+                className="font-mono text-xs bg-background/80"
                 placeholder="10"
               />
             </div>
@@ -192,7 +186,7 @@ export default function ConfigureServerPage() {
                     Number.isFinite(n) && n > 0 ? n : undefined,
                   );
                 }}
-                className="font-mono text-xs"
+                className="font-mono text-xs bg-background/80"
                 placeholder="5"
               />
             </div>
@@ -215,7 +209,7 @@ export default function ConfigureServerPage() {
                       e.target.value,
                     )
                   }
-                  className="w-full font-mono text-xs min-h-[120px] rounded-md border border-input bg-transparent px-3 py-2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                  className="w-full font-mono text-xs min-h-[120px] rounded-md border border-input bg-background/80 px-3 py-2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                 />
               ) : (
                 <div className="text-xs text-muted-foreground italic">
@@ -242,7 +236,7 @@ export default function ConfigureServerPage() {
                       e.target.value,
                     )
                   }
-                  className="w-full font-mono text-xs min-h-[120px] rounded-md border border-input bg-transparent px-3 py-2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                  className="w-full font-mono text-xs min-h-[120px] rounded-md border border-input bg-background/80 px-3 py-2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                 />
               ) : (
                 <div className="text-xs text-muted-foreground italic">