@saadnvd1/agent-os 0.3.756 → 0.3.758

package/components/Chat/ComposerMenu.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useRef, type ReactNode } from "react";
+import { Fragment, useEffect, useRef, type ReactNode } from "react";
 import { RefreshCw } from "lucide-react";
 import { cn } from "@/lib/utils";
 
@@ -10,6 +10,25 @@ export interface MenuOption {
   icon?: ReactNode;
   hint?: string;
   description?: string;
+  // A section heading shown above this option when it starts a new section.
+  group?: string;
+  // A small label on the row (where a command comes from).
+  badge?: string;
+}
+
+// The part of `text` that matches what was typed, picked out.
+function Marked({ text, query }: { text: string; query?: string }) {
+  const at = query ? text.toLowerCase().indexOf(query) : -1;
+  if (at < 0 || !query) return <>{text}</>;
+  return (
+    <>
+      {text.slice(0, at)}
+      <mark className="text-primary bg-transparent font-semibold">
+        {text.slice(at, at + query.length)}
+      </mark>
+      {text.slice(at + query.length)}
+    </>
+  );
 }
 
 // The menu above the composer: "/" commands and skills, "@" files and
@@ -22,6 +41,7 @@ export function ComposerMenu({
   onPick,
   onHover,
   refresh,
+  highlight,
 }: {
   label: string;
   empty: string;
@@ -31,6 +51,7 @@ export function ComposerMenu({
   onHover: (index: number) => void;
   // Reloads the list (a skill added since it was read).
   refresh?: { onClick: () => void; busy: boolean };
+  highlight?: string;
 }) {
   const listRef = useRef<HTMLDivElement>(null);
 
@@ -69,40 +90,59 @@ export function ComposerMenu({
         <p className="text-muted-foreground px-2.5 py-2 text-sm">{empty}</p>
       ) : (
         options.map((o, i) => (
-          <button
-            key={o.key}
-            type="button"
-            role="option"
-            aria-selected={i === active}
-            data-index={i}
-            onMouseEnter={() => onHover(i)}
-            // Keep focus in the textarea so the keyboard stays up on phones.
-            onMouseDown={(e) => e.preventDefault()}
-            onClick={() => onPick(i)}
-            className={cn(
-              "flex min-h-11 w-full flex-col items-start justify-center rounded-lg px-2.5 py-1.5 text-left md:min-h-9",
-              i === active
-                ? "bg-foreground/[0.07]"
-                : "hover:bg-foreground/[0.04]"
+          <Fragment key={o.key}>
+            {o.group && o.group !== options[i - 1]?.group && (
+              <div className="text-muted-foreground px-2.5 pt-2 pb-0.5 text-[11px] tracking-wide uppercase">
+                {o.group}
+              </div>
             )}
-          >
-            <span className="flex w-full min-w-0 items-center gap-2">
-              {o.icon}
-              <span className="max-w-[75%] shrink-0 truncate font-mono text-sm">
-                {o.label}
+            <button
+              type="button"
+              role="option"
+              aria-selected={i === active}
+              data-index={i}
+              onMouseEnter={() => onHover(i)}
+              // Keep focus in the textarea so the keyboard stays up on phones.
+              onMouseDown={(e) => e.preventDefault()}
+              onClick={() => onPick(i)}
+              className={cn(
+                "flex min-h-11 w-full flex-col items-start justify-center rounded-lg px-2.5 py-1.5 text-left md:min-h-9",
+                i === active
+                  ? "bg-foreground/[0.07]"
+                  : "hover:bg-foreground/[0.04]"
+              )}
+            >
+              <span className="flex w-full min-w-0 items-center gap-2">
+                {o.icon}
+                <span className="max-w-[65%] shrink-0 truncate font-mono text-sm">
+                  {o.icon ? (
+                    o.label
+                  ) : (
+                    <Marked text={o.label} query={highlight} />
+                  )}
+                </span>
+                {o.hint && (
+                  <span className="text-muted-foreground/70 min-w-0 truncate font-mono text-xs">
+                    {o.hint}
+                  </span>
+                )}
+                {o.badge && (
+                  <span className="text-muted-foreground border-border ml-auto shrink-0 rounded-full border px-2 text-[10px]">
+                    {o.badge}
+                  </span>
+                )}
               </span>
-              {o.hint && (
-                <span className="text-muted-foreground/70 min-w-0 truncate font-mono text-xs">
-                  {o.hint}
+              {o.description && (
+                <span className="text-muted-foreground line-clamp-2 w-full text-xs">
+                  {o.icon ? (
+                    o.description
+                  ) : (
+                    <Marked text={o.description} query={highlight} />
+                  )}
                 </span>
               )}
-            </span>
-            {o.description && (
-              <span className="text-muted-foreground w-full truncate text-xs">
-                {o.description}
-              </span>
-            )}
-          </button>
+            </button>
+          </Fragment>
         ))
       )}
     </div>

package/components/Chat/composer/ComposerBody.tsx

@@ -16,7 +16,14 @@ import {
   composeMessage,
   type TextAttachment,
 } from "@/lib/chat/paste";
-import { insertCommand, rankCommands, slashQuery } from "@/lib/chat/commands";
+import {
+  groupCommands,
+  insertCommand,
+  leadingCommand,
+  slashQuery,
+  sourceLabel,
+} from "@/lib/chat/commands";
+import { loadRecent, saveRecent } from "@/lib/chat/recent-commands";
 import { mentionOption } from "@/lib/chat/mentions";
 import { cn } from "@/lib/utils";
 import { loadDraft, useSaveDraft } from "../useDraft";
@@ -184,25 +191,38 @@ export function ComposerBody({
   const slash = slashQuery(caret.before);
   const query = slash?.query ?? null;
   const mentions = useMentions(editor, caret, query === null, requestFiles);
-  const matches = useMemo(() => {
+  // Only read when the menu is open, so rendering on the server is harmless.
+  const [recent, setRecent] = useState(loadRecent);
+  const groups = useMemo(() => {
     if (query === null) return [];
     const all = [
       ...(onSetModel ? [MODEL_COMMAND] : []),
       ...commands.filter((c) => c.name !== "model"),
     ];
-    return rankCommands(query, all);
-  }, [query, commands, onSetModel]);
+    return groupCommands(query, all, recent);
+  }, [query, commands, onSetModel, recent]);
+  const rows = useMemo(
+    () => groups.flatMap((g) => g.commands.map((command) => ({ g, command }))),
+    [groups]
+  );
+  const matches = useMemo(() => rows.map((r) => r.command), [rows]);
   // One menu at a time: "/" commands or "@" files at the caret.
   const menuKey =
     query !== null ? `/${caret.pos}:${caret.before}` : mentions.key;
   const menuOpen = menuKey !== null && dismissed !== menuKey;
   const options: MenuOption[] =
     query !== null
-      ? matches.map((c, i) => ({
+      ? rows.map(({ g, command: c }, i) => ({
           key: `${c.name}-${i}`,
           label: `/${c.name}`,
           hint: c.argumentHint,
           description: c.description,
+          group: g.label || undefined,
+          // The heading already says it, except where a section mixes sources.
+          badge:
+            g.label === "Recent" || g.label === "Matched in description"
+              ? (sourceLabel(c) ?? undefined)
+              : undefined,
         }))
       : mentions.files.map((f) => ({
           key: `${f.dir ? "d" : "f"}:${f.path}`,
@@ -251,6 +271,9 @@ export function ComposerBody({
     !text.trim() && !images.length && !files.length && !attach.uploads.length;
   const submit = () => {
     if (empty || disabled || attach.uploading) return;
+    const used = leadingCommand(text)?.slice(1);
+    if (used && commands.some((c) => c.name === used))
+      setRecent(saveRecent(used));
     onSend(composeMessage(text, files), images, attached);
     setImages([]);
     setFiles([]);
@@ -308,6 +331,7 @@ export function ComposerBody({
           label={query !== null ? "Commands" : "Files"}
           empty={query !== null ? "No matching commands" : "No matching files"}
           options={options}
+          highlight={query ?? undefined}
           active={highlighted}
           onPick={pick}
           onHover={setActive}

package/lib/chat/commands.ts

@@ -1,4 +1,4 @@
-import type { ChatCommand } from "./events";
+import type { ChatCommand, CommandSource } from "./events";
 
 // The /command being typed: a "/" at the start of a line or after whitespace,
 // then the partial name, right up to the caret. Not "a/b" or "http://x".
@@ -26,10 +26,15 @@ function score(q: string, c: ChatCommand): number {
   if (parts.some((p) => p.startsWith(q))) return 60;
   if (name.includes(q)) return 50;
   if (isSubsequence(q, name)) return 20;
-  if (c.description.toLowerCase().includes(q)) return 10;
+  const desc = c.description.toLowerCase();
+  if (desc.split(/[^a-z0-9]+/).some((w) => w.startsWith(q))) return 12;
+  if (desc.includes(q)) return 10;
   return 0;
 }
 
+// A match that only came from the description, not the name.
+const DESCRIPTION_ONLY = 12;
+
 // Best matches first; ties keep the agent's own order.
 export function rankCommands(
   query: string,
@@ -68,3 +73,68 @@ export function withFresh(commands: ChatCommand[]): ChatCommand[] {
     ? commands
     : [FRESH_COMMAND, ...commands];
 }
+
+export interface MenuGroup {
+  label: string;
+  commands: ChatCommand[];
+}
+
+const SOURCE_ORDER: CommandSource[] = [
+  "project",
+  "global",
+  "plugin",
+  "builtin",
+];
+
+export const SOURCE_LABEL: Record<CommandSource, string> = {
+  project: "Project",
+  global: "Global",
+  plugin: "Plugin",
+  builtin: "Built-in",
+};
+
+// "Global" / "Project" / "slack": the small label on a row.
+export function sourceLabel(c: ChatCommand): string | null {
+  if (!c.source) return null;
+  return c.source === "plugin" && c.plugin ? c.plugin : SOURCE_LABEL[c.source];
+}
+
+// The ranked commands as the menu shows them: what was used last, then one
+// section per source, then what only matched by description. A command with
+// no known source (an agent that doesn't report one) stays in one flat list.
+export function groupCommands(
+  query: string,
+  commands: ChatCommand[],
+  recent: string[]
+): MenuGroup[] {
+  const ranked = rankCommands(query, commands);
+  if (!commands.some((c) => c.source)) {
+    return ranked.length ? [{ label: "", commands: ranked }] : [];
+  }
+  const groups: MenuGroup[] = [];
+  const add = (label: string, list: ChatCommand[]) => {
+    if (list.length) groups.push({ label, commands: list });
+  };
+  const rest = (c: ChatCommand) => !recent.includes(c.name);
+  const used = recent
+    .map((n) => ranked.find((c) => c.name === n))
+    .filter((c): c is ChatCommand => !!c);
+  add("Recent", used);
+  const byName = (a: ChatCommand, b: ChatCommand) =>
+    a.name.localeCompare(b.name);
+  const named = ranked.filter(
+    (c) => rest(c) && (!query || score(query, c) > DESCRIPTION_ONLY)
+  );
+  for (const src of SOURCE_ORDER) {
+    const list = named.filter((c) => (c.source ?? "builtin") === src);
+    // Alphabetical when nothing was typed; best match first otherwise.
+    add(SOURCE_LABEL[src], query ? list : [...list].sort(byName));
+  }
+  add(
+    "Matched in description",
+    ranked.filter(
+      (c) => rest(c) && query && score(query, c) <= DESCRIPTION_ONLY
+    )
+  );
+  return groups;
+}

package/lib/chat/events.ts

@@ -21,8 +21,14 @@ export interface ChatCommand {
   description: string;
   argumentHint?: string;
   builtin?: boolean;
+  // Where it comes from, for grouping in the "/" menu.
+  source?: CommandSource;
+  // The plugin that ships it, when source is "plugin".
+  plugin?: string;
 }
 
+export type CommandSource = "project" | "global" | "plugin" | "builtin";
+
 export interface ChatModel {
   value: string;
   label: string;

package/lib/chat/recent-commands.ts

@@ -0,0 +1,28 @@
+// The commands and skills last used from the composer, newest first. Kept in
+// the browser: a short list that only matters to this device.
+
+const KEY = "agentos:recent-commands";
+const MAX = 5;
+
+export function pushRecent(list: string[], name: string): string[] {
+  return [name, ...list.filter((n) => n !== name)].slice(0, MAX);
+}
+
+export function loadRecent(): string[] {
+  try {
+    const v: unknown = JSON.parse(localStorage.getItem(KEY) ?? "[]");
+    return Array.isArray(v)
+      ? v.filter((n): n is string => typeof n === "string").slice(0, MAX)
+      : [];
+  } catch {
+    return [];
+  }
+}
+
+export function saveRecent(name: string): string[] {
+  const next = pushRecent(loadRecent(), name);
+  try {
+    localStorage.setItem(KEY, JSON.stringify(next));
+  } catch {}
+  return next;
+}

package/lib/chat/settings.ts

@@ -16,6 +16,7 @@ import {
   type ChatCommand,
   type ChatServerMessage,
 } from "./events";
+import { tagSources } from "./skill-source";
 import {
   createSkillWatcher,
   skillFolders,
@@ -200,6 +201,7 @@ async function loadCapabilities(
     if (w.loads.get(key)?.gen !== gen) return;
     registry.caps.set(key, {
       ...found,
+      commands: tagSources(found.commands, cwdOf(session)),
       terminalOnly: registry.caps.get(key)?.terminalOnly ?? new Set(),
       at: Date.now(),
     });

package/lib/chat/skill-source.ts

@@ -0,0 +1,95 @@
+/**
+ * Tells the "/" menu where each command or skill comes from: the project's
+ * own folders, the user's, a plugin (its name carries the plugin as a
+ * "plugin:" prefix), or the agent itself.
+ */
+
+import fs from "fs";
+import os from "os";
+import path from "path";
+import { SKILL_DIRS } from "../agents/skill-dirs";
+import type { ChatCommand } from "./events";
+
+const claudeDir = () =>
+  process.env.CLAUDE_CONFIG_DIR || path.join(os.homedir(), ".claude");
+
+function entries(dir: string): fs.Dirent[] {
+  try {
+    return fs.readdirSync(dir, { withFileTypes: true });
+  } catch {
+    return [];
+  }
+}
+
+const isDir = (e: fs.Dirent, dir: string) =>
+  e.isDirectory() ||
+  (e.isSymbolicLink() && fs.statSync(path.join(dir, e.name)).isDirectory());
+
+// The name in a SKILL.md's frontmatter, when it differs from the folder.
+function declaredName(file: string): string | null {
+  try {
+    const head = fs.readFileSync(file, "utf8").slice(0, 1024);
+    const fm = /^---\r?\n([\s\S]*?)\r?\n---/.exec(head)?.[1] ?? "";
+    return /^name:\s*["']?([^\s"']+)/m.exec(fm)?.[1] ?? null;
+  } catch {
+    return null;
+  }
+}
+
+// Names a folder of skills and commands offers: skill folders, and command
+// files (nested ones as "dir:name").
+export function namesIn(root: string): Set<string> {
+  const names = new Set<string>();
+  const skills = path.join(root, "skills");
+  for (const e of entries(skills)) {
+    try {
+      if (!isDir(e, skills)) continue;
+    } catch {
+      continue;
+    }
+    names.add(e.name);
+    const declared = declaredName(path.join(skills, e.name, "SKILL.md"));
+    if (declared) names.add(declared);
+  }
+  const commands = path.join(root, "commands");
+  const walk = (dir: string, prefix: string) => {
+    for (const e of entries(dir)) {
+      if (e.isDirectory()) walk(path.join(dir, e.name), `${prefix}${e.name}:`);
+      else if (e.name.endsWith(".md"))
+        names.add(`${prefix}${e.name.slice(0, -3)}`);
+    }
+  };
+  walk(commands, "");
+  return names;
+}
+
+function projectNames(cwd: string): Set<string> {
+  const names = new Set<string>();
+  const home = os.homedir();
+  // The folder and its parents, up to home: a repo's skills reach its subfolders.
+  for (let dir = cwd; dir !== home && dir !== path.dirname(dir);) {
+    for (const rel of SKILL_DIRS) {
+      // SKILL_DIRS are ".claude/skills" style; namesIn wants the parent.
+      for (const n of namesIn(path.join(dir, path.dirname(rel)))) names.add(n);
+    }
+    dir = path.dirname(dir);
+  }
+  return names;
+}
+
+export function tagSources(
+  commands: ChatCommand[],
+  cwd: string
+): ChatCommand[] {
+  const project = projectNames(cwd);
+  const user = namesIn(claudeDir());
+  return commands.map((c) => {
+    if (project.has(c.name)) return { ...c, source: "project" };
+    if (user.has(c.name)) return { ...c, source: "global" };
+    if (c.builtin) return { ...c, source: "builtin" };
+    const colon = c.name.indexOf(":");
+    if (colon > 0)
+      return { ...c, source: "plugin", plugin: c.name.slice(0, colon) };
+    return { ...c, source: "builtin" };
+  });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saadnvd1/agent-os",
-  "version": "0.3.756",
+  "version": "0.3.758",
   "description": "Self-hosted web UI for managing Claude Code sessions",
   "bin": {
     "agent-os": "scripts/agent-os"