claude-smart 0.2.49 → 0.2.50

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

@@ -2,8 +2,15 @@
 
 import { useEffect, useMemo, useState } from "react";
 import Link from "next/link";
-import { BookOpen, ChevronRight, Layers3 } from "lucide-react";
+import {
+  AlertTriangle,
+  BookOpen,
+  ChevronRight,
+  Layers3,
+} from "lucide-react";
 import { PageHeader } from "@/components/common/page-header";
+import { HostBadge } from "@/components/common/host-badge";
+import { LearningApplicationBadge } from "@/components/common/learning-application-badge";
 import { EmptyState } from "@/components/common/empty-state";
 import { DeleteAllButton } from "@/components/common/delete-all-button";
 import { PageTabs } from "@/components/common/page-tabs";
@@ -18,6 +25,7 @@ import {
 } from "@/components/ui/select";
 import { reflexio } from "@/lib/reflexio-client";
 import { formatRelative } from "@/lib/format";
+import { useRequestHostAttribution } from "@/lib/host-attribution";
 import { cn } from "@/lib/utils";
 import {
   agentPlaybookStatusLabel,
@@ -27,6 +35,7 @@ import {
 } from "@/lib/status";
 import type {
   AgentPlaybook,
+  Host,
   PlaybookApplicationStat,
   UserPlaybook,
 } from "@/lib/types";
@@ -58,24 +67,29 @@ const SHARED_STATUS_META: Record<
 interface SkillCard {
   kind: SkillKind;
   id: number;
-  agentVersion: string;
   createdAt: number;
   content: string;
   trigger: string | null;
   rationale: string | null;
   status: SkillStatus;
+  scopeId: string;
+  host: Host | null;
 }
 
-function projectSkill(p: UserPlaybook): SkillCard {
+function projectSkill(
+  p: UserPlaybook,
+  requestHosts?: ReadonlyMap<string, Host | null>,
+): SkillCard {
   return {
     kind: "project",
     id: p.user_playbook_id,
-    agentVersion: p.agent_version || "default",
     createdAt: p.created_at,
     content: p.content,
     trigger: p.trigger,
     rationale: p.rationale,
     status: statusLabel(p),
+    scopeId: p.user_id || "unknown",
+    host: requestHosts?.get(p.request_id) ?? null,
   };
 }
 
@@ -83,12 +97,13 @@ function sharedSkill(p: AgentPlaybook): SkillCard {
   return {
     kind: "shared",
     id: p.agent_playbook_id,
-    agentVersion: p.agent_version || "default",
     createdAt: p.created_at,
     content: p.content,
     trigger: p.trigger,
     rationale: p.rationale,
     status: agentPlaybookStatusLabel(p),
+    scopeId: p.agent_version || "default",
+    host: null,
   };
 }
 
@@ -106,10 +121,11 @@ export default function SkillsPage() {
   );
   const [error, setError] = useState<string | null>(null);
   const [activeKind, setActiveKind] = useState<SkillKind>("project");
-  const [agentVersion, setAgentVersion] = useState<string>("__all__");
+  const [scope, setScope] = useState<string>("__all__");
   const [statusFilter, setStatusFilter] = useState<string>("CURRENT");
   const [sortBy, setSortBy] = useState<SkillSort>("newest");
   const [search, setSearch] = useState("");
+  const attribution = useRequestHostAttribution();
 
   useEffect(() => {
     let cancelled = false;
@@ -158,24 +174,26 @@ export default function SkillsPage() {
 
   const activeSkills = useMemo(() => {
     return activeKind === "project"
-      ? (projectSkills ?? []).map(projectSkill)
+      ? (projectSkills ?? []).map((playbook) =>
+          projectSkill(playbook, attribution?.hosts),
+        )
       : (sharedSkills ?? []).map(sharedSkill);
-  }, [activeKind, projectSkills, sharedSkills]);
+  }, [activeKind, attribution, projectSkills, sharedSkills]);
 
-  const projects = useMemo(() => {
+  const scopes = useMemo(() => {
     const set = new Set<string>();
-    for (const p of activeSkills) set.add(p.agentVersion);
+    for (const p of activeSkills) set.add(p.scopeId);
     return Array.from(set).sort();
   }, [activeSkills]);
 
   const filtered = useMemo(() => {
     const matches = activeSkills.filter((p) => {
-      if (agentVersion !== "__all__" && p.agentVersion !== agentVersion)
+      if (scope !== "__all__" && p.scopeId !== scope)
         return false;
       if (statusFilter !== "__all__" && p.status !== statusFilter) return false;
       if (search) {
         const s = search.toLowerCase();
-        const hay = `${p.content} ${p.trigger ?? ""} ${p.rationale ?? ""}`.toLowerCase();
+        const hay = `${p.scopeId} ${p.content} ${p.trigger ?? ""} ${p.rationale ?? ""}`.toLowerCase();
         if (!hay.includes(s)) return false;
       }
       return true;
@@ -193,7 +211,7 @@ export default function SkillsPage() {
       }
       return b.createdAt - a.createdAt;
     });
-  }, [activeSkills, agentVersion, search, sortBy, statsByRule, statusFilter]);
+  }, [activeSkills, scope, search, sortBy, statsByRule, statusFilter]);
 
   const projectCount = projectSkills?.length ?? 0;
   const sharedCount = sharedSkills?.length ?? 0;
@@ -201,10 +219,12 @@ export default function SkillsPage() {
   const activeCount = activeKind === "project" ? projectCount : sharedCount;
   const loading = projectSkills === null || sharedSkills === null;
   const hasNoSharedSkills = activeKind === "shared" && sharedCount === 0;
+  const allScopesLabel =
+    activeKind === "project" ? "All user scopes" : "All agents";
 
   const switchKind = (kind: SkillKind) => {
     setActiveKind(kind);
-    setAgentVersion("__all__");
+    setScope("__all__");
     setStatusFilter(kind === "project" ? "CURRENT" : "__all__");
   };
 
@@ -216,15 +236,17 @@ export default function SkillsPage() {
         actions={
           <div className="flex max-w-full flex-wrap items-center justify-end gap-2">
             <Select
-              value={agentVersion}
-              onValueChange={(v) => setAgentVersion(v ?? "__all__")}
+              value={scope}
+              onValueChange={(v) => setScope(v ?? "__all__")}
             >
               <SelectTrigger size="sm" className="w-40 text-xs bg-background/80">
-                <SelectValue placeholder="Project" />
+                <SelectValue>
+                  {scope === "__all__" ? allScopesLabel : scope}
+                </SelectValue>
               </SelectTrigger>
               <SelectContent>
-                <SelectItem value="__all__">All projects</SelectItem>
-                {projects.map((p) => (
+                <SelectItem value="__all__">{allScopesLabel}</SelectItem>
+                {scopes.map((p) => (
                   <SelectItem key={p} value={p}>
                     {p}
                   </SelectItem>
@@ -337,6 +359,13 @@ export default function SkillsPage() {
             {error}. Is reflexio running on the configured backend URL?
           </div>
         )}
+        {activeKind === "project" && attribution?.unavailable && !error && (
+          <div className="mb-4 flex items-center gap-2 rounded-md border border-amber-500/30 bg-amber-500/10 px-3 py-2 text-sm text-amber-800 dark:text-amber-200">
+            <AlertTriangle className="h-4 w-4 shrink-0" />
+            Skill source details are temporarily unavailable. Skills remain
+            available.
+          </div>
+        )}
 
         {loading && !error ? (
           <div className="text-sm text-muted-foreground">Loading...</div>
@@ -366,17 +395,20 @@ export default function SkillsPage() {
                 >
                   <header className="mb-2 flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
                     <div className="flex min-w-0 flex-wrap items-center gap-2">
-                      <Badge
-                        variant="outline"
-                        className="h-5 max-w-56 truncate font-mono text-[10px]"
-                      >
-                        {p.agentVersion}
-                      </Badge>
+                      <LearningApplicationBadge stat={stat} />
                       <StatusBadge kind={p.kind} status={p.status} />
                       <Badge variant="secondary" className="h-5 text-[10px]">
                         {p.kind === "project" ? "project-specific" : "shared"}
                       </Badge>
-                      <ApplicationStatBadge stat={stat} />
+                      {p.kind === "shared" && (
+                        <Badge
+                          variant="outline"
+                          className="h-5 max-w-56 truncate font-mono text-[10px]"
+                          title="Shared-skill applicability scope; not the source host."
+                        >
+                          Agent scope: {p.scopeId}
+                        </Badge>
+                      )}
                     </div>
                     <div className="flex shrink-0 items-center gap-1.5 pt-0.5">
                       <span className="text-[11px] text-muted-foreground">
@@ -406,6 +438,13 @@ export default function SkillsPage() {
                       {p.rationale}
                     </p>
                   )}
+                  {p.kind === "project" &&
+                    attribution &&
+                    !attribution.unavailable && (
+                      <div className="mt-2">
+                        <HostBadge host={p.host} display="provenance" />
+                      </div>
+                    )}
                 </Link>
               );
             })}
@@ -416,30 +455,6 @@ export default function SkillsPage() {
   );
 }
 
-function ApplicationStatBadge({ stat }: { stat: PlaybookApplicationStat | undefined }) {
-  if (!stat || stat.applied_count === 0) {
-    return (
-      <Badge
-        variant="outline"
-        className="h-5 text-[10px] text-muted-foreground"
-        title="No citations recorded yet for this rule. It will count once an assistant reply cites it."
-      >
-        Never applied
-      </Badge>
-    );
-  }
-  const last = formatRelative(stat.last_applied_at);
-  return (
-    <Badge
-      variant="secondary"
-      className="h-5 text-[10px]"
-      title={`Last applied ${last}`}
-    >
-      Applied {stat.applied_count}×{stat.last_applied_at ? ` · ${last}` : ""}
-    </Badge>
-  );
-}
-
 function statusFilterLabel(kind: SkillKind, status: string): string {
   if (status === "__all__") return "All";
   if (kind === "shared") {

package/plugin/dashboard/app/skills/project/[id]/page.tsx

@@ -13,11 +13,11 @@ import {
   Check,
   BookMarked,
   Hash,
-  FolderGit2,
   Clock,
   FileText,
 } from "lucide-react";
 import { PageHeader } from "@/components/common/page-header";
+import { LearningHostProvenance } from "@/components/common/host-badge";
 import { EmptyState } from "@/components/common/empty-state";
 import { DeleteLearningDangerZone } from "@/components/common/delete-learning-danger-zone";
 import { Button } from "@/components/ui/button";
@@ -26,6 +26,7 @@ import { Badge } from "@/components/ui/badge";
 import { Separator } from "@/components/ui/separator";
 import { reflexio } from "@/lib/reflexio-client";
 import { formatTimestamp, truncateId } from "@/lib/format";
+import { useRequestHostAttribution } from "@/lib/host-attribution";
 import { cn } from "@/lib/utils";
 import { statusLabel } from "@/lib/status";
 import type { StatusLabel } from "@/lib/status";
@@ -66,6 +67,7 @@ export default function ProjectSkillDetailPage({
     trigger: "",
     rationale: "",
   });
+  const attribution = useRequestHostAttribution();
 
   useEffect(() => {
     let cancelled = false;
@@ -229,10 +231,6 @@ export default function ProjectSkillDetailPage({
 
             {playbook && (
               <div className="flex items-center gap-2 flex-wrap">
-                <Badge variant="outline" className="gap-1.5">
-                  <FolderGit2 className="h-3 w-3" />
-                  {playbook.agent_version || "default"}
-                </Badge>
                 <StatusBadge status={status!} />
                 {displayName(playbook.playbook_name) && (
                   <Badge variant="secondary" className="font-mono text-[10px]">
@@ -332,7 +330,7 @@ export default function ProjectSkillDetailPage({
                     value={formatTimestamp(playbook.created_at)}
                   />
                   <Meta
-                    label="Project"
+                    label="Agent version"
                     value={playbook.agent_version || "default"}
                     mono
                   />
@@ -350,8 +348,19 @@ export default function ProjectSkillDetailPage({
                       display={truncateId(playbook.request_id, 8, 4)}
                     />
                   )}
+                  {attribution && playbook.request_id && (
+                    <Meta
+                      label="Origin"
+                      value={
+                        <LearningHostProvenance
+                          attribution={attribution}
+                          requestId={playbook.request_id}
+                        />
+                      }
+                    />
+                  )}
                   {playbook.source && (
-                    <Meta label="Source" value={playbook.source} mono />
+                    <Meta label="Integration" value={playbook.source} mono />
                   )}
                 </dl>
               </div>
@@ -499,7 +508,7 @@ function Meta({
 }: {
   icon?: React.ComponentType<{ className?: string }>;
   label: string;
-  value: string;
+  value: React.ReactNode;
   mono?: boolean;
 }) {
   return (

package/plugin/dashboard/app/skills/shared/[id]/page.tsx

@@ -13,7 +13,6 @@ import {
   Check,
   BookMarked,
   Hash,
-  FolderGit2,
   Clock,
   FileText,
 } from "lucide-react";
@@ -298,10 +297,6 @@ export default function SharedSkillDetailPage({
 
             {playbook && (
               <div className="flex items-center gap-2 flex-wrap">
-                <Badge variant="outline" className="gap-1.5">
-                  <FolderGit2 className="h-3 w-3" />
-                  {playbook.agent_version || "default"}
-                </Badge>
                 {editing ? (
                   <ReviewStatusBadge
                     status={playbook.playbook_status}
@@ -472,7 +467,7 @@ export default function SharedSkillDetailPage({
                     value={formatTimestamp(playbook.created_at)}
                   />
                   <Meta
-                    label="Project"
+                    label="Agent version"
                     value={playbook.agent_version || "default"}
                     mono
                   />

package/plugin/dashboard/components/common/host-badge.tsx

@@ -0,0 +1,118 @@
+import { Terminal } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import type { RequestHostAttribution } from "@/lib/host-attribution";
+import { cn } from "@/lib/utils";
+import type { Host } from "@/lib/types";
+
+// Exact product colors from the current official app assets. Label colors meet
+// WCAG AA for the badge's small text: Claude 5.65:1, Codex 5.39:1, OpenCode 18.93:1.
+const HOST_META: Record<
+  Exclude<Host, "unknown">,
+  { label: string; badgeClass: string; dotClass: string }
+> = {
+  "claude-code": {
+    label: "Claude Code",
+    badgeClass: "border-[#D97757] bg-[#D97757] text-[#2A120B]",
+    dotClass: "bg-[#D97757]",
+  },
+  codex: {
+    label: "Codex",
+    badgeClass: "border-[#0169CC] bg-[#0169CC] text-white",
+    dotClass: "bg-[#0169CC]",
+  },
+  opencode: {
+    label: "OpenCode",
+    badgeClass:
+      "border-[#131010] bg-[#131010] text-white dark:border-white/30",
+    dotClass: "bg-[#131010] dark:bg-white",
+  },
+};
+
+export function HostBadge({
+  host,
+  display = "badge",
+  size = "md",
+  className,
+}: {
+  host: Host | null;
+  display?: "badge" | "provenance";
+  size?: "md" | "sm";
+  className?: string;
+}) {
+  const knownHost = host && host !== "unknown" ? host : null;
+  const meta = knownHost ? HOST_META[knownHost] : null;
+  const label = meta?.label ?? "unknown host";
+
+  if (display === "provenance") {
+    return (
+      <span
+        className={cn(
+          "inline-flex items-center gap-1 text-[11px] text-muted-foreground",
+          className,
+        )}
+        title={
+          knownHost
+            ? `This learning was generated from a ${label} session; it is not limited to that host.`
+            : "The session host for this learning's generation request was not recorded."
+        }
+      >
+        <span>Generated via</span>
+        <span
+          aria-hidden="true"
+          className={cn(
+            "h-1.5 w-1.5 shrink-0 rounded-full",
+            meta
+              ? meta.dotClass
+              : "border border-dashed border-muted-foreground/70",
+          )}
+        />
+        <span className="font-medium text-foreground/75">{label}</span>
+      </span>
+    );
+  }
+
+  const compact = size === "sm";
+  const sizeClass = compact ? "h-4 px-1.5 text-[10px]" : "h-5";
+  const badgeLabel = knownHost ? label : "Host unknown";
+  return (
+    <Badge
+      variant="outline"
+      className={cn(
+        "gap-1",
+        meta
+          ? meta.badgeClass
+          : "border-dashed text-muted-foreground",
+        sizeClass,
+        className,
+      )}
+      title={knownHost ? `Session host: ${label}` : "Session host was not recorded"}
+    >
+      <Terminal
+        className={cn(
+          knownHost ? "text-current" : "text-muted-foreground",
+          compact ? "h-2.5 w-2.5" : "h-3 w-3",
+        )}
+      />
+      {badgeLabel}
+    </Badge>
+  );
+}
+
+export function LearningHostProvenance({
+  attribution,
+  requestId,
+}: {
+  attribution: RequestHostAttribution;
+  requestId: string;
+}) {
+  if (attribution.unavailable) {
+    return <span className="text-muted-foreground">Unavailable</span>;
+  }
+
+  return (
+    <HostBadge
+      host={attribution.hosts.get(requestId) ?? null}
+      display="provenance"
+    />
+  );
+}

package/plugin/dashboard/components/common/learning-application-badge.tsx

@@ -0,0 +1,34 @@
+import { Sparkles } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { formatRelative } from "@/lib/format";
+import type { PlaybookApplicationStat } from "@/lib/types";
+
+export function LearningApplicationBadge({
+  stat,
+}: {
+  stat: PlaybookApplicationStat | undefined;
+}) {
+  if (!stat || stat.applied_count === 0) {
+    return (
+      <Badge
+        variant="outline"
+        className="h-5 text-[10px] text-muted-foreground"
+        title="No citations recorded yet for this learning. It will count once an assistant reply cites it."
+      >
+        Never applied
+      </Badge>
+    );
+  }
+
+  const last = formatRelative(stat.last_applied_at);
+  return (
+    <Badge
+      variant="outline"
+      className="h-5 gap-1 border-amber-500/45 bg-amber-500/10 text-[10px] text-amber-700 dark:text-amber-300"
+      title={`Last applied ${last}`}
+    >
+      <Sparkles className="h-2.5 w-2.5 text-amber-500" />
+      Applied {stat.applied_count}×{stat.last_applied_at ? ` · ${last}` : ""}
+    </Badge>
+  );
+}

package/plugin/dashboard/components/common/learnings-badge.tsx

@@ -28,7 +28,7 @@ export function LearningsBadge({
           isSmall ? "h-2.5 w-2.5" : "h-3 w-3",
         )}
       />
-      {count} learning applied
+      {count} learning{count === 1 ? "" : "s"} applied
     </Badge>
   );
 }

package/plugin/dashboard/components/common/page-header.tsx

@@ -7,7 +7,7 @@ export function PageHeader({
   className,
 }: {
   title: string;
-  description?: string;
+  description?: React.ReactNode;
   actions?: React.ReactNode;
   className?: string;
 }) {
@@ -21,9 +21,9 @@ export function PageHeader({
       <div className="min-w-[min(18rem,100%)] flex-1">
         <h1 className="text-2xl font-semibold">{title}</h1>
         {description && (
-          <p className="text-sm text-muted-foreground mt-1 max-w-3xl">
+          <div className="text-sm text-muted-foreground mt-1 max-w-3xl">
             {description}
-          </p>
+          </div>
         )}
       </div>
       {actions && (

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

@@ -27,6 +27,10 @@ const BOOL_KEYS = new Set([
   "CLAUDE_SMART_READ_ONLY",
 ]);
 
+function defaultReflexioUrl(): string {
+  return `http://localhost:${process.env.BACKEND_PORT || "8071"}/`;
+}
+
 function envPath(): string {
   return path.join(os.homedir(), ".reflexio", ".env");
 }
@@ -49,7 +53,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_URL: defaultReflexioUrl(),
     REFLEXIO_API_KEY: "",
     CLAUDE_SMART_USE_LOCAL_CLI: false,
     CLAUDE_SMART_USE_LOCAL_EMBEDDING: false,

package/plugin/dashboard/lib/host-attribution.ts

@@ -0,0 +1,62 @@
+import { useEffect, useState } from "react";
+import type { Host, SessionSummary } from "./types";
+
+export interface RequestHostAttribution {
+  hosts: ReadonlyMap<string, Host | null>;
+  unavailable: boolean;
+}
+
+function hostsByRequestId(
+  sessions: SessionSummary[],
+): Map<string, Host | null> {
+  const result = new Map<string, Host | null>();
+  for (const session of sessions) {
+    for (const requestId of session.request_ids) {
+      result.set(requestId, session.host);
+    }
+  }
+  return result;
+}
+
+export function useRequestHostAttribution(): RequestHostAttribution | null {
+  const [attribution, setAttribution] =
+    useState<RequestHostAttribution | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), 5_000);
+
+    fetch("/api/sessions", {
+      cache: "no-store",
+      signal: controller.signal,
+    })
+      .then(async (response) => {
+        if (!response.ok) throw new Error(`sessions ${response.status}`);
+        const data = await response.json();
+        return (data.sessions ?? []) as SessionSummary[];
+      })
+      .then((sessions) => {
+        if (!cancelled) {
+          setAttribution({
+            hosts: hostsByRequestId(sessions),
+            unavailable: false,
+          });
+        }
+      })
+      .catch(() => {
+        if (!cancelled) {
+          setAttribution({ hosts: new Map(), unavailable: true });
+        }
+      })
+      .finally(() => clearTimeout(timeout));
+
+    return () => {
+      cancelled = true;
+      controller.abort();
+      clearTimeout(timeout);
+    };
+  }, []);
+
+  return attribution;
+}