claude-smart 0.2.22 → 0.2.24

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

@@ -0,0 +1,318 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Save, CheckCircle2 } from "lucide-react";
+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 { Switch } from "@/components/ui/switch";
+import { Separator } from "@/components/ui/separator";
+import { useSettings } 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 [error, setError] = useState<string | null>(null);
+  const [saved, setSaved] = useState(false);
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    Promise.all([
+      fetch("/api/config", { cache: "no-store" }).then((r) => r.json()),
+      fetch("/api/claude-settings", { cache: "no-store" }).then((r) =>
+        r.json(),
+      ),
+    ])
+      .then(([envConfig, claudeConfig]) => {
+        setConfig(envConfig);
+        setHookConfig(claudeConfig);
+        setHookDirty(false);
+      })
+      .catch((e) => setError(e instanceof Error ? e.message : String(e)));
+  }, []);
+
+  const update = <K extends keyof ClaudeSmartConfig>(
+    key: K,
+    value: ClaudeSmartConfig[K],
+  ) => {
+    setConfig((prev) => (prev ? { ...prev, [key]: value } : prev));
+    setSaved(false);
+  };
+
+  const updateOptimizer = (enabled: boolean) => {
+    setHookConfig((prev) =>
+      prev
+        ? {
+            ...prev,
+            CLAUDE_SMART_ENABLE_OPTIMIZER: enabled,
+            effectiveValue: enabled,
+            localValue: enabled,
+          }
+        : prev,
+    );
+    setHookDirty(true);
+    setSaved(false);
+  };
+
+  const save = async () => {
+    if (!config || !hookConfig) return;
+    setSaving(true);
+    setError(null);
+    try {
+      const [envRes, hookRes] = await Promise.all([
+        fetch("/api/config", {
+          method: "PUT",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify(config),
+        }),
+        fetch("/api/claude-settings", {
+          method: "PUT",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify(
+            hookDirty
+              ? {
+                  CLAUDE_SMART_ENABLE_OPTIMIZER:
+                    hookConfig.CLAUDE_SMART_ENABLE_OPTIMIZER,
+                }
+              : {},
+          ),
+        }),
+      ]);
+      if (!envRes.ok) throw new Error(`environment save failed: ${envRes.status}`);
+      if (!hookRes.ok)
+        throw new Error(`Claude Code settings save failed: ${hookRes.status}`);
+      const updated: ClaudeSmartConfig = await envRes.json();
+      const updatedHook: ClaudeCodeHookConfig = await hookRes.json();
+      setConfig(updated);
+      setHookConfig(updatedHook);
+      setHookDirty(false);
+      setSaved(true);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <>
+      <PageHeader
+        title="Environment"
+        description="Dashboard settings, Reflexio backend environment, and Claude Code hook environment."
+        actions={
+          <Button onClick={save} disabled={!config || !hookConfig || saving} size="sm">
+            <Save className="h-3.5 w-3.5" />
+            {saving ? "Saving…" : "Save"}
+          </Button>
+        }
+      />
+
+      <div className="p-6 max-w-2xl mx-auto space-y-6">
+        {error && (
+          <div className="rounded-lg border border-destructive/30 bg-destructive/5 text-destructive px-4 py-3 text-sm">
+            {error}
+          </div>
+        )}
+        {saved && (
+          <div className="rounded-lg border border-border bg-accent/40 px-4 py-2.5 text-sm flex items-center gap-2">
+            <CheckCircle2 className="h-4 w-4 text-muted-foreground" />
+            Saved to ~/.reflexio/.env and Claude Code settings
+          </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">
+          <div>
+            <h2 className="text-sm font-semibold">claude-smart environment</h2>
+            <p className="text-xs text-muted-foreground">
+              Writes to <code className="font-mono">~/.reflexio/.env</code>. Unknown
+              keys are preserved. These values are read by the Reflexio backend.
+            </p>
+          </div>
+
+          {config === null && !error ? (
+            <div className="text-sm text-muted-foreground">Loading…</div>
+          ) : config ? (
+            <div className="space-y-5">
+              <div className="space-y-2">
+                <Label>REFLEXIO_URL</Label>
+                <Input
+                  value={config.REFLEXIO_URL}
+                  onChange={(e) => update("REFLEXIO_URL", e.target.value)}
+                  className="font-mono text-xs"
+                  placeholder="http://localhost:8071/"
+                />
+              </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>
+                  <p className="text-xs text-muted-foreground mt-0.5">
+                    Route generation through the local <code>claude</code> CLI.
+                  </p>
+                </div>
+                <Switch
+                  id="use-local-cli"
+                  checked={!!config.CLAUDE_SMART_USE_LOCAL_CLI}
+                  onCheckedChange={(v) =>
+                    update("CLAUDE_SMART_USE_LOCAL_CLI", v)
+                  }
+                />
+              </div>
+
+              <div className="flex items-start justify-between gap-4">
+                <div className="min-w-0">
+                  <Label htmlFor="use-local-embed">
+                    CLAUDE_SMART_USE_LOCAL_EMBEDDING
+                  </Label>
+                  <p className="text-xs text-muted-foreground mt-0.5">
+                    Use in-process ONNX embedder (offline-friendly).
+                  </p>
+                </div>
+                <Switch
+                  id="use-local-embed"
+                  checked={!!config.CLAUDE_SMART_USE_LOCAL_EMBEDDING}
+                  onCheckedChange={(v) =>
+                    update("CLAUDE_SMART_USE_LOCAL_EMBEDDING", v)
+                  }
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label>CLAUDE_SMART_CLI_PATH</Label>
+                <Input
+                  value={String(config.CLAUDE_SMART_CLI_PATH ?? "")}
+                  onChange={(e) => update("CLAUDE_SMART_CLI_PATH", e.target.value)}
+                  className="font-mono text-xs"
+                  placeholder="(empty — auto-detect via $PATH)"
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label>CLAUDE_SMART_CLI_TIMEOUT</Label>
+                <Input
+                  value={String(config.CLAUDE_SMART_CLI_TIMEOUT ?? "")}
+                  onChange={(e) =>
+                    update("CLAUDE_SMART_CLI_TIMEOUT", e.target.value)
+                  }
+                  className="font-mono text-xs"
+                  placeholder="120"
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label>CLAUDE_SMART_STATE_DIR</Label>
+                <Input
+                  value={String(config.CLAUDE_SMART_STATE_DIR ?? "")}
+                  onChange={(e) =>
+                    update("CLAUDE_SMART_STATE_DIR", e.target.value)
+                  }
+                  className="font-mono text-xs"
+                  placeholder="(empty — default ~/.claude-smart/sessions)"
+                />
+              </div>
+            </div>
+          ) : null}
+        </section>
+
+        <Separator />
+
+        <section className="space-y-4">
+          <div>
+            <h2 className="text-sm font-semibold">Claude Code hook environment</h2>
+            <p className="text-xs text-muted-foreground">
+              Writes to{" "}
+              <code className="font-mono">.claude/settings.local.json</code>.
+              Hook-side env changes apply to new Claude Code sessions.
+            </p>
+          </div>
+
+          {hookConfig === null && !error ? (
+            <div className="text-sm text-muted-foreground">Loading…</div>
+          ) : hookConfig ? (
+            <div className="space-y-5">
+              <div className="flex items-start justify-between gap-4">
+                <div className="min-w-0">
+                  <Label htmlFor="enable-optimizer">
+                    CLAUDE_SMART_ENABLE_OPTIMIZER
+                  </Label>
+                  <p className="text-xs text-muted-foreground mt-0.5">
+                    Enable shared skill optimization and rollups during
+                    SessionStart.
+                  </p>
+                </div>
+                <Switch
+                  id="enable-optimizer"
+                  checked={!!hookConfig.CLAUDE_SMART_ENABLE_OPTIMIZER}
+                  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="flex items-center justify-between gap-4">
+                  <span>Effective value</span>
+                  <span className="font-medium text-foreground">
+                    {formatSettingValue(hookConfig.effectiveValue)}
+                  </span>
+                </div>
+                <div className="flex items-center justify-between gap-4">
+                  <span>Project override</span>
+                  <span className="font-medium text-foreground">
+                    {formatSettingValue(hookConfig.localValue)}
+                  </span>
+                </div>
+                <div className="flex items-center justify-between gap-4">
+                  <span>User setting</span>
+                  <span className="font-medium text-foreground">
+                    {formatSettingValue(hookConfig.userValue)}
+                  </span>
+                </div>
+                <div className="pt-1 space-y-1">
+                  <p>
+                    Project file:{" "}
+                    <code className="font-mono break-all">
+                      {hookConfig.settingsPath}
+                    </code>
+                  </p>
+                  <p>
+                    User file:{" "}
+                    <code className="font-mono break-all">
+                      {hookConfig.userSettingsPath}
+                    </code>
+                  </p>
+                </div>
+              </div>
+            </div>
+          ) : null}
+        </section>
+      </div>
+    </>
+  );
+}
+
+function formatSettingValue(value: boolean | null): string {
+  if (value === null) return "Not set";
+  return value ? "Enabled" : "Disabled";
+}

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

@@ -0,0 +1,47 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import { Server, SlidersHorizontal } from "lucide-react";
+import { PageTabs } from "@/components/common/page-tabs";
+
+const tabs = [
+  {
+    id: "env",
+    href: "/configure/env",
+    label: "Environment",
+    description: "Local plugin paths and runtime flags",
+    icon: SlidersHorizontal,
+  },
+  {
+    id: "server",
+    href: "/configure/server",
+    label: "Reflexio server",
+    description: "Extraction settings from the backend",
+    icon: Server,
+  },
+];
+
+export default function ConfigureLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const pathname = usePathname();
+
+  return (
+    <div className="flex-1 flex flex-col overflow-hidden">
+      <div className="border-b border-border bg-muted/20 px-6 py-4">
+        <PageTabs
+          items={tabs}
+          activeId={
+            tabs.find(
+              (tab) =>
+                pathname === tab.href || pathname.startsWith(`${tab.href}/`),
+            )?.id ?? "env"
+          }
+        />
+      </div>
+      <div className="flex-1 overflow-auto">{children}</div>
+    </div>
+  );
+}

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

@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation";
+
+export default function ConfigurePage() {
+  redirect("/configure/env");
+}

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

@@ -0,0 +1,258 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { Save, CheckCircle2 } from "lucide-react";
+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 =
+  | "profile_extractor_configs"
+  | "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);
+  const [srvSaving, setSrvSaving] = useState(false);
+  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);
+      const detail = body?.error
+        ? `${body.error}${body.detail ? `: ${body.detail}` : ""}`
+        : `HTTP ${res.status}`;
+      throw new Error(detail);
+    }
+    return (await res.json()) as ReflexioConfig;
+  }, [reflexioUrl]);
+
+  useEffect(() => {
+    let alive = true;
+    async function load() {
+      setSrvLoading(true);
+      setSrvError(null);
+      try {
+        const data = await fetchSrvConfig();
+        if (alive) setSrvConfig(data);
+      } catch (e) {
+        if (alive) setSrvError(e instanceof Error ? e.message : String(e));
+      } finally {
+        if (alive) setSrvLoading(false);
+      }
+    }
+    void load();
+    return () => {
+      alive = false;
+    };
+  }, [fetchSrvConfig]);
+
+  const updateSrv = <K extends keyof ReflexioConfig>(
+    key: K,
+    value: ReflexioConfig[K],
+  ) => {
+    setSrvConfig((prev) => (prev ? { ...prev, [key]: value } : prev));
+    setSrvSaved(false);
+  };
+
+  const updateExtractorPrompt = (field: ExtractorField, v: string) => {
+    setSrvConfig((prev) => {
+      if (!prev) return prev;
+      const list = prev[field];
+      if (!list || list.length === 0) return prev;
+      const next = [...list];
+      next[0] = { ...next[0], extraction_definition_prompt: v };
+      return { ...prev, [field]: next };
+    });
+    setSrvSaved(false);
+  };
+
+  const saveSrv = async () => {
+    if (!srvConfig) return;
+    setSrvSaving(true);
+    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,
+        body: JSON.stringify(srvConfig),
+      });
+      if (!res.ok) {
+        const body = await res.json().catch(() => null);
+        const detail = body?.error
+          ? `${body.error}${body.detail ? `: ${body.detail}` : ""}`
+          : `HTTP ${res.status}`;
+        throw new Error(detail);
+      }
+      const fresh = await fetchSrvConfig();
+      setSrvConfig(fresh);
+      setSrvSaved(true);
+    } catch (e) {
+      setSrvError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setSrvSaving(false);
+    }
+  };
+
+  return (
+    <>
+      <PageHeader
+        title="Reflexio server"
+        description="Fetched live from the reflexio backend via /api/get_config. Requires reflexio to be running."
+        actions={
+          <Button onClick={saveSrv} disabled={!srvConfig || srvSaving} size="sm">
+            <Save className="h-3.5 w-3.5" />
+            {srvSaving ? "Saving…" : "Save"}
+          </Button>
+        }
+      />
+
+      <div className="p-6 max-w-2xl mx-auto space-y-6">
+        {srvError && (
+          <div className="rounded-lg border border-destructive/30 bg-destructive/5 text-destructive px-4 py-3 text-sm">
+            {srvError}
+          </div>
+        )}
+        {srvSaved && (
+          <div className="rounded-lg border border-border bg-accent/40 px-4 py-2.5 text-sm flex items-center gap-2">
+            <CheckCircle2 className="h-4 w-4 text-muted-foreground" />
+            Saved to reflexio
+          </div>
+        )}
+
+        {srvLoading ? (
+          <div className="text-sm text-muted-foreground">Loading…</div>
+        ) : srvConfig ? (
+          <section className="space-y-5">
+            <div className="space-y-2">
+              <Label>Additional agent description</Label>
+              <p className="text-xs text-muted-foreground">
+                Free-form context about the agent&apos;s working environment.
+                Prepended to extractor prompts.
+              </p>
+              <textarea
+                value={srvConfig.agent_context_prompt ?? ""}
+                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"
+                placeholder="(empty)"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label>Extraction window size</Label>
+              <p className="text-xs text-muted-foreground">
+                How many recent interactions are fed into each extraction run
+                (past K interactions).
+              </p>
+              <Input
+                type="number"
+                min={1}
+                value={srvConfig.window_size ?? ""}
+                onChange={(e) => {
+                  const n = Number(e.target.value);
+                  updateSrv(
+                    "window_size",
+                    Number.isFinite(n) && n > 0 ? n : undefined,
+                  );
+                }}
+                className="font-mono text-xs"
+                placeholder="10"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label>Extraction stride</Label>
+              <p className="text-xs text-muted-foreground">
+                How many new interactions must accumulate before the next
+                extraction run.
+              </p>
+              <Input
+                type="number"
+                min={1}
+                value={srvConfig.stride_size ?? ""}
+                onChange={(e) => {
+                  const n = Number(e.target.value);
+                  updateSrv(
+                    "stride_size",
+                    Number.isFinite(n) && n > 0 ? n : undefined,
+                  );
+                }}
+                className="font-mono text-xs"
+                placeholder="5"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label>Preference focus area</Label>
+              <p className="text-xs text-muted-foreground">
+                What the preference extractor should focus on.
+              </p>
+              {srvConfig.profile_extractor_configs &&
+              srvConfig.profile_extractor_configs.length > 0 ? (
+                <textarea
+                  value={
+                    srvConfig.profile_extractor_configs[0]
+                      .extraction_definition_prompt ?? ""
+                  }
+                  onChange={(e) =>
+                    updateExtractorPrompt(
+                      "profile_extractor_configs",
+                      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"
+                />
+              ) : (
+                <div className="text-xs text-muted-foreground italic">
+                  No preference extractor configured on the server.
+                </div>
+              )}
+            </div>
+
+            <div className="space-y-2">
+              <Label>Project-specific skill focus area</Label>
+              <p className="text-xs text-muted-foreground">
+                What the project-specific skill extractor should focus on.
+              </p>
+              {srvConfig.user_playbook_extractor_configs &&
+              srvConfig.user_playbook_extractor_configs.length > 0 ? (
+                <textarea
+                  value={
+                    srvConfig.user_playbook_extractor_configs[0]
+                      .extraction_definition_prompt ?? ""
+                  }
+                  onChange={(e) =>
+                    updateExtractorPrompt(
+                      "user_playbook_extractor_configs",
+                      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"
+                />
+              ) : (
+                <div className="text-xs text-muted-foreground italic">
+                  No project-specific skill extractor configured on the server.
+                </div>
+              )}
+            </div>
+          </section>
+        ) : null}
+      </div>
+    </>
+  );
+}