daemon: integrate QoL slices 1-5 (model/rename/catalog, history deletes, stats, repo prepare+imageUsed+built) — 95.3% cover green
This commit is contained in:
Raphael Westphal
+190
-4
@@ -1,6 +1,11 @@
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import { Link, useParams } from "react-router-dom";
|
||||
import type { EventFrame } from "./protocol";
|
||||
import type {
|
||||
EventFrame,
|
||||
ModelCatalogEntry,
|
||||
RenameBody,
|
||||
SetModelBody,
|
||||
} from "./protocol";
|
||||
import { Route } from "./protocol";
|
||||
import { ApiError, errMessage, fetchJson } from "./api";
|
||||
import {
|
||||
@@ -18,6 +23,38 @@ const HISTORY_LIMIT: number = 1000;
|
||||
const LATEST_QUERY: string = "latest=1";
|
||||
const TEXTAREA_MAX_H: number = 200;
|
||||
const SEND_KEY: string = "Enter";
|
||||
const ESCAPE_KEY: string = "Escape";
|
||||
|
||||
/** Catalog cache shared across mounts and session switches: the model list
|
||||
* is static for a daemon run, so it is fetched at most once per page load. */
|
||||
let catalogCache: ModelCatalogEntry[] | null = null;
|
||||
|
||||
export interface CatalogGroup {
|
||||
provider: string;
|
||||
models: ModelCatalogEntry[];
|
||||
}
|
||||
|
||||
/** Group catalog entries by provider, preserving arrival order. */
|
||||
export function groupCatalog(entries: ModelCatalogEntry[]): CatalogGroup[] {
|
||||
const groups = new Map<string, ModelCatalogEntry[]>();
|
||||
for (const entry of entries) {
|
||||
const list = groups.get(entry.provider);
|
||||
if (list === undefined) groups.set(entry.provider, [entry]);
|
||||
else list.push(entry);
|
||||
}
|
||||
return Array.from(
|
||||
groups,
|
||||
([provider, models]): CatalogGroup => ({
|
||||
provider,
|
||||
models,
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
/** Test seam: drop the module-level catalog cache. */
|
||||
export function resetCatalogCache(): void {
|
||||
catalogCache = null;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
store: SessionsStore;
|
||||
@@ -35,6 +72,14 @@ export default function ChatView({ store, pushToast }: Props) {
|
||||
const [tasksOpen, setTasksOpen] = useState<boolean>(false);
|
||||
const [hasOlder, setHasOlder] = useState<boolean>(false);
|
||||
const [loadingOlder, setLoadingOlder] = useState<boolean>(false);
|
||||
const [modelOpen, setModelOpen] = useState<boolean>(false);
|
||||
const [catalog, setCatalog] = useState<ModelCatalogEntry[] | null>(
|
||||
catalogCache,
|
||||
);
|
||||
const [catalogError, setCatalogError] = useState<string>("");
|
||||
const [switching, setSwitching] = useState<boolean>(false);
|
||||
const [renaming, setRenaming] = useState<boolean>(false);
|
||||
const [renameDraft, setRenameDraft] = useState<string>("");
|
||||
|
||||
const lastSeqRef = useRef<number>(0);
|
||||
const loadedRef = useRef<boolean>(false);
|
||||
@@ -192,6 +237,65 @@ export default function ChatView({ store, pushToast }: Props) {
|
||||
}
|
||||
};
|
||||
|
||||
const toggleModelPicker = (): void => {
|
||||
setModelOpen((open) => !open);
|
||||
if (catalogCache === null) {
|
||||
setCatalogError("");
|
||||
void fetchJson<ModelCatalogEntry[]>(Route.ModelCatalog)
|
||||
.then((list) => {
|
||||
catalogCache = list;
|
||||
setCatalog(list);
|
||||
})
|
||||
.catch((err: unknown) => setCatalogError(errMessage(err)));
|
||||
}
|
||||
};
|
||||
|
||||
const pickModel = async (
|
||||
provider: string,
|
||||
modelId: string,
|
||||
): Promise<void> => {
|
||||
if (switching) return;
|
||||
setSwitching(true);
|
||||
try {
|
||||
await fetchJson(Route.SessionModel(sessionId), {
|
||||
method: "POST",
|
||||
body: JSON.stringify({ provider, modelId } satisfies SetModelBody),
|
||||
});
|
||||
setModelOpen(false);
|
||||
} catch (err) {
|
||||
if (err instanceof ApiError && err.status === 409)
|
||||
pushToast("session offline");
|
||||
else pushToast(errMessage(err));
|
||||
} finally {
|
||||
setSwitching(false);
|
||||
}
|
||||
};
|
||||
|
||||
const startRename = (): void => {
|
||||
setRenameDraft(session?.name ?? "");
|
||||
setRenaming(true);
|
||||
};
|
||||
|
||||
const cancelRename = (): void => {
|
||||
setRenaming(false);
|
||||
setRenameDraft("");
|
||||
};
|
||||
|
||||
const saveRename = async (): Promise<void> => {
|
||||
const name = renameDraft.trim();
|
||||
if (name.length === 0) return;
|
||||
try {
|
||||
await fetchJson(Route.Session(sessionId), {
|
||||
method: "PATCH",
|
||||
body: JSON.stringify({ name } satisfies RenameBody),
|
||||
});
|
||||
setRenaming(false);
|
||||
await store.refresh();
|
||||
} catch (err) {
|
||||
pushToast(errMessage(err));
|
||||
}
|
||||
};
|
||||
|
||||
const onKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>): void => {
|
||||
// IME composition: Enter confirms the candidate window, not a send
|
||||
if (e.nativeEvent.isComposing) return;
|
||||
@@ -213,10 +317,92 @@ export default function ChatView({ store, pushToast }: Props) {
|
||||
<div className="chat-layout">
|
||||
<div className="chat-col">
|
||||
<div className="chat-header">
|
||||
<div className="title">
|
||||
{session?.name ?? session?.repo ?? sessionId}
|
||||
{renaming ? (
|
||||
<div className="rename-row">
|
||||
<input
|
||||
className="rename-input"
|
||||
value={renameDraft}
|
||||
aria-label="Session name"
|
||||
onChange={(e) => setRenameDraft(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === SEND_KEY && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
void saveRename();
|
||||
}
|
||||
if (e.key === ESCAPE_KEY) cancelRename();
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="icon-btn"
|
||||
aria-label="Save session name"
|
||||
onClick={() => void saveRename()}
|
||||
>
|
||||
✓
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="icon-btn"
|
||||
aria-label="Cancel rename"
|
||||
onClick={cancelRename}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="title">
|
||||
{session?.name ?? session?.repo ?? sessionId}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="icon-btn"
|
||||
aria-label="Rename session"
|
||||
onClick={startRename}
|
||||
>
|
||||
✎
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
<div className="model-picker">
|
||||
<button
|
||||
type="button"
|
||||
className="model-chip"
|
||||
aria-expanded={modelOpen}
|
||||
aria-label="Switch model"
|
||||
onClick={toggleModelPicker}
|
||||
>
|
||||
<span>{session?.model || "model"}</span> <span>▾</span>
|
||||
</button>
|
||||
{modelOpen && (
|
||||
<div className="model-popover">
|
||||
{catalogError.length > 0 && (
|
||||
<div className="notice-line">{catalogError}</div>
|
||||
)}
|
||||
{catalog === null && catalogError.length === 0 && (
|
||||
<div className="model-loading">loading…</div>
|
||||
)}
|
||||
{catalog !== null &&
|
||||
groupCatalog(catalog).map((group) => (
|
||||
<div key={group.provider}>
|
||||
<div className="model-group">{group.provider}</div>
|
||||
{group.models.map((m) => (
|
||||
<button
|
||||
key={`${m.provider}/${m.id}`}
|
||||
type="button"
|
||||
className="model-option"
|
||||
aria-label={`Switch to ${m.provider}/${m.id}`}
|
||||
disabled={switching}
|
||||
onClick={() => void pickModel(m.provider, m.id)}
|
||||
>
|
||||
{m.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="sub">{session?.model}</div>
|
||||
{(chat.usage.inputTokens > 0 || chat.usage.outputTokens > 0) && (
|
||||
<span className="usage-chip" title="tokens this session">
|
||||
↑{chat.usage.inputTokens.toLocaleString()} ↓
|
||||
|
||||
Reference in New Issue
Block a user