claude-smart 0.2.30 → 0.2.32

package/plugin/dashboard/components/layout/top-bar.tsx

@@ -2,19 +2,18 @@
 
 import { useTheme } from "next-themes";
 import Image from "next/image";
-import { Moon, Sun, Menu } from "lucide-react";
-import { Input } from "@/components/ui/input";
+import { Link2, Menu, Moon, Sun } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { useSettings } from "@/hooks/use-settings";
 import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
 import { Sidebar } from "./sidebar";
 
 export function TopBar() {
-  const { reflexioUrl, setReflexioUrl } = useSettings();
+  const { reflexioUrl } = useSettings();
   const { theme, setTheme } = useTheme();
 
   return (
-    <header className="h-14 border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 flex items-center px-4 gap-3 shrink-0">
+    <header className="h-16 border-b border-border bg-card/92 backdrop-blur supports-[backdrop-filter]:bg-card/78 flex items-center px-4 gap-3 shrink-0 shadow-[0_1px_0_oklch(1_0_0/0.42)_inset] dark:shadow-none">
       <Sheet>
         <SheetTrigger
           render={<Button variant="ghost" size="icon" className="lg:hidden" />}
@@ -27,34 +26,47 @@ export function TopBar() {
       </Sheet>
 
       <div className="flex items-center gap-2 flex-1 min-w-0">
-        <Image
-          src="/claude-smart-icon.png"
-          alt="claude-smart"
-          width={24}
-          height={24}
-          className="h-6 w-6 shrink-0"
-          priority
-        />
-        <span className="text-sm font-semibold whitespace-nowrap hidden sm:block">
-          Claude-Smart
-        </span>
-        <div className="mx-2 h-5 w-px bg-border hidden sm:block" />
-        <label className="text-xs text-muted-foreground whitespace-nowrap hidden sm:block">
+        <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-primary/20 bg-primary/10">
+          <Image
+            src="/claude-smart-icon.png"
+            alt="claude-smart"
+            width={24}
+            height={24}
+            className="h-6 w-6"
+            priority
+          />
+        </div>
+        <div className="hidden min-w-0 sm:block">
+          <div className="text-sm font-semibold leading-5">Claude-Smart</div>
+        </div>
+        <div className="mx-2 h-8 w-px bg-border hidden md:block" />
+        <div className="hidden items-center gap-1.5 rounded-md border border-border bg-background/70 px-2 py-1 text-xs text-muted-foreground md:flex">
+          <span className="h-1.5 w-1.5 rounded-full bg-emerald-500 shadow-[0_0_0_3px_oklch(0.72_0.14_148/0.16)]" />
           Reflexio
-        </label>
-        <Input
-          value={reflexioUrl}
-          onChange={(e) => setReflexioUrl(e.target.value)}
-          placeholder="http://localhost:8071"
-          className="h-8 text-xs max-w-xs font-mono"
-        />
+        </div>
+        <div
+          className="relative max-w-md flex-1 sm:flex-none sm:w-[22rem]"
+          suppressHydrationWarning
+        >
+          <Link2 className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
+          <div
+            id="reflexio-url"
+            className="flex h-9 items-center rounded-md border border-input bg-background/80 pl-8 pr-3 text-xs font-mono text-muted-foreground"
+            aria-label="Reflexio endpoint URL"
+            title={reflexioUrl}
+          >
+            <span className="truncate">{reflexioUrl}</span>
+          </div>
+        </div>
       </div>
 
       <Button
         variant="ghost"
         size="icon"
-        className="h-8 w-8"
+        className="h-9 w-9"
         onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+        title="Toggle theme"
+        aria-label="Toggle theme"
       >
         <Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
         <Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />

package/plugin/dashboard/components/ui/input.tsx

@@ -8,6 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
     <InputPrimitive
       type={type}
       data-slot="input"
+      suppressHydrationWarning
       className={cn(
         "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
         className

package/plugin/dashboard/hooks/use-settings.tsx

@@ -2,10 +2,9 @@
 
 import {
   createContext,
-  useCallback,
   useContext,
-  useMemo,
-  useSyncExternalStore,
+  useEffect,
+  useState,
   ReactNode,
 } from "react";
 
@@ -13,72 +12,42 @@ interface Settings {
   reflexioUrl: string;
 }
 
-interface SettingsContextValue extends Settings {
-  setReflexioUrl: (url: string) => void;
-}
+type SettingsContextValue = Settings;
 
 const SettingsContext = createContext<SettingsContextValue | null>(null);
 
-const STORAGE_KEY = "claude-smart-dashboard-settings";
 const DEFAULT_URL = "http://localhost:8071";
-const DEFAULTS: Settings = { reflexioUrl: DEFAULT_URL };
-const DEFAULT_JSON = JSON.stringify(DEFAULTS);
-
-type Listener = () => void;
-const listeners = new Set<Listener>();
-
-function readStorage(): string {
-  if (typeof window === "undefined") return DEFAULT_JSON;
-  try {
-    return localStorage.getItem(STORAGE_KEY) ?? DEFAULT_JSON;
-  } catch {
-    return DEFAULT_JSON;
-  }
-}
-
-function subscribe(listener: Listener): () => void {
-  listeners.add(listener);
-  const onStorage = (ev: StorageEvent) => {
-    if (ev.key === STORAGE_KEY) listener();
-  };
-  window.addEventListener("storage", onStorage);
-  return () => {
-    listeners.delete(listener);
-    window.removeEventListener("storage", onStorage);
-  };
-}
-
-function writeStorage(settings: Settings): void {
-  try {
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));
-  } catch {
-    // ignore
-  }
-  for (const l of listeners) l();
-}
-
-function parse(json: string): Settings {
-  try {
-    const parsed = JSON.parse(json);
-    return { ...DEFAULTS, ...parsed };
-  } catch {
-    return DEFAULTS;
-  }
-}
+export const SETTINGS_CHANGED_EVENT = "claude-smart-settings-changed";
 
 export function SettingsProvider({ children }: { children: ReactNode }) {
-  const raw = useSyncExternalStore(subscribe, readStorage, () => DEFAULT_JSON);
-  const settings = useMemo(() => parse(raw), [raw]);
-
-  const setReflexioUrl = useCallback((url: string) => {
-    writeStorage({ reflexioUrl: url });
+  const [settings, setSettings] = useState<Settings>({ reflexioUrl: DEFAULT_URL });
+
+  useEffect(() => {
+    let cancelled = false;
+    async function loadSettings() {
+      try {
+        const res = await fetch("/api/config", { cache: "no-store" });
+        if (!res.ok) return;
+        const config = (await res.json()) as { REFLEXIO_URL?: string };
+        if (!cancelled) {
+          setSettings({ reflexioUrl: config.REFLEXIO_URL || DEFAULT_URL });
+        }
+      } catch {
+        // Keep the dashboard on its local default when config cannot be read.
+      }
+    }
+    void loadSettings();
+    const onSettingsChanged = () => {
+      void loadSettings();
+    };
+    window.addEventListener(SETTINGS_CHANGED_EVENT, onSettingsChanged);
+    return () => {
+      cancelled = true;
+      window.removeEventListener(SETTINGS_CHANGED_EVENT, onSettingsChanged);
+    };
   }, []);
 
-  return (
-    <SettingsContext.Provider value={{ ...settings, setReflexioUrl }}>
-      {children}
-    </SettingsContext.Provider>
-  );
+  return <SettingsContext.Provider value={settings}>{children}</SettingsContext.Provider>;
 }
 
 export function useSettings(): SettingsContextValue {

package/plugin/dashboard/hooks/use-stall-state.ts

@@ -1,7 +1,6 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { useSettings } from "@/hooks/use-settings";
 
 const POLL_INTERVAL_MS = 60_000;
 
@@ -19,24 +18,21 @@ export interface StallState {
 /**
  * Polls reflexio's GET /stall_state every minute. Returns the latest
  * snapshot or `null` while still loading / when the server is unreachable.
- *
- * Reads the reflexio URL from the dashboard's settings context (the same
- * URL the user can override in the top bar) so the banner follows whatever
- * reflexio backend the rest of the dashboard is pointed at.
  */
 export function useStallState(): StallState | null {
-  const { reflexioUrl } = useSettings();
   const [state, setState] = useState<StallState | null>(null);
 
   useEffect(() => {
     let cancelled = false;
-    const base = reflexioUrl.replace(/\/$/, "");
 
     const tick = async () => {
       const controller = new AbortController();
       const timer = setTimeout(() => controller.abort(), 10_000);
       try {
-        const resp = await fetch(`${base}/stall_state`, { signal: controller.signal });
+        const resp = await fetch("/api/reflexio/stall_state", {
+          cache: "no-store",
+          signal: controller.signal,
+        });
         if (!resp.ok) return;
         const body: StallState = await resp.json();
         if (!cancelled) setState(body);
@@ -53,7 +49,7 @@ export function useStallState(): StallState | null {
       cancelled = true;
       clearInterval(id);
     };
-  }, [reflexioUrl]);
+  }, []);
 
   return state;
 }

package/plugin/dashboard/lib/config-file.ts

@@ -10,6 +10,7 @@ import type { ClaudeSmartConfig } from "./types";
 
 const KNOWN_KEYS = [
   "REFLEXIO_URL",
+  "REFLEXIO_API_KEY",
   "CLAUDE_SMART_USE_LOCAL_CLI",
   "CLAUDE_SMART_USE_LOCAL_EMBEDDING",
   "CLAUDE_SMART_CLI_PATH",
@@ -47,6 +48,7 @@ function parseLine(line: string): { key: string; value: string } | null {
 export async function readConfig(): Promise<ClaudeSmartConfig> {
   const defaults: ClaudeSmartConfig = {
     REFLEXIO_URL: "http://localhost:8071/",
+    REFLEXIO_API_KEY: "",
     CLAUDE_SMART_USE_LOCAL_CLI: false,
     CLAUDE_SMART_USE_LOCAL_EMBEDDING: false,
     CLAUDE_SMART_CLI_PATH: "",

package/plugin/dashboard/lib/reflexio-client.ts

@@ -1,9 +1,8 @@
 /**
  * Client-side wrapper for talking to reflexio through the Next.js proxy at
- * /api/reflexio/*. The proxy forwards to the reflexio URL the user picked in
- * Settings (see hooks/use-settings.tsx). Endpoint paths and request bodies
- * mirror reflexio/reflexio/server/api.py — every call below corresponds to a
- * FastAPI route mounted under the /api prefix.
+ * /api/reflexio/*. The proxy forwards to the configured reflexio backend URL.
+ * Endpoint paths and request bodies mirror reflexio/reflexio/server/api.py —
+ * every call below corresponds to a FastAPI route mounted under the /api prefix.
  */
 
 import type {
@@ -16,18 +15,12 @@ import type {
 
 type Json = Record<string, unknown>;
 
-interface Opts {
-  reflexioUrl?: string;
-}
-
 async function request<T>(
   path: string,
   init: RequestInit,
-  reflexioUrl: string | undefined,
 ): Promise<T> {
   const headers = new Headers(init.headers);
   headers.set("content-type", "application/json");
-  if (reflexioUrl) headers.set("x-reflexio-url", reflexioUrl);
 
   const res = await fetch(`/api/reflexio/api/${path.replace(/^\/+/, "")}`, {
     ...init,
@@ -41,18 +34,18 @@ async function request<T>(
   return res.json() as Promise<T>;
 }
 
-function post<T>(path: string, body: Json, reflexioUrl?: string): Promise<T> {
-  return request<T>(path, { method: "POST", body: JSON.stringify(body) }, reflexioUrl);
+function post<T>(path: string, body: Json): Promise<T> {
+  return request<T>(path, { method: "POST", body: JSON.stringify(body) });
 }
 
-function get<T>(path: string, reflexioUrl?: string): Promise<T> {
-  return request<T>(path, { method: "GET" }, reflexioUrl);
+function get<T>(path: string): Promise<T> {
+  return request<T>(path, { method: "GET" });
 }
 
 export const reflexio = {
   /** POST /api/get_user_playbooks — all filters are optional. */
   async getUserPlaybooks(
-    opts: Opts & {
+    opts: {
       userId?: string;
       agentVersion?: string;
       playbookName?: string;
@@ -65,12 +58,12 @@ export const reflexio = {
     if (opts.agentVersion) body.agent_version = opts.agentVersion;
     if (opts.playbookName) body.playbook_name = opts.playbookName;
     if (opts.statusFilter) body.status_filter = opts.statusFilter;
-    return post("get_user_playbooks", body, opts.reflexioUrl);
+    return post("get_user_playbooks", body);
   },
 
   /** POST /api/get_agent_playbooks — all filters are optional. */
   async getAgentPlaybooks(
-    opts: Opts & {
+    opts: {
       agentVersion?: string;
       playbookName?: string;
       statusFilter?: (string | null)[];
@@ -84,7 +77,7 @@ export const reflexio = {
     if (opts.statusFilter) body.status_filter = opts.statusFilter;
     if (opts.playbookStatusFilter)
       body.playbook_status_filter = opts.playbookStatusFilter;
-    return post("get_agent_playbooks", body, opts.reflexioUrl);
+    return post("get_agent_playbooks", body);
   },
 
   /**
@@ -92,21 +85,21 @@ export const reflexio = {
    * preferences across sessions, which is what the dashboard wants.
    */
   async getAllProfiles(
-    opts: Opts & { limit?: number; statusFilter?: string } = {},
+    opts: { limit?: number; statusFilter?: string } = {},
   ): Promise<{ user_profiles: UserProfile[] }> {
     const qs = new URLSearchParams();
     qs.set("limit", String(opts.limit ?? 200));
     if (opts.statusFilter) qs.set("status_filter", opts.statusFilter);
-    return get(`get_all_profiles?${qs.toString()}`, opts.reflexioUrl);
+    return get(`get_all_profiles?${qs.toString()}`);
   },
 
   /** GET /api/get_all_interactions — global, unfiltered. */
   async getAllInteractions(
-    opts: Opts & { limit?: number } = {},
+    opts: { limit?: number } = {},
   ): Promise<{ interactions: Interaction[] }> {
     const qs = new URLSearchParams();
     qs.set("limit", String(opts.limit ?? 100));
-    return get(`get_all_interactions?${qs.toString()}`, opts.reflexioUrl);
+    return get(`get_all_interactions?${qs.toString()}`);
   },
 
   /** PUT /api/update_user_playbook — partial update of one project-specific skill. */
@@ -118,12 +111,10 @@ export const reflexio = {
       trigger?: string | null;
       rationale?: string | null;
     },
-    reflexioUrl?: string,
   ): Promise<Json> {
     return request(
       "update_user_playbook",
       { method: "PUT", body: JSON.stringify(update) },
-      reflexioUrl,
     );
   },
 
@@ -137,42 +128,32 @@ export const reflexio = {
       rationale?: string | null;
       playbook_status?: AgentPlaybookStatus | null;
     },
-    reflexioUrl?: string,
   ): Promise<Json> {
     return request(
       "update_agent_playbook",
       { method: "PUT", body: JSON.stringify(update) },
-      reflexioUrl,
     );
   },
 
   /** DELETE /api/delete_user_playbook — body carries the id. */
-  async deleteUserPlaybook(
-    userPlaybookId: number,
-    reflexioUrl?: string,
-  ): Promise<Json> {
+  async deleteUserPlaybook(userPlaybookId: number): Promise<Json> {
     return request(
       "delete_user_playbook",
       {
         method: "DELETE",
         body: JSON.stringify({ user_playbook_id: userPlaybookId }),
       },
-      reflexioUrl,
     );
   },
 
   /** DELETE /api/delete_agent_playbook — body carries the id. */
-  async deleteAgentPlaybook(
-    agentPlaybookId: number,
-    reflexioUrl?: string,
-  ): Promise<Json> {
+  async deleteAgentPlaybook(agentPlaybookId: number): Promise<Json> {
     return request(
       "delete_agent_playbook",
       {
         method: "DELETE",
         body: JSON.stringify({ agent_playbook_id: agentPlaybookId }),
       },
-      reflexioUrl,
     );
   },
 
@@ -183,56 +164,50 @@ export const reflexio = {
       profile_id: string;
       content?: string | null;
     },
-    reflexioUrl?: string,
   ): Promise<Json> {
     return request(
       "update_user_profile",
       { method: "PUT", body: JSON.stringify(update) },
-      reflexioUrl,
     );
   },
 
   /** DELETE /api/delete_profile — needs both user_id and profile_id. */
   async deleteUserProfile(
     params: { user_id: string; profile_id: string },
-    reflexioUrl?: string,
   ): Promise<Json> {
     return request(
       "delete_profile",
       { method: "DELETE", body: JSON.stringify(params) },
-      reflexioUrl,
     );
   },
 
   /** DELETE /api/delete_all_interactions — org-wide purge. */
-  async deleteAllInteractions(reflexioUrl?: string): Promise<Json> {
+  async deleteAllInteractions(): Promise<Json> {
     return request(
       "delete_all_interactions",
       { method: "DELETE" },
-      reflexioUrl,
     );
   },
 
   /** DELETE /api/delete_all_profiles — org-wide purge. */
-  async deleteAllProfiles(reflexioUrl?: string): Promise<Json> {
-    return request("delete_all_profiles", { method: "DELETE" }, reflexioUrl);
+  async deleteAllProfiles(): Promise<Json> {
+    return request("delete_all_profiles", { method: "DELETE" });
   },
 
   /** DELETE /api/delete_all_user_playbooks — org-wide purge. */
-  async deleteAllUserPlaybooks(reflexioUrl?: string): Promise<Json> {
+  async deleteAllUserPlaybooks(): Promise<Json> {
     return request(
       "delete_all_user_playbooks",
       { method: "DELETE" },
-      reflexioUrl,
     );
   },
 
   /** DELETE /api/delete_all_agent_playbooks — org-wide shared skill purge. */
-  async deleteAllAgentPlaybooks(reflexioUrl?: string): Promise<Json> {
+  async deleteAllAgentPlaybooks(): Promise<Json> {
     return request(
       "delete_all_agent_playbooks",
       { method: "DELETE" },
-      reflexioUrl,
     );
   },
+
 };