Smartgift-AI/AgentHub
14
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases 88 Wiki Activity

fix(run,lanes): prompt autocomplete, per-lane Active runs, compact Changes header

Browse Source 
- The run form's prompt box offers suggestions again: `/` lists the run
  cwd's project and user commands and skills plus the CLI built-ins
  (claude lanes only), `@` lists files under the cwd; Enter picks while
  the list is open and sends otherwise. The 2f39f4e rewrite had left a
  bare textarea that ignored both.
- Active runs lists only the current lane's runs and external sessions
  (sessions matched to the lane by longest path-boundary cwd), instead of
  every lane's.
- The Changes panel's git line and its actions are one compact row in one
  card, and the mode/range toolbar is one wrapping row.
- The lane card hides itself when it has nothing to show, instead of
  leaving an empty frame where the git row used to be.
This commit is contained in:
nntrivi2001
2026-09-24 13:30:30 +07:00
parent faa56f5c75
commit 428519335d
15 changed files with 583 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/run/RunSetup.tsx
+272 -15
View File
@@ -53,30 +53,214 @@ import type {
RunStartArgs,
CodexSandbox,
CodexApproval,
CcMdItem,
} from "../../lib/api";
import type { Session, LaneTool } from "../../lib/types";
import { Select } from "../Select";
// Minimal SlashCommand type (from deleted RunConsole)
export interface SlashCommand {
name: string;
source: "project" | "user" | "plugin" | "builtin";
source: "project" | "user" | "builtin";
description?: string;
}
// Minimal PromptEditor component (from deleted RunConsole)
// Commands the CLI answers itself. They are typed into the pane like any
// other text, so they do run — they are just not files anyone can list.
const BUILTIN_SLASH_COMMANDS: SlashCommand[] = [
"help",
"clear",
"compact",
"config",
"model",
"memory",
"hooks",
"cost",
"agents",
"review",
"permissions",
"status",
"init",
"mcp",
"plugin",
"output-style",
"exit",
].map((name) => ({ name, source: "builtin" }));
const SOURCE_ORDER = { project: 0, user: 1, builtin: 2 } as const;
const SOURCE_TONE: Record<SlashCommand["source"], string> = {
project: "text-status-success border-status-success/40",
user: "text-accent border-accent/40",
builtin: "text-fg-muted border-border",
};
/** Tiered match: exact > prefix > word prefix > substring > subsequence >
* description (3+ chars only, so one keystroke drags nothing tangential in). */
function scoreSlashMatch(name: string, description: string | undefined, q: string): number {
if (!q) return 1;
const n = name.toLowerCase();
if (n === q) return 1000;
if (n.startsWith(q)) return 800 - Math.min(n.length, 100);
if (n.split(/[-_.:\s]/).some((p) => p.startsWith(q))) return 600 - Math.min(n.length, 100);
const idx = n.indexOf(q);
if (idx >= 0) return 400 - Math.min(idx, 100);
let i = 0;
for (let k = 0; k < n.length && i < q.length; k++) if (n[k] === q[i]) i++;
if (i === q.length) return 200;
if (q.length >= 3 && (description || "").toLowerCase().includes(q)) return 100;
return 0;
}
interface Trigger {
kind: "slash" | "file";
query: string;
/** Where the `/` or `@` token starts, so a pick replaces it up to the cursor. */
start: number;
cursor: number;
}
/** The `/…` or `@…` token the cursor is in, if any. A token starts at the
* line start or after whitespace, so `a/b` and `me@x.io` never trigger. */
function detectTrigger(value: string, cursor: number): Trigger | null {
let start = cursor;
while (start > 0 && !/\s/.test(value[start - 1] ?? " ")) start--;
const tok = value.slice(start, cursor);
if (tok.startsWith("/")) return { kind: "slash", query: tok.slice(1), start, cursor };
if (tok.startsWith("@")) return { kind: "file", query: tok.slice(1), start, cursor };
return null;
}
interface PromptEditorProps {
value: string;
onChange: (s: string) => void;
onSubmit: () => void;
placeholder: string;
rows?: number;
slashCommands: SlashCommand[];
/** Offer slash commands. Off for codex: these are Claude Code's. */
slash: boolean;
/** Where `@` looks for files and project commands/skills are read from. */
fileCwd: string;
}
function PromptEditor({ value, onChange, onSubmit, placeholder, rows = 5 }: PromptEditorProps) {
function PromptEditor({
value,
onChange,
onSubmit,
placeholder,
rows = 5,
slash,
fileCwd,
}: PromptEditorProps) {
const { t } = useTranslation("run");
const taRef = useRef<HTMLTextAreaElement | null>(null);
const [trigger, setTrigger] = useState<Trigger | null>(null);
const [active, setActive] = useState(0);
const [files, setFiles] = useState<string[]>([]);
const [commands, setCommands] = useState<SlashCommand[] | null>(null);
const [commandsCwd, setCommandsCwd] = useState(fileCwd);
if (commandsCwd !== fileCwd) {
setCommandsCwd(fileCwd);
setCommands(null);
}
const kind = trigger?.kind === "slash" && !slash ? null : trigger?.kind;
// Commands and skills are read the first time `/` is typed for this cwd —
// two directory walks nobody should pay for on every render of the form.
useEffect(() => {
if (kind !== "slash" || commands) return;
let live = true;
const toCmd = (c: CcMdItem): SlashCommand => ({
name: c.name,
source: c.scope,
description: c.frontmatter?.description || c.preview.slice(0, 80),
});
Promise.all([
api.ccConfig.commands(undefined, fileCwd).catch(() => ({ items: [] as CcMdItem[] })),
api.ccConfig.skills(undefined, fileCwd).catch(() => ({ items: [] as CcMdItem[] })),
]).then(([c, sk]) => {
if (live) setCommands([...c.items, ...sk.items].map(toCmd).concat(BUILTIN_SLASH_COMMANDS));
});
return () => {
live = false;
};
}, [kind, commands, fileCwd]);
// Files: debounced, and only the newest query may land.
const query = trigger?.query ?? "";
useEffect(() => {
if (kind !== "file") return;
let live = true;
const tid = window.setTimeout(() => {
api.run
.files(fileCwd, query)
.then((r) => live && setFiles(r.items))
.catch(() => live && setFiles([]));
}, 120);
return () => {
live = false;
window.clearTimeout(tid);
};
}, [kind, query, fileCwd]);
const slashItems = useMemo(() => {
if (kind !== "slash" || !commands) return [];
const q = query.toLowerCase();
return commands
.map((cmd) => ({ cmd, score: scoreSlashMatch(cmd.name, cmd.description, q) }))
.filter((x) => x.score > 0)
.sort(
(a, b) =>
b.score - a.score ||
SOURCE_ORDER[a.cmd.source] - SOURCE_ORDER[b.cmd.source] ||
a.cmd.name.localeCompare(b.cmd.name)
)
.map((x) => x.cmd);
}, [kind, commands, query]);
const count = kind === "file" ? files.length : slashItems.length;
const current = Math.min(active, Math.max(0, count - 1));
const pick = (token: string) => {
if (!trigger) return;
const before = value.slice(0, trigger.start);
const after = value.slice(trigger.cursor);
const sep = after.startsWith(" ") ? "" : " ";
onChange(before + token + sep + after);
setTrigger(null);
setActive(0);
const pos = before.length + token.length + 1;
requestAnimationFrame(() => {
taRef.current?.focus();
taRef.current?.setSelectionRange(pos, pos);
});
};
const pickAt = (i: number) => {
if (kind === "file") {
const f = files[i];
if (f) pick(`@${f}`);
} else {
const c = slashItems[i];
if (c) pick(`/${c.name}`);
}
};
const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
if (kind && count > 0) {
if (e.key === "ArrowDown" || e.key === "ArrowUp") {
e.preventDefault();
const step = e.key === "ArrowDown" ? 1 : -1;
setActive(Math.min(count - 1, Math.max(0, current + step)));
return;
}
if ((e.key === "Enter" || e.key === "Tab") && !e.shiftKey && !e.nativeEvent.isComposing) {
e.preventDefault();
pickAt(current);
return;
}
}
if (kind && e.key === "Escape") {
e.preventDefault();
setTrigger(null);
return;
}
// Enter sends (Ctrl/Cmd+Enter still does); Shift+Enter inserts a newline.
// isComposing guards IME input (Vietnamese/CJK), where Enter commits the candidate.
if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
@@ -85,15 +269,89 @@ function PromptEditor({ value, onChange, onSubmit, placeholder, rows = 5 }: Prom
}
};
const retrack = (ta: HTMLTextAreaElement) => {
setTrigger(detectTrigger(ta.value, ta.selectionStart ?? 0));
};
const rowClass = (i: number) =>
`w-full text-left px-3 py-1.5 transition-colors ${i === current ? "bg-accent/15" : "hover:bg-surface-3"}`;
return (
<textarea
value={value}
onChange={(e) => onChange(e.target.value)}
onKeyDown={handleKeyDown}
placeholder={placeholder}
rows={rows}
className="w-full bg-surface-2 border border-border rounded-md px-3 py-2 text-[11px] font-mono text-fg-primary placeholder:text-fg-muted focus:outline-none focus:border-accent/50 resize-none"
/>
<div className="relative">
<textarea
ref={taRef}
value={value}
onChange={(e) => {
onChange(e.target.value);
retrack(e.target);
setActive(0);
}}
onSelect={(e) => retrack(e.currentTarget)}
onBlur={() => setTrigger(null)}
onKeyDown={handleKeyDown}
placeholder={placeholder}
rows={rows}
spellCheck={false}
className="w-full bg-surface-2 border border-border rounded-md px-3 py-2 text-[11px] font-mono text-fg-primary placeholder:text-fg-muted focus:outline-none focus:border-accent/50 resize-none"
/>
{kind && (
<div
role="listbox"
data-testid="prompt-autocomplete"
className="absolute z-30 left-0 right-0 top-full mt-1 max-h-72 overflow-auto rounded-md border border-border bg-surface-1 py-1 shadow-lg"
>
<div className="px-3 py-1.5 border-b border-border text-[10px] font-semibold uppercase tracking-wider text-fg-muted">
{kind === "slash" ? t("autocomplete.slashHint") : t("autocomplete.fileHint")}
</div>
{count === 0 ? (
<div className="px-3 py-2 text-[11px] text-fg-muted">
{kind === "slash" && !commands ? "…" : t("autocomplete.noMatches")}
</div>
) : kind === "slash" ? (
slashItems.map((c, i) => (
<button
key={`${c.source}:${c.name}`}
type="button"
role="option"
aria-selected={i === current}
// Keep focus in the textarea, or its blur closes the list first.
onMouseDown={(e) => e.preventDefault()}
onClick={() => pickAt(i)}
onMouseEnter={() => setActive(i)}
className={rowClass(i)}
>
<div className="flex items-center gap-2">
<span className="font-mono text-[12px] text-fg-primary">/{c.name}</span>
<span
className={`rounded border px-1.5 py-0.5 font-mono text-[9px] ${SOURCE_TONE[c.source]}`}
>
{c.source}
</span>
</div>
{c.description && (
<div className="mt-0.5 truncate text-[10.5px] text-fg-muted">{c.description}</div>
)}
</button>
))
) : (
files.map((f, i) => (
<button
key={f}
type="button"
role="option"
aria-selected={i === current}
onMouseDown={(e) => e.preventDefault()}
onClick={() => pickAt(i)}
onMouseEnter={() => setActive(i)}
className={`${rowClass(i)} truncate font-mono text-[11px] text-fg-secondary`}
>
{f}
</button>
))
)}
</div>
)}
</div>
);
}
@@ -122,7 +380,6 @@ interface RunSetupProps {
* sessions. Undefined when no lane is selected (the picker then lists
* everything, same as before lanes existed). */
laneCwd?: string;
slashCommands?: SlashCommand[];
runHistory: DashboardRunHistoryItem[];
onResumeFromHistory: (item: DashboardRunHistoryItem) => void;
/** The selected lane's CLI. Decides which advanced fields render. */
@@ -287,7 +544,7 @@ export function RunSetup(props: RunSetupProps) {
onSubmit={() => handleStart(props)}
placeholder={t("fields.promptPlaceholderTerminal")}
rows={5}
slashCommands={props.slashCommands ?? []}
slash={props.tool !== "codex"}
fileCwd={props.resumeSession?.cwd || props.cwd}
/>
<div className="mt-1 text-[10px] text-fg-muted">