CodeCraft

+ {menuOpen &&

setMenuOpen(false)} />} + +

{content}

+ ); +} diff --git a/web/src/api.ts b/web/src/api.ts new file mode 100644 index 0000000..b48caa5 --- /dev/null +++ b/web/src/api.ts @@ -0,0 +1,93 @@ +import type { ServerEvent } from "./types"; + +const TOKEN_KEY = "codecraft.token"; + +export function getToken(): string { + return localStorage.getItem(TOKEN_KEY) ?? ""; +} + +export function setToken(token: string) { + localStorage.setItem(TOKEN_KEY, token); +} + +export class ApiError extends Error { + constructor( + public status: number, + message: string, + ) { + super(message); + } +} + +export async function api(path: string, init: RequestInit & { json?: unknown } = {}): Promise { + const headers: Record = { ...(init.headers as Record) }; + const token = getToken(); + if (token) headers.Authorization = `Bearer ${token}`; + let body = init.body; + if (init.json !== undefined) { + headers["Content-Type"] = "application/json"; + body = JSON.stringify(init.json); + } + const res = await fetch(`/api${path}`, { ...init, headers, body }); + const text = await res.text(); + const data = text ? JSON.parse(text) : null; + if (!res.ok) throw new ApiError(res.status, data?.error ?? res.statusText); + return data as T; +} + +export const get = (path: string) => api(path); +export const post = (path: string, json?: unknown) => api(path, { method: "POST", json: json ?? {} }); +export const patch = (path: string, json: unknown) => api(path, { method: "PATCH", json }); +export const put = (path: string, json: unknown) => api(path, { method: "PUT", json }); +export const del = (path: string) => api(path, { method: "DELETE" }); + +/** WebSocket with automatic reconnect. `onOpen` runs after every (re)connect so + * the caller can resync state that may have been missed. */ +export function connectEvents(handlers: { + onEvent: (ev: ServerEvent) => void; + onOpen: () => void; + onClose: () => void; +}): () => void { + let ws: WebSocket | null = null; + let stopped = false; + let retry = 0; + let timer: ReturnType | undefined; + + const open = () => { + const proto = location.protocol === "https:" ? "wss" : "ws"; + const token = encodeURIComponent(getToken()); + ws = new WebSocket(`${proto}://${location.host}/api/ws?token=${token}`); + ws.onopen = () => { + retry = 0; + handlers.onOpen(); + }; + ws.onmessage = (m) => { + try { + handlers.onEvent(JSON.parse(m.data)); + } catch { + /* ignore malformed */ + } + }; + ws.onclose = () => { + handlers.onClose(); + if (stopped) return; + retry = Math.min(retry + 1, 6); + timer = setTimeout(open, 500 * 2 ** retry); + }; + }; + open(); + // Reconnect immediately when the app comes back to the foreground (mobile PWA). + const onVisible = () => { + if (document.visibilityState === "visible" && ws && ws.readyState > WebSocket.OPEN) { + clearTimeout(timer); + open(); + } + }; + document.addEventListener("visibilitychange", onVisible); + return () => { + stopped = true; + clearTimeout(timer); + document.removeEventListener("visibilitychange", onVisible); + ws?.close(); + }; +} diff --git a/web/src/components/Charts.tsx b/web/src/components/Charts.tsx new file mode 100644 index 0000000..9f62951 --- /dev/null +++ b/web/src/components/Charts.tsx @@ -0,0 +1,259 @@ +// Hand-written SVG charts following the dataviz method: categorical colors in +// fixed slot order, thin marks with 2px gaps, recessive axes, hover tooltips, +// legends, and a table view for every chart. + +import { useEffect, useRef, useState, type ReactNode } from "react"; +import { useT } from "../i18n"; + +export const SERIES = Array.from({ length: 8 }, (_, i) => `var(--series-${i + 1})`); +const SEQ = Array.from({ length: 7 }, (_, i) => `var(--seq-${i})`); + +function useWidth() { + const ref = useRef(null); + const [width, setWidth] = useState(600); + useEffect(() => { + if (!ref.current) return; + const ro = new ResizeObserver(([e]) => setWidth(e.contentRect.width)); + ro.observe(ref.current); + return () => ro.disconnect(); + }, []); + return [ref, width] as const; +} + +/** Round up to 1/2/2.5/5 × 10^n for clean axis ticks. */ +function niceMax(v: number): number { + if (v <= 0) return 1; + const exp = Math.pow(10, Math.floor(Math.log10(v))); + for (const m of [1, 2, 2.5, 5, 10]) if (v <= m * exp) return m * exp; + return 10 * exp; +} + +export interface Series { + key: string; + label: string; + color: string; +} + +export function Legend({ series }: { series: Series[] }) { + return ( +

+ {series.map((s) => ( + + + {s.label} + + ))} +

+ ); +} + +interface Tip { + x: number; + y: number; + content: ReactNode; +} + +/** Stacked bar chart over categories (days). values[i][seriesKey]. */ +export function StackedBars({ + categories, + categoryLabel, + series, + values, + format, + height = 220, +}: { + categories: string[]; + categoryLabel: (c: string) => string; + series: Series[]; + values: Record[]; + format: (v: number) => string; + height?: number; +}) { + const [ref, width] = useWidth(); + const [tip, setTip] = useState(); + const [hover, setHover] = useState(); + const left = 56; + const bottom = 22; + const top = 8; + const plotW = Math.max(width - left - 4, 50); + const plotH = height - top - bottom; + const totals = values.map((v) => series.reduce((a, s) => a + (v[s.key] ?? 0), 0)); + const max = niceMax(Math.max(...totals, 0)); + const n = Math.max(categories.length, 1); + const slot = plotW / n; + const barW = Math.max(Math.min(slot * 0.72, 28), 2); + const ticks = [0, 0.25, 0.5, 0.75, 1].map((f) => f * max); + const labelEvery = Math.ceil(n / Math.max(Math.floor(plotW / 70), 1)); + const y = (v: number) => top + plotH - (v / max) * plotH; + + return ( +
(setTip(undefined), setHover(undefined))}> + {categoryLabel(c)} + {[...series].reverse().map((s) => + values[i][s.key] ? ( +
+ + {s.label} + + {format(values[i][s.key])} +
+ ) : null, + )} +
+ Σ + {format(totals[i])} +
+ + ), + }); + }} + /> + + ); + })} + + {tip && ( +
+ {tip.content} +
+ )} +
+ ); +} + +/** Weekday × hour heatmap with a 7-step sequential ramp. cells[weekday*24+hour]. */ +export function Heatmap({ + cells, + weekdays, + format, + firstDay = 1, +}: { + cells: number[]; + weekdays: string[]; + format: (v: number) => string; + firstDay?: number; +}) { + const t = useT(); + const [ref, width] = useWidth(); + const [tip, setTip] = useState(); + const left = 40; + const top = 18; + const cell = Math.max(Math.floor((width - left) / 24), 8); + const max = Math.max(...cells, 0); + const order = Array.from({ length: 7 }, (_, i) => (firstDay + i) % 7); + const bin = (v: number) => (v <= 0 || max === 0 ? 0 : Math.min(6, 1 + Math.floor((v / max) * 5.999))); + + return ( +
setTip(undefined)}> + + {weekdays[d]} {String(h).padStart(2, "0")}:00–{String(h).padStart(2, "0")}:59 + +
{format(v)}
+ + ), + }); + }} + /> + ); + }), + )} + +
+ {format(0)} + {SEQ.slice(1).map((c, i) => ( + + ))} + {format(max)} +
+ {tip && ( +
+ {tip.content} +
+ )} +
+ ); +} diff --git a/web/src/components/ChatView.tsx b/web/src/components/ChatView.tsx new file mode 100644 index 0000000..6bb90cd --- /dev/null +++ b/web/src/components/ChatView.tsx @@ -0,0 +1,336 @@ +import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react"; +import { del, get, patch, post } from "../api"; +import { useModels } from "../hooks"; +import { fmtCompact, fmtCost, fmtNumber, fmtPercent, useT } from "../i18n"; +import { navigate } from "../router"; +import { dismissError, loadSession, useStore } from "../store"; +import type { Aggregate, ImageData, Message, Part, Session } from "../types"; +import { Composer } from "./Composer"; +import { PermissionCard, QuestionCard } from "./Interaction"; +import { Markdown } from "./Markdown"; +import { TodoList, ToolCard } from "./ToolCard"; + +type ToolResult = Extract; + +const EMPTY: Message[] = []; + +interface SessionStats { + total: Aggregate; + by_model: (Aggregate & { model: string })[]; + currency: string; +} + +function Reasoning({ text, live }: { text: string; live: boolean }) { + const t = useT(); + if (!text.trim()) return null; + return ( +
+
{t("chat.reasoning")}
+
{text}
+
+ ); +} + +function AssistantParts({ parts, results, running, live }: { parts: Part[]; results: Map; running: boolean; live: boolean }) { + return ( + <> + {parts.map((p, i) => { + switch (p.type) { + case "text": + return ; + case "reasoning": + return ; + case "tool_call": + return ; + default: + return null; + } + })} + + ); +} + +function StatsPanel({ stats }: { stats: SessionStats }) { + const t = useT(); + const a = stats.total; + return ( +
+ + + + + + + + + + + + + + + {[...stats.by_model, { ...a, model: t("stats.total") }].map((r) => ( + + + + + + + + + + + ))} + +
{t("stats.model")} {t("stats.requests")} {t("stats.input")} {t("stats.cacheRead")} {t("stats.output")} {t("stats.ttft")} {t("stats.outputSpeed")} {t("stats.cost")}
{r.model} {fmtNumber(r.requests)} {fmtCompact(r.input_tokens + r.cache_write_tokens)} {fmtCompact(r.cache_read_tokens)} {fmtCompact(r.output_tokens)} {fmtNumber(r.avg_ttft_ms)} ms {fmtNumber(r.output_tps, 1)} tok/s {fmtCost(r.cost, stats.currency)}
+
+ {t("stats.prefillSpeed")}: {fmtNumber(a.prefill_tps)} tok/s · {t("stats.cacheHit")}: {fmtPercent(a.cache_hit_rate)} +
+
+ ); +} + +export function ChatView({ sessionId, onMenu }: { sessionId: string; onMenu: () => void }) { + const t = useT(); + const session = useStore((s) => s.sessionById[sessionId]); + const messages = useStore((s) => s.messages[sessionId] ?? EMPTY); + const draft = useStore((s) => s.drafts[sessionId]); + const busy = useStore((s) => !!s.busy[sessionId]); + const errors = useStore((s) => s.errors[sessionId]); + const allPermissions = useStore((s) => s.permissions); + const allQuestions = useStore((s) => s.questions); + const models = useModels(); + const [loadError, setLoadError] = useState(); + const [text, setText] = useState(""); + const [stats, setStats] = useState(); + const [showStats, setShowStats] = useState(false); + const [editingTitle, setEditingTitle] = useState(false); + const scrollRef = useRef(null); + const stick = useRef(true); + + useEffect(() => { + loadSession(sessionId).catch((e) => setLoadError(e.message)); + }, [sessionId]); + + const permissions = allPermissions.filter((p) => p.session_id === sessionId || p.root_session_id === sessionId); + const questions = allQuestions.filter((q) => q.session_id === sessionId || q.root_session_id === sessionId); + + // Session cost/tokens; refreshed when messages arrive. + useEffect(() => { + get(`/sessions/${sessionId}/stats`).then(setStats).catch(() => undefined); + }, [sessionId, messages.length]); + + const results = useMemo(() => { + const m = new Map(); + for (const msg of messages) for (const p of msg.parts) if (p.type === "tool_result") m.set(p.call_id, p); + return m; + }, [messages]); + + // Keep scrolled to the bottom while the user hasn't scrolled up. + useLayoutEffect(() => { + const el = scrollRef.current; + if (el && stick.current) el.scrollTop = el.scrollHeight; + }); + + if (loadError) return
{loadError}
; + if (!session) return
{t("common.loading")}
; + + const update = async (p: Partial) => { + try { + await patch(`/sessions/${sessionId}`, p); + } catch (e: any) { + alert(e.message); + } + }; + + const send = async (raw: string, images: ImageData[]) => { + const txt = raw.trim(); + if (txt === "/new") { + setText(""); + return navigate("/new"); + } + try { + await post(`/sessions/${sessionId}/prompt`, { text: txt, images }); + setText(""); + stick.current = true; + } catch (e: any) { + alert(e.message); + } + }; + + const rewind = async (m: Message) => { + if (!confirm(t("chat.rewindConfirm"))) return; + const txt = m.parts.map((p) => (p.type === "text" ? p.text : "")).join(""); + await post(`/sessions/${sessionId}/rewind`, { message_id: m.id }); + await loadSession(sessionId); + setText(txt); + }; + + const remove = async () => { + if (!confirm(t("chat.deleteConfirm"))) return; + await del(`/sessions/${sessionId}`); + navigate(session.parent_id ? `/s/${session.parent_id}` : "/new"); + }; + + // Context usage of the last request relative to the model's window. + const [prov, ...rest] = session.model.split("/"); + const modelInfo = models.find((p) => p.provider === prov)?.models.find((m) => m.id === rest.join("/")); + const u = session.last_usage; + const ctxTokens = u ? u.input_tokens + u.cache_read_tokens + u.cache_write_tokens + u.output_tokens : 0; + const ctxShare = modelInfo?.context && ctxTokens ? ctxTokens / modelInfo.context : undefined; + const todos = Array.isArray(session.todos) ? session.todos : []; + const openTodos = todos.filter((x) => x.status !== "completed"); + const lastIsAssistant = messages.length > 0 && messages[messages.length - 1].role === "assistant"; + + return ( + <> +
+ +
+ {editingTitle ? ( + (setEditingTitle(false), update({ title: e.target.value }))} + onKeyDown={(e) => e.key === "Enter" && (e.target as HTMLInputElement).blur()} + style={{ width: "100%" }} + /> + ) : ( +
setEditingTitle(true)} title={t("chat.renameHint")}> + {session.parent_id && ( + + ↩ + + )} + {session.title || t("session.untitled")} +
+ )} +
{session.cwd}
+
+ {ctxShare !== undefined && ( + 0.7 ? "warn" : ""}`} title={t("chat.contextHint", { tokens: fmtNumber(ctxTokens) })}> + {t("chat.context")} {fmtPercent(ctxShare)} + + )} + {stats && ( + + )} + {session.permission_mode === "bypass" && {t("permissionMode.bypass")}} + + +
+
{ + const el = e.currentTarget; + stick.current = el.scrollHeight - el.scrollTop - el.clientHeight < 80; + }} + > +
+ {showStats && stats && } + {messages.length === 0 && !draft &&
{t("chat.empty")}
} + {messages.map((m) => { + if (m.role === "assistant") { + return ( +
+ +
+ ); + } + const summary = m.parts.find((p) => p.type === "summary"); + if (summary && summary.type === "summary") { + return ( +
+
{t("chat.compacted")}
+ +
+ ); + } + const texts = m.parts.filter((p) => p.type === "text") as { text: string }[]; + const imgs = m.parts.filter((p) => p.type === "image") as { image: ImageData }[]; + if (texts.length === 0 && imgs.length === 0) return null; + return ( +
+
+ {!busy && ( +
+ +
+ )} + {texts.map((p) => p.text).join("\n\n")} + {imgs.length > 0 && ( +
+ {imgs.map((p, i) => ( + + ))} +
+ )} +
+
+ ); + })} + {draft && ( +
+ +
+ )} + {busy && !draft &&
{t("chat.thinking")}
} + {openTodos.length > 0 && ( +
+
{t("tool.todos")}
+ +
+ )} + {permissions.map((p) => ( + + ))} + {questions.map((q) => ( + + ))} + {errors?.map((e) => ( +
+ {e.message} + +
+ ))} + {session.agent === "plan" && !busy && lastIsAssistant && ( +
+ +
+ )} +
+
+ post(`/sessions/${sessionId}/abort`)} + onUpdate={update} + /> + + ); +} diff --git a/web/src/components/Composer.tsx b/web/src/components/Composer.tsx new file mode 100644 index 0000000..5c8f814 --- /dev/null +++ b/web/src/components/Composer.tsx @@ -0,0 +1,207 @@ +import { useEffect, useMemo, useRef, useState } from "react"; +import { useAgents, useFetch } from "../hooks"; +import { useT, type Key } from "../i18n"; +import type { ImageData, Session } from "../types"; +import { ModelSelect } from "./ModelSelect"; + +interface Suggestion { + name: string; + description: string; +} + +const BUILTIN: { name: string; key: Key }[] = [ + { name: "compact", key: "command.compact" }, + { name: "new", key: "command.new" }, +]; + +function readImage(file: File): Promise { + return new Promise((resolve, reject) => { + const r = new FileReader(); + r.onload = () => { + const url = String(r.result); + resolve({ media_type: file.type || "image/png", data: url.slice(url.indexOf(",") + 1) }); + }; + r.onerror = reject; + r.readAsDataURL(file); + }); +} + +export function Composer({ + session, + busy, + text, + setText, + onSend, + onAbort, + onUpdate, +}: { + session: Session; + busy: boolean; + text: string; + setText: (s: string) => void; + onSend: (text: string, images: ImageData[]) => void; + onAbort: () => void; + onUpdate: (patch: Partial) => void; +}) { + const t = useT(); + const ref = useRef(null); + const [images, setImages] = useState([]); + const [active, setActive] = useState(0); + const agents = useAgents(session.cwd).filter((a) => a.mode === "primary"); + const cmdData = useFetch<{ commands: Suggestion[] }>(`/commands?cwd=${encodeURIComponent(session.cwd)}`).data; + + // Auto-grow. + useEffect(() => { + const el = ref.current; + if (!el) return; + el.style.height = "auto"; + el.style.height = `${Math.min(el.scrollHeight, window.innerHeight * 0.4)}px`; + }, [text]); + + const suggestions = useMemo(() => { + const m = text.match(/^\/(\S*)$/); + if (!m) return []; + const all: Suggestion[] = [ + ...BUILTIN.map((b) => ({ name: b.name, description: t(b.key) })), + ...(cmdData?.commands ?? []), + ]; + return all.filter((c) => c.name.startsWith(m[1])).slice(0, 12); + }, [text, cmdData, t]); + + const send = () => { + if (!text.trim() && images.length === 0) return; + onSend(text, images); + setImages([]); + }; + + const onKeyDown = (e: React.KeyboardEvent) => { + if (suggestions.length > 0) { + if (e.key === "ArrowDown" || e.key === "ArrowUp") { + e.preventDefault(); + setActive((a) => (a + (e.key === "ArrowDown" ? 1 : suggestions.length - 1)) % suggestions.length); + return; + } + if (e.key === "Tab" || (e.key === "Enter" && !e.shiftKey)) { + e.preventDefault(); + setText(`/${suggestions[Math.min(active, suggestions.length - 1)].name} `); + return; + } + } + // Enter sends on desktop; on touch devices Enter inserts a newline. + const touch = matchMedia("(pointer: coarse)").matches; + if (e.key === "Enter" && !e.shiftKey && !touch && !e.nativeEvent.isComposing) { + e.preventDefault(); + send(); + } + if (e.key === "Escape" && busy) onAbort(); + }; + + const addFiles = async (files: FileList | File[]) => { + const imgs = await Promise.all([...files].filter((f) => f.type.startsWith("image/")).map(readImage)); + setImages((cur) => [...cur, ...imgs]); + }; + + return ( +
+
e.preventDefault()} + onDrop={(e) => { + e.preventDefault(); + void addFiles(e.dataTransfer.files); + }} + > + {suggestions.length > 0 && ( +
+ {suggestions.map((s, i) => ( +
{ + e.preventDefault(); + setText(`/${s.name} `); + ref.current?.focus(); + }} + > + /{s.name} + {s.description} +
+ ))} +
+ )} + {images.length > 0 && ( +
+ {images.map((img, i) => ( +
+ + +
+ ))} +
+ )} + { + setText(e.target.value); + setActive(0); + }} + onKeyDown={onKeyDown} + onPaste={(e) => { + const files = [...e.clipboardData.files]; + if (files.some((f) => f.type.startsWith("image/"))) { + e.preventDefault(); + void addFiles(files); + } + }} + aria-label={t("composer.placeholder")} + /> + <div className="composer-bar"> + <div className="mode-tabs" role="tablist" aria-label={t("composer.mode")}> + {agents.map((a) => ( + <button + key={a.name} + role="tab" + aria-selected={session.agent === a.name} + className={session.agent === a.name ? "active" : ""} + title={a.description} + onClick={() => onUpdate({ agent: a.name })} + > + {a.name} + </button> + ))} + </div> + <select + value={session.permission_mode} + onChange={(e) => onUpdate({ permission_mode: e.target.value as Session["permission_mode"] })} + title={t("composer.permissionMode")} + > + <option value="default">{t("permissionMode.default")}</option> + <option value="accept_edits">{t("permissionMode.accept_edits")}</option> + <option value="bypass">{t("permissionMode.bypass")}</option> + </select> + <ModelSelect value={session.model} onChange={(m) => onUpdate({ model: m })} title={t("composer.model")} /> + <label className="ghost" style={{ cursor: "pointer", padding: "3px 6px" }} title={t("composer.attach")}> + 📎 + <input type="file" accept="image/*" multiple hidden onChange={(e) => e.target.files && addFiles(e.target.files)} /> + </label> + <span className="grow" /> + {busy && ( + <button className="danger" onClick={onAbort} title="Esc"> + ■ {t("composer.stop")} + </button> + )} + <button className="primary" onClick={send} disabled={!text.trim() && images.length === 0}> + {busy ? t("composer.queue") : t("composer.send")} + </button> + </div> + </div> + </div> + ); +} diff --git a/web/src/components/Diff.tsx b/web/src/components/Diff.tsx new file mode 100644 index 0000000..67a27c4 --- /dev/null +++ b/web/src/components/Diff.tsx @@ -0,0 +1,19 @@ +export function Diff({ diff }: { diff: string }) { + const lines = diff.split("\n"); + return ( + <div className="diff"> + {lines.map((l, i) => { + let cls = ""; + if (l.startsWith("+++") || l.startsWith("---")) cls = "meta"; + else if (l.startsWith("@@")) cls = "hunk"; + else if (l.startsWith("+")) cls = "add"; + else if (l.startsWith("-")) cls = "del"; + return ( + <div key={i} className={cls}> + {l || " "} + </div> + ); + })} + </div> + ); +} diff --git a/web/src/components/Interaction.tsx b/web/src/components/Interaction.tsx new file mode 100644 index 0000000..694c977 --- /dev/null +++ b/web/src/components/Interaction.tsx @@ -0,0 +1,188 @@ +import { useState } from "react"; +import { post } from "../api"; +import { useT } from "../i18n"; +import { navigate } from "../router"; +import { useStore } from "../store"; +import type { PermissionRequest, QuestionRequest } from "../types"; +import { Diff } from "./Diff"; + +function SubagentHint({ sessionId, currentId }: { sessionId: string; currentId: string }) { + const t = useT(); + const title = useStore((s) => s.sessionById[sessionId]?.title); + if (sessionId === currentId) return null; + return ( + <div className="from"> + {t("interaction.fromSubagent")}{" "} + <a href={`#/s/${sessionId}`} onClick={(e) => (e.preventDefault(), navigate(`/s/${sessionId}`))}> + {title || sessionId.slice(-6)} + </a> + </div> + ); +} + +export function PermissionCard({ req, currentId }: { req: PermissionRequest; currentId: string }) { + const t = useT(); + const [feedback, setFeedback] = useState(""); + const [busy, setBusy] = useState(false); + + const reply = async (r: "once" | "always" | "reject") => { + setBusy(true); + try { + await post(`/permissions/${req.id}`, { reply: r, message: r === "reject" ? feedback : undefined }); + } finally { + setBusy(false); + } + }; + + const command: string | undefined = req.tool === "bash" ? req.input?.command : undefined; + const alwaysLabel = + req.tool === "bash" + ? t("permission.alwaysCommand", { prefix: (command ?? "").split(/\s+/).slice(0, 2).join(" ") }) + : t("permission.alwaysTool", { tool: req.tool }); + + return ( + <div className="card" role="alertdialog" aria-label={t("permission.title")}> + <h3> + 🔐 {t("permission.title")} <span className="chip mono">{req.tool}</span> + </h3> + <SubagentHint sessionId={req.session_id} currentId={currentId} /> + <div style={{ margin: "6px 0" }}>{req.title}</div> + {command && <pre className="mono" style={{ whiteSpace: "pre-wrap", margin: "6px 0" }}>$ {command}</pre>} + {req.diff ? ( + <Diff diff={req.diff} /> + ) : ( + !command && ( + <details> + <summary style={{ cursor: "pointer", color: "var(--muted)" }}>{t("tool.input")}</summary> + <pre className="mono" style={{ whiteSpace: "pre-wrap" }}> + {JSON.stringify(req.input, null, 2)} + </pre> + </details> + ) + )} + <input + style={{ width: "100%", marginTop: 8 }} + placeholder={t("permission.feedback")} + value={feedback} + onChange={(e) => setFeedback(e.target.value)} + onKeyDown={(e) => e.key === "Enter" && reply("reject")} + /> + <div className="actions"> + <button className="primary" disabled={busy} onClick={() => reply("once")} autoFocus> + {t("permission.allowOnce")} + </button> + <button disabled={busy} onClick={() => reply("always")}> + {alwaysLabel} + </button> + <button className="danger" disabled={busy} onClick={() => reply("reject")}> + {feedback ? t("permission.rejectWithFeedback") : t("permission.reject")} + </button> + </div> + </div> + ); +} + +const OTHER = "__other__"; + +export function QuestionCard({ req, currentId }: { req: QuestionRequest; currentId: string }) { + const t = useT(); + const [selected, setSelected] = useState<Record<number, string[]>>({}); + const [other, setOther] = useState<Record<number, string>>({}); + const [busy, setBusy] = useState(false); + + const toggle = (qi: number, label: string, multi: boolean) => { + setSelected((s) => { + const cur = s[qi] ?? []; + if (!multi) return { ...s, [qi]: [label] }; + return { ...s, [qi]: cur.includes(label) ? cur.filter((x) => x !== label) : [...cur, label] }; + }); + }; + + const answerFor = (qi: number): string | string[] | undefined => { + const q = req.questions[qi]; + const sel = (selected[qi] ?? []).map((l) => (l === OTHER ? other[qi]?.trim() ?? "" : l)).filter(Boolean); + if (q.options.length === 0) return other[qi]?.trim() || undefined; + if (sel.length === 0) return undefined; + return q.multi_select ? sel : sel[0]; + }; + + const complete = req.questions.every((_, i) => answerFor(i) !== undefined); + + const submit = async (dismiss = false) => { + setBusy(true); + try { + const answers = dismiss ? null : Object.fromEntries(req.questions.map((q, i) => [q.question, answerFor(i)])); + await post(`/questions/${req.id}`, { answers }); + } finally { + setBusy(false); + } + }; + + const source = req.source.startsWith("mcp:") ? t("question.fromMcp", { server: req.source.slice(4) }) : t("question.fromAgent"); + + return ( + <div className="card" role="dialog" aria-label={t("question.title")}> + <h3>❓ {t("question.title")}</h3> + <div className="from">{source}</div> + <SubagentHint sessionId={req.session_id} currentId={currentId} /> + {req.questions.map((q, qi) => ( + <div key={qi} style={{ marginTop: 10 }}> + {q.header && <span className="q-header">{q.header}</span>} + <div style={{ whiteSpace: "pre-wrap", color: "var(--fg0)" }}>{q.question}</div> + {q.options.length > 0 ? ( + <div className="q-options" role={q.multi_select ? "group" : "radiogroup"}> + {[...q.options, { label: OTHER, description: "" }].map((o) => { + const isSel = (selected[qi] ?? []).includes(o.label); + return ( + <div + key={o.label} + className={`q-option ${isSel ? "selected" : ""}`} + role={q.multi_select ? "checkbox" : "radio"} + aria-checked={isSel} + tabIndex={0} + onClick={() => toggle(qi, o.label, !!q.multi_select)} + onKeyDown={(e) => (e.key === " " || e.key === "Enter") && toggle(qi, o.label, !!q.multi_select)} + > + <span>{q.multi_select ? (isSel ? "☑" : "☐") : isSel ? "◉" : "○"}</span> + <div style={{ flex: 1 }}> + {o.label === OTHER ? ( + <input + style={{ width: "100%" }} + placeholder={t("question.other")} + value={other[qi] ?? ""} + onClick={(e) => e.stopPropagation()} + onFocus={() => !isSel && toggle(qi, OTHER, !!q.multi_select)} + onChange={(e) => setOther((s) => ({ ...s, [qi]: e.target.value }))} + /> + ) : ( + <> + <div>{o.label}</div> + {o.description && <div className="desc">{o.description}</div>} + </> + )} + </div> + </div> + ); + })} + </div> + ) : ( + <textarea + style={{ width: "100%", marginTop: 6 }} + placeholder={t("question.answer")} + value={other[qi] ?? ""} + onChange={(e) => setOther((s) => ({ ...s, [qi]: e.target.value }))} + /> + )} + </div> + ))} + <div className="actions"> + <button className="primary" disabled={busy || !complete} onClick={() => submit()}> + {t("question.submit")} + </button> + <button disabled={busy} onClick={() => submit(true)}> + {t("question.dismiss")} + </button> + </div> + </div> + ); +} diff --git a/web/src/components/Login.tsx b/web/src/components/Login.tsx new file mode 100644 index 0000000..5473948 --- /dev/null +++ b/web/src/components/Login.tsx @@ -0,0 +1,35 @@ +import { useState } from "react"; +import { get, setToken } from "../api"; +import { useT } from "../i18n"; + +export function Login({ onSuccess }: { onSuccess: () => void }) { + const t = useT(); + const [token, setValue] = useState(""); + const [error, setError] = useState(false); + + const submit = async (e: React.FormEvent) => { + e.preventDefault(); + setToken(token.trim()); + try { + await get("/sessions"); + onSuccess(); + } catch { + setError(true); + } + }; + + return ( + <div className="login"> + <form onSubmit={submit}> + <img src="/icon.svg" alt="" /> + <h2 style={{ margin: 0 }}>CodeCraft</h2> + <div style={{ color: "var(--fg3)" }}>{t("login.prompt")}</div> + <input type="password" autoFocus value={token} onChange={(e) => setValue(e.target.value)} placeholder={t("login.token")} /> + {error && <div style={{ color: "var(--red)" }}>{t("login.invalid")}</div>} + <button className="primary" type="submit" disabled={!token.trim()}> + {t("login.submit")} + </button> + </form> + </div> + ); +} diff --git a/web/src/components/Markdown.tsx b/web/src/components/Markdown.tsx new file mode 100644 index 0000000..b183973 --- /dev/null +++ b/web/src/components/Markdown.tsx @@ -0,0 +1,18 @@ +import { memo } from "react"; +import ReactMarkdown from "react-markdown"; +import remarkGfm from "remark-gfm"; +import rehypeHighlight from "rehype-highlight"; + +export const Markdown = memo(function Markdown({ text }: { text: string }) { + return ( + <div className="markdown"> + <ReactMarkdown + remarkPlugins={[remarkGfm]} + rehypePlugins={[[rehypeHighlight, { detect: false, ignoreMissing: true }]]} + components={{ a: (props) => <a {...props} target="_blank" rel="noreferrer" /> }} + > + {text} + </ReactMarkdown> + </div> + ); +}); diff --git a/web/src/components/ModelSelect.tsx b/web/src/components/ModelSelect.tsx new file mode 100644 index 0000000..f523562 --- /dev/null +++ b/web/src/components/ModelSelect.tsx @@ -0,0 +1,17 @@ +import { useModels, modelOptions } from "../hooks"; + +/** Model picker; keeps unknown current values selectable. */ +export function ModelSelect({ value, onChange, title }: { value: string; onChange: (v: string) => void; title?: string }) { + const options = modelOptions(useModels()); + const known = options.some((o) => o.value === value); + return ( + <select value={value} onChange={(e) => onChange(e.target.value)} title={title}> + {!known && value && <option value={value}>{value}</option>} + {options.map((o) => ( + <option key={o.value} value={o.value}> + {o.label} + </option> + ))} + </select> + ); +} diff --git a/web/src/components/NewSession.tsx b/web/src/components/NewSession.tsx new file mode 100644 index 0000000..3253605 --- /dev/null +++ b/web/src/components/NewSession.tsx @@ -0,0 +1,125 @@ +import { useEffect, useState } from "react"; +import { post } from "../api"; +import { useAgents, useFetch } from "../hooks"; +import { useT } from "../i18n"; +import { ModelSelect } from "./ModelSelect"; + +interface DirListing { + path: string; + parent: string | null; + workspace: string; + dirs: { name: string; path: string; git: boolean }[]; +} + +const LAST_DIR = "codecraft.lastDir"; + +export function NewSession({ onMenu, onCreated }: { onMenu: () => void; onCreated: (id: string) => void }) { + const t = useT(); + const [path, setPath] = useState<string>(localStorage.getItem(LAST_DIR) ?? ""); + const { data: listing, error: dirError } = useFetch<DirListing>(`/fs/dirs${path ? `?path=${encodeURIComponent(path)}` : ""}`); + const config = useFetch<{ default_model?: string }>("/config").data; + const [model, setModel] = useState(""); + const [agent, setAgent] = useState("build"); + const [prompt, setPrompt] = useState(""); + const [error, setError] = useState<string>(); + const [creating, setCreating] = useState(false); + const agents = useAgents(listing?.path).filter((a) => a.mode === "primary"); + + useEffect(() => { + if (!model && config?.default_model) setModel(config.default_model); + }, [config, model]); + + // A remembered directory that vanished: fall back to the workspace root. + useEffect(() => { + if (dirError && path) setPath(""); + }, [dirError, path]); + + const create = async () => { + if (!listing) return; + setCreating(true); + setError(undefined); + try { + localStorage.setItem(LAST_DIR, listing.path); + const s = await post<{ id: string }>("/sessions", { cwd: listing.path, model: model || undefined, agent }); + if (prompt.trim()) await post(`/sessions/${s.id}/prompt`, { text: prompt.trim() }); + onCreated(s.id); + } catch (e: any) { + setError(e.message); + setCreating(false); + } + }; + + const rel = listing ? listing.path.slice(listing.workspace.length) || "/" : ""; + + return ( + <> + <div className="topbar"> + <button className="ghost menu-btn" onClick={onMenu} aria-label={t("nav.menu")}> + ☰ + </button> + <div className="grow"> + <h1>{t("new.title")}</h1> + </div> + </div> + <div className="page"> + <div className="page-inner" style={{ maxWidth: 760 }}> + <div className="panel"> + <h3>{t("new.directory")}</h3> + <div className="row" style={{ marginBottom: 8 }}> + <code className="grow" style={{ flex: 1 }}> + {rel} + </code> + {listing?.parent && ( + <button className="small" onClick={() => setPath(listing.parent!)}> + ↑ {t("new.up")} + </button> + )} + </div> + <div className="dir-list"> + {listing?.dirs.length === 0 && <div className="empty" style={{ padding: 16 }}>{t("new.noSubdirs")}</div>} + {listing?.dirs.map((d) => ( + <button key={d.path} onClick={() => setPath(d.path)}> + <span>📁</span> + <span style={{ flex: 1 }}>{d.name}</span> + {d.git && <span className="chip">git</span>} + </button> + ))} + </div> + </div> + + <div className="panel"> + <div className="form"> + <label>{t("new.model")}</label> + <ModelSelect value={model} onChange={setModel} /> + <label>{t("new.mode")}</label> + <select value={agent} onChange={(e) => setAgent(e.target.value)}> + {agents.map((a) => ( + <option key={a.name} value={a.name}> + {a.name} – {a.description} + </option> + ))} + </select> + </div> + </div> + + <div className="panel"> + <h3>{t("new.firstPrompt")}</h3> + <textarea + style={{ width: "100%", minHeight: 110 }} + value={prompt} + placeholder={t("composer.placeholder")} + onChange={(e) => setPrompt(e.target.value)} + onKeyDown={(e) => { + if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) void create(); + }} + /> + </div> + {error && <div className="notice err">{error}</div>} + <button className="primary" disabled={!listing || creating} onClick={create}> + {t("new.start", { dir: rel })} + </button> + </div> + </div> + </> + ); +} diff --git a/web/src/components/Settings.tsx b/web/src/components/Settings.tsx new file mode 100644 index 0000000..c37bbc8 --- /dev/null +++ b/web/src/components/Settings.tsx @@ -0,0 +1,729 @@ +import { useEffect, useState } from "react"; +import { get, patch as apiPatch, post, put } from "../api"; +import { useFetch, useModels } from "../hooks"; +import { getLang, languages, setLang, useT, type Key } from "../i18n"; +import { navigate } from "../router"; +import { useStore } from "../store"; +import { applyTheme, getTheme, type Theme } from "../theme"; +import { ModelSelect } from "./ModelSelect"; + +type Json = any; +interface ConfigResponse { + config: Json; + workspace: string; + currency: string; +} +type Patch = { path: string[]; value: unknown }; + +const MASK = "••••••••"; + +async function savePatches(patches: Patch[]) { + await apiPatch("/config", { patches }); +} + +function useSaver(reload: () => void) { + const [notice, setNotice] = useState<{ ok: boolean; text: string }>(); + const t = useT(); + const run = async (fn: () => Promise<unknown>) => { + try { + await fn(); + setNotice({ ok: true, text: t("settings.saved") }); + reload(); + } catch (e: any) { + setNotice({ ok: false, text: e.message }); + } + }; + const view = notice && <div className={`notice ${notice.ok ? "ok" : "err"}`}>{notice.text}</div>; + return { run, view }; +} + +// --- general ---------------------------------------------------------------- + +function General({ cfg, reload }: { cfg: ConfigResponse; reload: () => void }) { + const t = useT(); + const s = cfg.config.server; + const c = cfg.config.craft; + const [form, setForm] = useState({ + default_model: s.default_model ?? "", + small_model: s.small_model ?? "", + currency: s.currency ?? "USD", + auto_compact_threshold: s.auto_compact_threshold ?? 0.85, + clean_room: c.clean_room ?? true, + chromium: c.chromium ?? "chromium", + widths: (c.widths ?? []).join(", "), + }); + const [theme, setThemeState] = useState<Theme>(getTheme()); + const [notif, setNotif] = useState(typeof Notification !== "undefined" ? Notification.permission : "denied"); + const { run, view } = useSaver(reload); + + const save = () => + run(() => + savePatches([ + { path: ["server", "default_model"], value: form.default_model }, + { path: ["server", "small_model"], value: form.small_model }, + { path: ["server", "currency"], value: form.currency }, + { path: ["server", "auto_compact_threshold"], value: Number(form.auto_compact_threshold) }, + { path: ["craft", "clean_room"], value: form.clean_room }, + { path: ["craft", "chromium"], value: form.chromium }, + { path: ["craft", "widths"], value: String(form.widths).split(/[\s,]+/).filter(Boolean).map(Number) }, + ]), + ); + + return ( + <> + <div className="panel"> + <h3>{t("settings.interface")}</h3> + <div className="form"> + <label>{t("settings.language")}</label> + <select value={getLang()} onChange={(e) => setLang(e.target.value)}> + {Object.entries(languages).map(([k, v]) => ( + <option key={k} value={k}> + {v.name} + </option> + ))} + </select> + <label>{t("settings.theme")}</label> + <select + value={theme} + onChange={(e) => { + const v = e.target.value as Theme; + setThemeState(v); + applyTheme(v); + }} + > + <option value="system">{t("settings.themeSystem")}</option> + <option value="dark">{t("settings.themeDark")}</option> + <option value="light">{t("settings.themeLight")}</option> + </select> + <label>{t("settings.notifications")}</label> + <div> + {notif === "granted" ? ( + <span className="chip">{t("settings.notificationsOn")}</span> + ) : ( + <button className="small" onClick={() => Notification.requestPermission().then(setNotif)} disabled={notif === "denied"}> + {t("settings.notificationsEnable")} + </button> + )} + </div> + <div className="hint">{t("settings.notificationsHint")}</div> + </div> + </div> + <div className="panel"> + <h3>{t("settings.server")}</h3> + <div className="form"> + <label>{t("settings.workspace")}</label> + <code>{cfg.workspace}</code> + <label>{t("settings.defaultModel")}</label> + <ModelSelect value={form.default_model} onChange={(v) => setForm({ ...form, default_model: v })} /> + <label>{t("settings.smallModel")}</label> + <ModelSelect value={form.small_model} onChange={(v) => setForm({ ...form, small_model: v })} /> + <div className="hint">{t("settings.smallModelHint")}</div> + <label>{t("settings.currency")}</label> + <input value={form.currency} onChange={(e) => setForm({ ...form, currency: e.target.value.toUpperCase() })} maxLength={3} /> + <label>{t("settings.autoCompact")}</label> + <input type="number" min={0} max={1} step={0.05} value={form.auto_compact_threshold} onChange={(e) => setForm({ ...form, auto_compact_threshold: e.target.value })} /> + <div className="hint">{t("settings.autoCompactHint")}</div> + </div> + </div> + <div className="panel"> + <h3>{t("settings.craft")}</h3> + <div className="form"> + <label>{t("settings.cleanRoom")}</label> + <input type="checkbox" checked={form.clean_room} onChange={(e) => setForm({ ...form, clean_room: e.target.checked })} style={{ justifySelf: "start" }} /> + <div className="hint">{t("settings.cleanRoomHint")}</div> + <label>{t("settings.chromium")}</label> + <input value={form.chromium} onChange={(e) => setForm({ ...form, chromium: e.target.value })} /> + <label>{t("settings.widths")}</label> + <input value={form.widths} onChange={(e) => setForm({ ...form, widths: e.target.value })} /> + </div> + </div> + {view} + <button className="primary" onClick={save}> + {t("common.save")} + </button> + </> + ); +} + +// --- providers -------------------------------------------------------------- + +interface ModelRow { + id: string; + name?: string; + context?: number; + max_output?: number; + reasoning?: boolean; + vision?: boolean; + effort?: string; + input_price?: number; + output_price?: number; + cache_read_price?: number; + cache_write_price?: number; +} + +const PRESETS: Record<string, { kind: string; base_url: string; api_key: string; auth_prefix?: string }> = { + anthropic: { kind: "anthropic", base_url: "https://api.anthropic.com/v1", api_key: "${ANTHROPIC_API_KEY}" }, + gemini: { kind: "openai", base_url: "https://generativelanguage.googleapis.com/v1beta/openai", api_key: "${GEMINI_API_KEY}" }, + "opencode-go": { kind: "openai", base_url: "https://opencode.ai/inference/go/openai/v1", api_key: "${OPENCODE_API_KEY}" }, + fal: { kind: "openai", base_url: "https://fal.run/openrouter/router/openai/v1", api_key: "${FAL_KEY}", auth_prefix: "Key " }, + openrouter: { kind: "openai", base_url: "https://openrouter.ai/api/v1", api_key: "${OPENROUTER_API_KEY}" }, + ollama: { kind: "openai", base_url: "http://host.docker.internal:11434/v1", api_key: "" }, + custom: { kind: "openai", base_url: "http://", api_key: "" }, +}; + +function normalizeModels(models: Json[]): ModelRow[] { + return (models ?? []).map((m) => (typeof m === "string" ? { id: m } : { ...m })); +} + +function cleanModel(m: ModelRow) { + const out: Record<string, unknown> = {}; + for (const [k, v] of Object.entries(m)) { + if (v === undefined || v === "" || (typeof v === "number" && Number.isNaN(v))) continue; + if (v === false && (k === "reasoning" || k === "vision")) continue; + out[k] = v; + } + return out; +} + +function ProviderEditor({ name, p, reload }: { name: string; p: Json; reload: () => void }) { + const t = useT(); + const [form, setForm] = useState({ ...p, api_key: p.api_key === MASK ? "" : p.api_key }); + const [models, setModels] = useState<ModelRow[]>(normalizeModels(p.models)); + const [open, setOpen] = useState(false); + const discovered = useModels().find((x) => x.provider === name)?.models ?? []; + const { run, view } = useSaver(reload); + + const num = (v: string) => (v === "" ? undefined : Number(v)); + const setModel = (i: number, patch: Partial<ModelRow>) => setModels((ms) => ms.map((m, j) => (j === i ? { ...m, ...patch } : m))); + + const save = () => + run(() => { + const patches: Patch[] = [ + { path: ["providers", name, "kind"], value: form.kind }, + { path: ["providers", name, "base_url"], value: form.base_url }, + { path: ["providers", name, "enabled"], value: !!form.enabled }, + { path: ["providers", name, "models"], value: models.filter((m) => m.id.trim()).map(cleanModel) }, + { path: ["providers", name, "auth_prefix"], value: form.auth_prefix ? form.auth_prefix : null }, + ]; + // Empty key field = keep the stored (masked) key. + if (form.api_key !== "" || p.api_key !== MASK) patches.push({ path: ["providers", name, "api_key"], value: form.api_key }); + return savePatches(patches); + }); + + const remove = () => { + if (!confirm(t("settings.deleteProviderConfirm", { name }))) return; + void run(() => savePatches([{ path: ["providers", name], value: null }])); + }; + + const addDiscovered = () => { + const have = new Set(models.map((m) => m.id)); + setModels([...models, ...discovered.filter((d) => !have.has(d.id)).map((d) => ({ id: d.id, context: d.context }))]); + }; + + return ( + <div className="panel"> + <h3> + <input type="checkbox" checked={!!form.enabled} onChange={(e) => setForm({ ...form, enabled: e.target.checked })} title={t("settings.enabled")} /> + {name} + <span className="chip">{form.kind}</span> + <span className="chip">{t("settings.modelCount", { n: models.length || discovered.length })}</span> + <span className="spacer" /> + <button className="small" onClick={() => setOpen(!open)}> + {open ? t("common.collapse") : t("common.edit")} + </button> + </h3> + {open && ( + <> + <div className="form"> + <label>{t("settings.kind")}</label> + <select value={form.kind} onChange={(e) => setForm({ ...form, kind: e.target.value })}> + <option value="anthropic">Anthropic Messages API</option> + <option value="openai">OpenAI-compatible</option> + </select> + <label>{t("settings.baseUrl")}</label> + <input value={form.base_url} onChange={(e) => setForm({ ...form, base_url: e.target.value })} /> + <label>{t("settings.apiKey")}</label> + <input + type="password" + value={form.api_key} + placeholder={p.api_key === MASK ? t("settings.apiKeyStored") : "${ENV_VAR}"} + onChange={(e) => setForm({ ...form, api_key: e.target.value })} + /> + <div className="hint">{t("settings.apiKeyHint")}</div> + <label>{t("settings.authPrefix")}</label> + <input value={form.auth_prefix ?? ""} placeholder={form.kind === "openai" ? "Bearer " : ""} onChange={(e) => setForm({ ...form, auth_prefix: e.target.value })} /> + </div> + <h3 style={{ marginTop: 16 }}> + {t("settings.models")} + <span className="spacer" /> + {discovered.length > 0 && ( + <button className="small" onClick={addDiscovered}> + {t("settings.addDiscovered", { n: discovered.length })} + </button> + )} + <button className="small" onClick={() => setModels([...models, { id: "" }])}> + + {t("settings.addModel")} + </button> + </h3> + <div className="hint" style={{ marginBottom: 6, fontSize: 12, color: "var(--muted)" }}> + {t("settings.pricesHint")} + </div> + <div style={{ overflowX: "auto" }}> + <table className="grid"> + <thead> + <tr> + <th>ID</th> + <th>{t("settings.context")}</th> + <th>{t("settings.maxOutput")}</th> + <th title={t("settings.reasoning")}>🧠</th> + <th title={t("settings.vision")}>👁</th> + <th>{t("settings.effort")}</th> + <th>{t("settings.priceIn")}</th> + <th>{t("settings.priceOut")}</th> + <th>{t("settings.priceCacheRead")}</th> + <th>{t("settings.priceCacheWrite")}</th> + <th /> + </tr> + </thead> + <tbody> + {models.map((m, i) => ( + <tr key={i}> + <td> + <input value={m.id} onChange={(e) => setModel(i, { id: e.target.value })} style={{ minWidth: 160 }} /> + </td> + <td> + <input type="number" value={m.context ?? ""} onChange={(e) => setModel(i, { context: num(e.target.value) })} /> + </td> + <td> + <input type="number" value={m.max_output ?? ""} onChange={(e) => setModel(i, { max_output: num(e.target.value) })} /> + </td> + <td> + <input type="checkbox" checked={!!m.reasoning} onChange={(e) => setModel(i, { reasoning: e.target.checked })} /> + </td> + <td> + <input type="checkbox" checked={!!m.vision} onChange={(e) => setModel(i, { vision: e.target.checked })} /> + </td> + <td> + <select value={m.effort ?? ""} onChange={(e) => setModel(i, { effort: e.target.value || undefined })}> + <option value="">–</option> + {["low", "medium", "high", "xhigh", "max"].map((x) => ( + <option key={x}>{x}</option> + ))} + </select> + </td> + {(["input_price", "output_price", "cache_read_price", "cache_write_price"] as const).map((k) => ( + <td key={k}> + <input type="number" step="0.01" value={m[k] ?? ""} onChange={(e) => setModel(i, { [k]: num(e.target.value) })} /> + </td> + ))} + <td> + <button className="small ghost danger" onClick={() => setModels(models.filter((_, j) => j !== i))} aria-label={t("common.remove")}> + × + </button> + </td> + </tr> + ))} + </tbody> + </table> + </div> + {models.length === 0 && <div className="hint" style={{ color: "var(--muted)", fontSize: 12 }}>{t("settings.modelsEmptyHint")}</div>} + {view} + <div className="row" style={{ marginTop: 12 }}> + <button className="primary" onClick={save}> + {t("common.save")} + </button> + <span className="spacer" /> + <button className="danger" onClick={remove}> + {t("common.delete")} + </button> + </div> + </> + )} + </div> + ); +} + +function Providers({ cfg, reload }: { cfg: ConfigResponse; reload: () => void }) { + const t = useT(); + const [name, setName] = useState(""); + const [preset, setPreset] = useState("anthropic"); + const { run, view } = useSaver(reload); + const providers = cfg.config.providers ?? {}; + + const add = () => { + const n = name.trim() || preset; + if (!/^[a-zA-Z0-9_-]+$/.test(n)) return alert(t("settings.invalidName")); + const p = PRESETS[preset]; + const value: Record<string, unknown> = { kind: p.kind, base_url: p.base_url, api_key: p.api_key, enabled: true, models: [] }; + if (p.auth_prefix) value.auth_prefix = p.auth_prefix; + void run(() => savePatches([{ path: ["providers", n], value }])); + setName(""); + }; + + return ( + <> + <div className="row" style={{ marginBottom: 12 }}> + <button onClick={() => post("/providers/reload").then(reload)}>{t("settings.reloadProviders")}</button> + </div> + {Object.entries(providers).map(([n, p]) => ( + <ProviderEditor key={n + JSON.stringify(p)} name={n} p={p} reload={reload} /> + ))} + <div className="panel"> + <h3>{t("settings.addProvider")}</h3> + <div className="row"> + <select value={preset} onChange={(e) => setPreset(e.target.value)}> + {Object.keys(PRESETS).map((k) => ( + <option key={k}>{k}</option> + ))} + </select> + <input placeholder={t("settings.providerName")} value={name} onChange={(e) => setName(e.target.value)} /> + <button className="primary" onClick={add}> + + {t("common.add")} + </button> + </div> + {view} + </div> + </> + ); +} + +// --- MCP -------------------------------------------------------------------- + +function linesToMap(text: string, sep: string): Record<string, string> { + const out: Record<string, string> = {}; + for (const line of text.split("\n")) { + const i = line.indexOf(sep); + if (i > 0) out[line.slice(0, i).trim()] = line.slice(i + sep.length).trim(); + } + return out; +} + +function mapToLines(m: Record<string, string> | undefined, sep: string) { + return Object.entries(m ?? {}) + .map(([k, v]) => `${k}${sep}${v}`) + .join("\n"); +} + +function McpEditor({ name, m, reload, isNew }: { name: string; m: Json; reload: () => void; isNew?: boolean }) { + const t = useT(); + const status = useStore((s) => s.mcp[name]); + const [form, setForm] = useState({ + name, + type: m.type ?? "stdio", + command: m.command ?? "", + args: (m.args ?? []).join("\n"), + env: mapToLines(m.env, "="), + url: m.url ?? "", + headers: mapToLines(m.headers, ": "), + enabled: m.enabled ?? true, + }); + const [open, setOpen] = useState(!!isNew); + const { run, view } = useSaver(reload); + + const save = () => { + const n = form.name.trim(); + if (!/^[a-zA-Z0-9_-]+$/.test(n)) return alert(t("settings.invalidName")); + const value: Record<string, unknown> = { type: form.type, enabled: form.enabled }; + if (form.type === "stdio") { + value.command = form.command; + value.args = form.args.split("\n").map((s: string) => s.trim()).filter(Boolean); + value.env = linesToMap(form.env, "="); + } else { + value.url = form.url; + value.headers = linesToMap(form.headers, ":"); + } + return run(async () => { + const patches: Patch[] = []; + if (!isNew && n !== name) patches.push({ path: ["mcp", name], value: null }); + patches.push({ path: ["mcp", n], value }); + await savePatches(patches); + }); + }; + + const st = status?.status; + const stateLabel = st ? t(`mcp.state.${st.state}` as Key) : isNew ? "" : t("mcp.state.unknown"); + + return ( + <div className="panel"> + <h3> + {isNew ? t("settings.addMcp") : name} + {!isNew && <span className={`chip ${st?.state === "failed" ? "warn" : ""}`}>{stateLabel}</span>} + {st?.state === "connected" && <span className="chip">{t("mcp.tools", { n: st.tools ?? 0 })}</span>} + <span className="spacer" /> + {!isNew && ( + <button className="small" onClick={() => setOpen(!open)}> + {open ? t("common.collapse") : t("common.edit")} + </button> + )} + </h3> + {st?.state === "failed" && <div className="notice err">{st.error}</div>} + {open && ( + <> + <div className="form"> + <label>{t("settings.name")}</label> + <input value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} /> + <label>{t("settings.kind")}</label> + <select value={form.type} onChange={(e) => setForm({ ...form, type: e.target.value })}> + <option value="stdio">stdio</option> + <option value="http">Streamable HTTP</option> + </select> + {form.type === "stdio" ? ( + <> + <label>{t("mcp.command")}</label> + <input value={form.command} onChange={(e) => setForm({ ...form, command: e.target.value })} placeholder="npx" /> + <label>{t("mcp.args")}</label> + <textarea rows={3} value={form.args} onChange={(e) => setForm({ ...form, args: e.target.value })} className="mono" /> + <label>{t("mcp.env")}</label> + <textarea rows={2} value={form.env} onChange={(e) => setForm({ ...form, env: e.target.value })} className="mono" placeholder="KEY=${SECRET}" /> + </> + ) : ( + <> + <label>URL</label> + <input value={form.url} onChange={(e) => setForm({ ...form, url: e.target.value })} placeholder="https://…/mcp" /> + <label>{t("mcp.headers")}</label> + <textarea rows={2} value={form.headers} onChange={(e) => setForm({ ...form, headers: e.target.value })} className="mono" placeholder="Authorization: Bearer ${TOKEN}" /> + </> + )} + <label>{t("settings.enabled")}</label> + <input type="checkbox" checked={form.enabled} onChange={(e) => setForm({ ...form, enabled: e.target.checked })} style={{ justifySelf: "start" }} /> + </div> + {status?.tools?.length ? ( + <details style={{ marginTop: 10 }}> + <summary style={{ cursor: "pointer" }}>{t("mcp.tools", { n: status.tools.length })}</summary> + <ul style={{ fontSize: 12.5 }}> + {status.tools.map((tool) => ( + <li key={tool.name}> + <code>{tool.name}</code> – {tool.description} + </li> + ))} + </ul> + </details> + ) : null} + {view} + <div className="row" style={{ marginTop: 12 }}> + <button className="primary" onClick={save}> + {t("common.save")} + </button> + <span className="spacer" /> + {!isNew && ( + <button className="danger" onClick={() => confirm(t("settings.deleteMcpConfirm", { name })) && run(() => savePatches([{ path: ["mcp", name], value: null }]))}> + {t("common.delete")} + </button> + )} + </div> + </> + )} + </div> + ); +} + +function Mcp({ cfg, reload }: { cfg: ConfigResponse; reload: () => void }) { + const t = useT(); + const servers = cfg.config.mcp ?? {}; + return ( + <> + <div className="row" style={{ marginBottom: 12 }}> + <button onClick={() => post("/mcp/reload")}>{t("mcp.reconnect")}</button> + </div> + {Object.keys(servers).length === 0 && <div className="notice">{t("mcp.none")}</div>} + {Object.entries(servers).map(([n, m]) => ( + <McpEditor key={n + JSON.stringify(m)} name={n} m={m} reload={reload} /> + ))} + <McpEditor key={`new-${Object.keys(servers).length}`} name="" m={{}} reload={reload} isNew /> + </> + ); +} + +// --- permissions ------------------------------------------------------------ + +function RuleTable({ rules, setRules, choices, keyLabel }: { rules: [string, string][]; setRules: (r: [string, string][]) => void; choices: string[]; keyLabel: string }) { + const t = useT(); + return ( + <table className="grid"> + <thead> + <tr> + <th>{keyLabel}</th> + <th>{t("permissions.rule")}</th> + <th /> + </tr> + </thead> + <tbody> + {rules.map(([k, v], i) => ( + <tr key={i}> + <td> + <input className="mono" value={k} onChange={(e) => setRules(rules.map((r, j) => (j === i ? [e.target.value, r[1]] : r)))} /> + </td> + <td> + <select value={v} onChange={(e) => setRules(rules.map((r, j) => (j === i ? [r[0], e.target.value] : r)))}> + {choices.map((c) => ( + <option key={c} value={c}> + {t(`permissions.${c}` as Key)} + </option> + ))} + </select> + </td> + <td> + <button className="small ghost danger" onClick={() => setRules(rules.filter((_, j) => j !== i))} aria-label={t("common.remove")}> + × + </button> + </td> + </tr> + ))} + <tr> + <td colSpan={3}> + <button className="small" onClick={() => setRules([...rules, ["", choices[0]]])}> + + {t("common.add")} + </button> + </td> + </tr> + </tbody> + </table> + ); +} + +function Permissions({ cfg, reload }: { cfg: ConfigResponse; reload: () => void }) { + const t = useT(); + const { bash_rules = {}, ...tools } = cfg.config.permissions ?? {}; + const [toolRules, setToolRules] = useState<[string, string][]>(Object.entries(tools) as [string, string][]); + const [bashRules, setBashRules] = useState<[string, string][]>(Object.entries(bash_rules) as [string, string][]); + const { run, view } = useSaver(reload); + + const save = () => + run(() => { + const patches: Patch[] = []; + for (const k of Object.keys(tools)) if (!toolRules.some(([n]) => n === k)) patches.push({ path: ["permissions", k], value: null }); + for (const [k, v] of toolRules) if (k.trim()) patches.push({ path: ["permissions", k.trim()], value: v }); + for (const k of Object.keys(bash_rules)) if (!bashRules.some(([n]) => n === k)) patches.push({ path: ["permissions", "bash_rules", k], value: null }); + for (const [k, v] of bashRules) if (k.trim()) patches.push({ path: ["permissions", "bash_rules", k.trim()], value: v }); + return savePatches(patches); + }); + + return ( + <> + <div className="notice">{t("permissions.intro")}</div> + <div className="two-col"> + <div className="panel"> + <h3>{t("permissions.tools")}</h3> + <RuleTable rules={toolRules} setRules={setToolRules} choices={["allow", "ask", "deny"]} keyLabel={t("permissions.tool")} /> + </div> + <div className="panel"> + <h3>{t("permissions.bash")}</h3> + <div style={{ fontSize: 12, color: "var(--muted)", marginBottom: 6 }}>{t("permissions.bashHint")}</div> + <RuleTable rules={bashRules} setRules={setBashRules} choices={["allow", "deny"]} keyLabel={t("permissions.pattern")} /> + </div> + </div> + {view} + <button className="primary" onClick={save}> + {t("common.save")} + </button> + </> + ); +} + +// --- agents (read-only overview) ---------------------------------------------- + +function Agents() { + const t = useT(); + const agents = useFetch<Json[]>("/agents").data ?? []; + const cmds = useFetch<{ commands: Json[]; skills: Json[] }>("/commands").data; + return ( + <> + <div className="notice">{t("agents.intro")}</div> + <div className="panel"> + <h3>{t("agents.title")}</h3> + <table className="grid"> + <tbody> + {agents.map((a) => ( + <tr key={a.name}> + <td> + <code>{a.name}</code> + </td> + <td> + <span className="chip">{a.mode}</span> {a.read_only && <span className="chip">{t("agents.readOnly")}</span>} + </td> + <td>{a.description}</td> + </tr> + ))} + </tbody> + </table> + </div> + <div className="two-col"> + <div className="panel"> + <h3>{t("agents.commands")}</h3> + {cmds?.commands.length ? cmds.commands.map((c) => <div key={c.name}><code>/{c.name}</code> – {c.description}</div>) : <div className="empty">–</div>} + </div> + <div className="panel"> + <h3>{t("agents.skills")}</h3> + {cmds?.skills.length ? cmds.skills.map((s) => <div key={s.name}><code>{s.name}</code> – {s.description}</div>) : <div className="empty">–</div>} + </div> + </div> + </> + ); +} + +// --- raw ---------------------------------------------------------------------- + +function Raw({ reload }: { reload: () => void }) { + const t = useT(); + const [text, setText] = useState<string>(); + const { run, view } = useSaver(reload); + useEffect(() => { + get<{ text: string }>("/config/raw").then((r) => setText(r.text)); + }, []); + if (text === undefined) return <div className="empty">{t("common.loading")}</div>; + return ( + <> + <div className="notice">{t("settings.rawHint")}</div> + <textarea className="raw-editor" spellCheck={false} value={text} onChange={(e) => setText(e.target.value)} /> + {view} + <div className="row" style={{ marginTop: 8 }}> + <button className="primary" onClick={() => run(() => put("/config/raw", { text }))}> + {t("common.save")} + </button> + <button onClick={() => get<{ text: string }>("/config/raw").then((r) => setText(r.text))}>{t("settings.revert")}</button> + </div> + </> + ); +} + +// --- page ------------------------------------------------------------------- + +const TABS = ["general", "providers", "mcp", "permissions", "agents", "raw"] as const; + +export function Settings({ tab, onMenu }: { tab?: string; onMenu: () => void }) { + const t = useT(); + const active = (TABS as readonly string[]).includes(tab ?? "") ? tab! : "general"; + const { data: cfg, error, reload } = useFetch<ConfigResponse>("/config"); + + return ( + <> + <div className="topbar"> + <button className="ghost menu-btn" onClick={onMenu} aria-label={t("nav.menu")}> + ☰ + </button> + <div className="grow"> + <h1>{t("nav.settings")}</h1> + </div> + </div> + <div className="page"> + <div className="page-inner"> + <div className="tabs" role="tablist"> + {TABS.map((x) => ( + <button key={x} role="tab" aria-selected={active === x} className={active === x ? "active" : ""} onClick={() => navigate(`/settings/${x}`)}> + {t(`settings.tab.${x}` as Key)} + </button> + ))} + </div> + {error && <div className="notice err">{error}</div>} + {!cfg && !error && <div className="empty">{t("common.loading")}</div>} + {cfg && active === "general" && <General key={JSON.stringify(cfg.config.server)} cfg={cfg} reload={reload} />} + {cfg && active === "providers" && <Providers cfg={cfg} reload={reload} />} + {cfg && active === "mcp" && <Mcp cfg={cfg} reload={reload} />} + {cfg && active === "permissions" && <Permissions key={JSON.stringify(cfg.config.permissions)} cfg={cfg} reload={reload} />} + {active === "agents" && <Agents />} + {active === "raw" && <Raw reload={reload} />} + </div> + </div> + </> + ); +} diff --git a/web/src/components/Sidebar.tsx b/web/src/components/Sidebar.tsx new file mode 100644 index 0000000..335c1b8 --- /dev/null +++ b/web/src/components/Sidebar.tsx @@ -0,0 +1,93 @@ +import { useMemo } from "react"; +import { fmtRelative, useT, type Key } from "../i18n"; +import { navigate } from "../router"; +import { useStore } from "../store"; +import type { Session } from "../types"; + +function basename(p: string) { + return p.split("/").filter(Boolean).pop() ?? p; +} + +function groupKey(ms: number): Key { + const day = 86400000; + const startOfToday = new Date().setHours(0, 0, 0, 0); + if (ms >= startOfToday) return "sidebar.today"; + if (ms >= startOfToday - day) return "sidebar.yesterday"; + if (ms >= startOfToday - 7 * day) return "sidebar.week"; + return "sidebar.older"; +} + +export function Sidebar({ open, activeId, section }: { open: boolean; activeId?: string; section: string }) { + const t = useT(); + const sessions = useStore((s) => s.sessions); + const busy = useStore((s) => s.busy); + const connected = useStore((s) => s.connected); + const permissions = useStore((s) => s.permissions); + const questions = useStore((s) => s.questions); + + const attention = useMemo(() => { + const ids = new Set<string>(); + for (const p of permissions) ids.add(p.root_session_id ?? p.session_id); + for (const q of questions) ids.add(q.root_session_id ?? q.session_id); + return ids; + }, [permissions, questions]); + + const groups = useMemo(() => { + const out: { key: Key; items: Session[] }[] = []; + for (const s of sessions) { + const key = groupKey(s.updated_at); + const g = out.find((x) => x.key === key); + if (g) g.items.push(s); + else out.push({ key, items: [s] }); + } + return out; + }, [sessions]); + + return ( + <aside className={`sidebar ${open ? "open" : ""}`}> + <div className="sidebar-head"> + <div className="logo"> + <img src="/icon.svg" alt="" /> + CodeCraft + </div> + <span className={`conn-dot ${connected ? "on" : ""}`} title={connected ? t("sidebar.connected") : t("sidebar.disconnected")} /> + </div> + <div style={{ padding: "0 12px 8px" }}> + <button className="primary" style={{ width: "100%" }} onClick={() => navigate("/new")}> + + {t("sidebar.newSession")} + </button> + </div> + <nav className="session-list"> + {sessions.length === 0 && <div className="empty">{t("sidebar.noSessions")}</div>} + {groups.map((g) => ( + <div key={g.key}> + <div className="session-group">{t(g.key)}</div> + {g.items.map((s) => ( + <button + key={s.id} + className={`session-item ${s.id === activeId ? "active" : ""}`} + onClick={() => navigate(`/s/${s.id}`)} + > + <div className="title"> + {attention.has(s.id) ? <i className="attn-dot" title={t("sidebar.needsInput")} /> : busy[s.id] && <i className="busy-dot" />} + <span>{s.title || t("session.untitled")}</span> + </div> + <div className="sub"> + {basename(s.cwd)} · {s.agent} · {fmtRelative(s.updated_at)} + </div> + </button> + ))} + </div> + ))} + </nav> + <div className="sidebar-foot"> + <button className={`ghost ${section === "stats" ? "active" : ""}`} onClick={() => navigate("/stats")}> + {t("nav.stats")} + </button> + <button className={`ghost ${section === "settings" ? "active" : ""}`} onClick={() => navigate("/settings")}> + {t("nav.settings")} + </button> + </div> + </aside> + ); +} diff --git a/web/src/components/Stats.tsx b/web/src/components/Stats.tsx new file mode 100644 index 0000000..62d6142 --- /dev/null +++ b/web/src/components/Stats.tsx @@ -0,0 +1,251 @@ +import { useMemo, useState } from "react"; +import { useFetch } from "../hooks"; +import { fmtCompact, fmtCost, fmtDate, fmtNumber, fmtPercent, getLang, useT, weekdayNames, type Key } from "../i18n"; +import { navigate } from "../router"; +import type { Aggregate } from "../types"; +import { Heatmap, Legend, SERIES, StackedBars, type Series } from "./Charts"; + +type Row<K extends string> = Aggregate & Record<K, string>; + +interface StatsData { + total: Aggregate; + by_day: Row<"day">[]; + by_day_model: { day: string; model: string; cost: number; input_tokens: number; output_tokens: number }[]; + by_model: Row<"model">[]; + by_provider: Row<"provider">[]; + by_agent: Row<"agent">[]; + heatmap: (Aggregate & { slot: number })[]; + top_sessions: (Aggregate & { session_id: string; title: string })[]; + currency: string; + from: number; + to: number; +} + +const RANGES: { key: string; days: number; label: Key }[] = [ + { key: "7", days: 7, label: "stats.range7" }, + { key: "30", days: 30, label: "stats.range30" }, + { key: "90", days: 90, label: "stats.range90" }, + { key: "365", days: 365, label: "stats.range365" }, + { key: "all", days: 0, label: "stats.rangeAll" }, +]; + +type HeatMetric = "requests" | "tokens" | "cost"; + +function dayKey(ms: number) { + const d = new Date(ms); + return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`; +} + +/** All days between from and to (local time), so empty days show as gaps. */ +function dayRange(fromMs: number, toMs: number, firstDataDay?: string): string[] { + const start = new Date(firstDataDay && fromMs === 0 ? `${firstDataDay}T00:00:00` : fromMs); + start.setHours(0, 0, 0, 0); + const out: string[] = []; + for (let d = new Date(start); d.getTime() <= toMs && out.length < 800; d.setDate(d.getDate() + 1)) out.push(dayKey(d.getTime())); + return out; +} + +function Kpi({ label, value, sub }: { label: string; value: string; sub?: string }) { + return ( + <div className="kpi"> + <div className="k-label">{label}</div> + <div className="k-value">{value}</div> + {sub && <div className="k-sub">{sub}</div>} + </div> + ); +} + +function AggTable({ rows, keyName, label, currency, link }: { rows: (Aggregate & Record<string, any>)[]; keyName: string; label: string; currency: string; link?: (r: any) => void }) { + const t = useT(); + return ( + <div style={{ overflowX: "auto" }}> + <table className="grid"> + <thead> + <tr> + <th>{label}</th> + <th className="num">{t("stats.requests")}</th> + <th className="num">{t("stats.input")}</th> + <th className="num">{t("stats.cacheRead")}</th> + <th className="num">{t("stats.output")}</th> + <th className="num">{t("stats.ttft")}</th> + <th className="num">{t("stats.outputSpeed")}</th> + <th className="num">{t("stats.prefillSpeed")}</th> + <th className="num">{t("stats.cost")}</th> + </tr> + </thead> + <tbody> + {rows.map((r) => ( + <tr key={r[keyName]}> + <td>{link ? <a href="#" onClick={(e) => (e.preventDefault(), link(r))}>{r[keyName]}</a> : r[keyName]}</td> + <td className="num">{fmtNumber(r.requests)}</td> + <td className="num">{fmtCompact(r.input_tokens + r.cache_write_tokens)}</td> + <td className="num">{fmtCompact(r.cache_read_tokens)}</td> + <td className="num">{fmtCompact(r.output_tokens)}</td> + <td className="num">{fmtNumber(r.avg_ttft_ms)} ms</td> + <td className="num">{fmtNumber(r.output_tps, 1)}</td> + <td className="num">{fmtNumber(r.prefill_tps)}</td> + <td className="num">{fmtCost(r.cost, currency)}</td> + </tr> + ))} + </tbody> + </table> + </div> + ); +} + +export function Stats({ onMenu }: { onMenu: () => void }) { + const t = useT(); + const [range, setRange] = useState("30"); + const [heat, setHeat] = useState<HeatMetric>("requests"); + const [tableView, setTableView] = useState(false); + const days = RANGES.find((r) => r.key === range)!.days; + const tz = -new Date().getTimezoneOffset(); + // Stable per range: rounded to the minute so the URL doesn't change on every render. + const now = Math.floor(Date.now() / 60000) * 60000 + 60000; + const from = days ? now - days * 86400000 : 0; + const { data, error } = useFetch<StatsData>(`/stats?from=${from}&to=${now}&tz=${tz}`); + + const view = useMemo(() => { + if (!data) return undefined; + const cats = dayRange(data.from, data.to, data.by_day[0]?.day); + // Up to 7 models by cost get their own color; the rest fold into "Other". + const ranked = [...data.by_model].sort((a, b) => b.cost - a.cost || b.requests - a.requests); + const named = ranked.slice(0, ranked.length > 8 ? 7 : 8).map((m) => m.model); + const other = t("stats.other"); + const modelSeries: Series[] = [...named, ...(ranked.length > 8 ? [other] : [])].map((m, i) => ({ key: m, label: m, color: SERIES[i] })); + const costByDay = cats.map(() => ({}) as Record<string, number>); + const idx = new Map(cats.map((c, i) => [c, i])); + for (const r of data.by_day_model) { + const i = idx.get(r.day); + if (i === undefined) continue; + const key = named.includes(r.model) ? r.model : other; + costByDay[i][key] = (costByDay[i][key] ?? 0) + r.cost; + } + const tokenSeries: Series[] = [ + { key: "input", label: t("stats.input"), color: SERIES[0] }, + { key: "cache", label: t("stats.cacheRead"), color: SERIES[1] }, + { key: "output", label: t("stats.output"), color: SERIES[2] }, + ]; + const tokensByDay = cats.map((c): Record<string, number> => { + const d = data.by_day.find((x) => x.day === c); + return d ? { input: d.input_tokens + d.cache_write_tokens, cache: d.cache_read_tokens, output: d.output_tokens } : {}; + }); + const cells = Array<number>(168).fill(0); + for (const h of data.heatmap) { + cells[h.slot] = + heat === "requests" ? h.requests : heat === "cost" ? h.cost : h.input_tokens + h.cache_read_tokens + h.cache_write_tokens + h.output_tokens; + } + return { cats, modelSeries, costByDay, tokenSeries, tokensByDay, cells }; + }, [data, heat, t]); + + const dayLabel = (d: string) => + new Intl.DateTimeFormat(getLang(), { day: "numeric", month: "short" }).format(new Date(`${d}T00:00:00`)); + const cur = data?.currency ?? "USD"; + const tot = data?.total; + const heatFormat = (v: number) => (heat === "cost" ? fmtCost(v, cur) : fmtCompact(v)); + + return ( + <> + <div className="topbar"> + <button className="ghost menu-btn" onClick={onMenu} aria-label={t("nav.menu")}> + ☰ + </button> + <div className="grow"> + <h1>{t("nav.stats")}</h1> + {data && ( + <div className="path"> + {data.from ? fmtDate(data.from, false) : t("stats.rangeAll")} – {fmtDate(data.to, false)} + </div> + )} + </div> + <div className="mode-tabs" role="tablist"> + {RANGES.map((r) => ( + <button key={r.key} className={range === r.key ? "active" : ""} onClick={() => setRange(r.key)}> + {t(r.label)} + </button> + ))} + </div> + <button className="small" onClick={() => setTableView(!tableView)}> + {tableView ? t("stats.chartView") : t("stats.tableView")} + </button> + </div> + <div className="page"> + <div className="page-inner"> + {error && <div className="notice err">{error}</div>} + {!data && !error && <div className="empty">{t("common.loading")}</div>} + {data && tot && view && ( + <> + <div className="kpis"> + <Kpi label={t("stats.cost")} value={fmtCost(tot.cost, cur)} sub={t("stats.perRequest", { v: fmtCost(tot.requests ? tot.cost / tot.requests : 0, cur) })} /> + <Kpi label={t("stats.requests")} value={fmtNumber(tot.requests)} sub={tot.errors ? t("stats.errors", { n: tot.errors }) : undefined} /> + <Kpi label={t("stats.input")} value={fmtCompact(tot.input_tokens + tot.cache_read_tokens + tot.cache_write_tokens)} sub={`${t("stats.cacheRead")}: ${fmtCompact(tot.cache_read_tokens)}`} /> + <Kpi label={t("stats.output")} value={fmtCompact(tot.output_tokens)} /> + <Kpi label={t("stats.cacheHit")} value={fmtPercent(tot.cache_hit_rate)} /> + <Kpi label={t("stats.ttft")} value={`${fmtNumber(tot.avg_ttft_ms)} ms`} sub={t("stats.ttftHint")} /> + <Kpi label={t("stats.outputSpeed")} value={`${fmtNumber(tot.output_tps, 1)} tok/s`} /> + <Kpi label={t("stats.prefillSpeed")} value={`${fmtNumber(tot.prefill_tps)} tok/s`} /> + </div> + + {tot.requests === 0 ? ( + <div className="empty">{t("stats.noData")}</div> + ) : tableView ? ( + <div className="panel"> + <h3>{t("stats.perDay")}</h3> + <AggTable rows={data.by_day} keyName="day" label={t("stats.day")} currency={cur} /> + </div> + ) : ( + <> + <div className="panel"> + <h3>{t("stats.costPerDay")}</h3> + <Legend series={view.modelSeries} /> + <StackedBars categories={view.cats} categoryLabel={dayLabel} series={view.modelSeries} values={view.costByDay} format={(v) => fmtCost(v, cur)} /> + </div> + <div className="panel"> + <h3>{t("stats.tokensPerDay")}</h3> + <Legend series={view.tokenSeries} /> + <StackedBars categories={view.cats} categoryLabel={dayLabel} series={view.tokenSeries} values={view.tokensByDay} format={fmtCompact} /> + </div> + <div className="panel"> + <h3> + {t("stats.heatmap")} + <span className="spacer" /> + <select value={heat} onChange={(e) => setHeat(e.target.value as HeatMetric)}> + <option value="requests">{t("stats.requests")}</option> + <option value="tokens">{t("stats.tokens")}</option> + <option value="cost">{t("stats.cost")}</option> + </select> + </h3> + <Heatmap cells={view.cells} weekdays={weekdayNames()} format={heatFormat} /> + </div> + </> + )} + + {tot.requests > 0 && ( + <> + <div className="panel"> + <h3>{t("stats.byModel")}</h3> + <AggTable rows={data.by_model} keyName="model" label={t("stats.model")} currency={cur} /> + </div> + <div className="two-col"> + <div className="panel"> + <h3>{t("stats.byProvider")}</h3> + <AggTable rows={data.by_provider} keyName="provider" label={t("stats.provider")} currency={cur} /> + </div> + <div className="panel"> + <h3>{t("stats.byAgent")}</h3> + <AggTable rows={data.by_agent} keyName="agent" label={t("stats.agent")} currency={cur} /> + </div> + </div> + <div className="panel"> + <h3>{t("stats.topSessions")}</h3> + <AggTable rows={data.top_sessions} keyName="title" label={t("stats.session")} currency={cur} link={(r) => navigate(`/s/${r.session_id}`)} /> + </div> + </> + )} + </> + )} + </div> + </div> + </> + ); +} diff --git a/web/src/components/ToolCard.tsx b/web/src/components/ToolCard.tsx new file mode 100644 index 0000000..d66fa68 --- /dev/null +++ b/web/src/components/ToolCard.tsx @@ -0,0 +1,116 @@ +import { useT } from "../i18n"; +import { navigate } from "../router"; +import { useStore } from "../store"; +import type { Part, Todo } from "../types"; +import { Diff } from "./Diff"; + +type ToolCall = Extract<Part, { type: "tool_call" }>; +type ToolResult = Extract<Part, { type: "tool_result" }>; + +function short(s: unknown, n = 90): string { + const str = typeof s === "string" ? s : JSON.stringify(s); + return str.length > n ? `${str.slice(0, n)}…` : str; +} + +/** One-line summary of a tool call. */ +export function toolTitle(name: string, input: any): string { + switch (name) { + case "read": + case "write": + case "edit": + return input?.path ?? ""; + case "list": + return input?.path ?? "."; + case "bash": + return input?.description || input?.command || ""; + case "glob": + case "grep": + return `${input?.pattern ?? ""}${input?.path ? ` in ${input.path}` : ""}`; + case "web_fetch": + case "browser_snapshot": + return input?.url ?? ""; + case "task": + return `${input?.subagent_type ?? "general"}: ${input?.description ?? ""}`; + case "image_compare": + return `${input?.original ?? ""} ↔ ${input?.candidate ?? ""}`; + case "skill": + return input?.name ?? ""; + case "ask_user": + return input?.questions?.[0]?.question ?? ""; + default: + return short(input); + } +} + +export function TodoList({ todos }: { todos: Todo[] }) { + const icon = { completed: "☑", in_progress: "▶", pending: "☐" } as const; + return ( + <ul> + {todos.map((td, i) => ( + <li key={i} className={td.status}> + <span>{icon[td.status] ?? "☐"}</span> + <span>{td.content}</span> + </li> + ))} + </ul> + ); +} + +export function ToolCard({ call, result, running }: { call: ToolCall; result?: ToolResult; running: boolean }) { + const t = useT(); + const progress = useStore((s) => s.progress[call.id]); + const status = result ? (result.is_error ? "err" : "ok") : running ? "run" : "err"; + const statusText = result ? (result.is_error ? "✗" : "✓") : running ? "…" : "–"; + const meta = result?.meta; + + // The todo list is shown in its own panel; keep the card compact. + if (call.name === "todo_write" && !result?.is_error) { + return ( + <div className="todos"> + <div style={{ color: "var(--muted)", fontSize: 12 }}>{t("tool.todos")}</div> + <TodoList todos={call.input?.todos ?? []} /> + </div> + ); + } + + return ( + <details className="tool" open={status === "err" && !!result}> + <summary> + <span className="tool-name">{call.name}</span> + <span className="tool-title">{toolTitle(call.name, call.input)}</span> + {meta?.similarity !== undefined && <span className="chip">{meta.similarity} %</span>} + <span className={`status ${status}`}>{statusText}</span> + </summary> + <div className="tool-body"> + {call.name === "bash" && <pre className="mono">$ {call.input?.command}</pre>} + {(call.name === "edit" || call.name === "write") && meta?.diff && <Diff diff={meta.diff} />} + {call.name === "task" && meta?.session_id && ( + <button className="small" onClick={() => navigate(`/s/${meta.session_id}`)}> + {t("tool.openSubagent")} + </button> + )} + {!["bash", "edit", "write", "task"].includes(call.name) && ( + <> + <div className="label">{t("tool.input")}</div> + <pre className="mono">{JSON.stringify(call.input, null, 2)}</pre> + </> + )} + {!result && progress && ( + <> + <div className="label">{t("tool.output")}</div> + <pre className="mono">{progress}</pre> + </> + )} + {result && !((call.name === "edit" || call.name === "write") && meta?.diff && !result.is_error) && ( + <> + <div className="label">{t("tool.output")}</div> + <pre className="mono">{result.content}</pre> + </> + )} + {result?.images?.map((img, i) => ( + <img key={i} src={`data:${img.media_type};base64,${img.data}`} alt="" /> + ))} + </div> + </details> + ); +} diff --git a/web/src/hooks.ts b/web/src/hooks.ts new file mode 100644 index 0000000..90797ef --- /dev/null +++ b/web/src/hooks.ts @@ -0,0 +1,35 @@ +import { useCallback, useEffect, useState } from "react"; +import { get } from "./api"; +import type { AgentInfo, ProviderModels } from "./types"; + +/** Fetch JSON and refetch on demand. */ +export function useFetch<T>(path: string | null) { + const [data, setData] = useState<T | undefined>(); + const [error, setError] = useState<string | undefined>(); + const [tick, setTick] = useState(0); + useEffect(() => { + if (!path) return; + let alive = true; + get<T>(path) + .then((d) => alive && (setData(d), setError(undefined))) + .catch((e) => alive && setError(String(e.message ?? e))); + return () => { + alive = false; + }; + }, [path, tick]); + const reload = useCallback(() => setTick((x) => x + 1), []); + return { data, error, reload }; +} + +export function useModels() { + return useFetch<ProviderModels[]>("/models").data ?? []; +} + +export function useAgents(cwd?: string) { + const q = cwd ? `?cwd=${encodeURIComponent(cwd)}` : ""; + return useFetch<AgentInfo[]>(`/agents${q}`).data ?? []; +} + +export function modelOptions(models: ProviderModels[]): { value: string; label: string }[] { + return models.flatMap((p) => p.models.map((m) => ({ value: `${p.provider}/${m.id}`, label: `${p.provider} · ${m.name}` }))); +} diff --git a/web/src/i18n/de.ts b/web/src/i18n/de.ts new file mode 100644 index 0000000..892d595 --- /dev/null +++ b/web/src/i18n/de.ts @@ -0,0 +1,228 @@ +import type { Messages } from "./en"; + +export const de: Messages = { + "common.loading": "Lädt…", + "common.save": "Speichern", + "common.add": "Hinzufügen", + "common.edit": "Bearbeiten", + "common.delete": "Löschen", + "common.remove": "Entfernen", + "common.close": "Schließen", + "common.collapse": "Einklappen", + + "nav.menu": "Menü", + "nav.settings": "Einstellungen", + "nav.stats": "Statistik", + + "login.prompt": "Gib das auf dem Server konfigurierte Zugriffstoken ein.", + "login.token": "Zugriffstoken", + "login.invalid": "Ungültiges Token.", + "login.submit": "Anmelden", + + "sidebar.newSession": "Neue Session", + "sidebar.noSessions": "Noch keine Sessions", + "sidebar.today": "Heute", + "sidebar.yesterday": "Gestern", + "sidebar.week": "Letzte 7 Tage", + "sidebar.older": "Älter", + "sidebar.connected": "Verbunden", + "sidebar.disconnected": "Getrennt – verbinde neu…", + "sidebar.needsInput": "Wartet auf deine Eingabe", + + "session.untitled": "Neue Session", + + "new.title": "Neue Session", + "new.directory": "Projektverzeichnis", + "new.up": "Hoch", + "new.noSubdirs": "Keine Unterverzeichnisse", + "new.model": "Modell", + "new.mode": "Modus", + "new.firstPrompt": "Was soll erledigt werden? (optional)", + "new.start": "Starten in {dir}", + + "chat.empty": "Schreib eine Nachricht, um zu starten.", + "chat.reasoning": "Überlegungen", + "chat.thinking": "Arbeitet…", + "chat.compacted": "Unterhaltung komprimiert – Zusammenfassung", + "chat.context": "Kontext", + "chat.contextHint": "{tokens} Tokens in der letzten Anfrage", + "chat.statsHint": "Tokens und Kosten dieser Session (Klick für Details)", + "chat.renameHint": "Doppelklick zum Umbenennen", + "chat.rewind": "Ab hier bearbeiten und neu senden", + "chat.rewindConfirm": "Diese Nachricht und alles danach entfernen? Dateiänderungen werden nicht rückgängig gemacht.", + "chat.delete": "Session löschen", + "chat.deleteConfirm": "Diese Session inklusive Subagenten löschen? Die Statistik bleibt erhalten.", + + "composer.placeholder": "Nachricht… (/ für Befehle, Bilder einfügen)", + "composer.placeholderBusy": "Nachricht wird eingereiht und beim nächsten Schritt gesendet…", + "composer.send": "Senden", + "composer.queue": "Einreihen", + "composer.stop": "Stopp", + "composer.mode": "Modus", + "composer.model": "Modell", + "composer.permissionMode": "Berechtigungsmodus", + "composer.attach": "Bilder anhängen", + + "command.compact": "Unterhaltung zusammenfassen, um Kontext freizugeben", + "command.new": "Neue Session starten", + + "permissionMode.default": "Vor Änderungen fragen", + "permissionMode.accept_edits": "Änderungen automatisch annehmen", + "permissionMode.bypass": "Alles erlauben", + + "plan.implement": "Zu Build wechseln und Plan umsetzen", + "plan.implementPrompt": "Setze den Plan um.", + + "tool.input": "Eingabe", + "tool.output": "Ausgabe", + "tool.todos": "Aufgaben", + "tool.openSubagent": "Subagent-Session öffnen", + + "interaction.fromSubagent": "Vom Subagenten:", + + "permission.title": "Freigabe erforderlich", + "permission.allowOnce": "Einmal erlauben", + "permission.alwaysTool": "{tool} in dieser Session immer erlauben", + "permission.alwaysCommand": "„{prefix}“ in dieser Session immer erlauben", + "permission.reject": "Ablehnen", + "permission.rejectWithFeedback": "Mit Rückmeldung ablehnen", + "permission.feedback": "Optional: Sag dem Agenten, was er stattdessen tun soll", + + "question.title": "Frage an dich", + "question.fromAgent": "Der Agent braucht eine Entscheidung", + "question.fromMcp": "MCP-Server „{server}“ fragt", + "question.other": "Andere Antwort (Freitext)", + "question.answer": "Deine Antwort", + "question.submit": "Antworten", + "question.dismiss": "Verwerfen", + + "settings.tab.general": "Allgemein", + "settings.tab.providers": "Provider & Modelle", + "settings.tab.mcp": "MCP", + "settings.tab.permissions": "Berechtigungen", + "settings.tab.agents": "Agenten & Befehle", + "settings.tab.raw": "Config-Datei", + "settings.saved": "Gespeichert – Änderungen sind aktiv.", + "settings.interface": "Oberfläche (dieses Gerät)", + "settings.language": "Sprache", + "settings.theme": "Design", + "settings.themeSystem": "System", + "settings.themeDark": "Dunkel", + "settings.themeLight": "Hell", + "settings.notifications": "Benachrichtigungen", + "settings.notificationsEnable": "Aktivieren", + "settings.notificationsOn": "Aktiv", + "settings.notificationsHint": "Benachrichtigen, wenn ein Agent eine Frage stellt, während die App im Hintergrund ist.", + "settings.server": "Server", + "settings.workspace": "Workspace", + "settings.defaultModel": "Standardmodell", + "settings.smallModel": "Kleines Modell", + "settings.smallModelHint": "Für Session-Titel. Die Komprimierung nutzt das Session-Modell.", + "settings.currency": "Währung", + "settings.autoCompact": "Auto-Komprimierung bei", + "settings.autoCompactHint": "Anteil des Kontextfensters (0 = aus).", + "settings.craft": "Craft-Modus", + "settings.cleanRoom": "Clean Room", + "settings.cleanRoomHint": "Nur nutzen, was ein Besucher sieht. Aus = Deep-Modus (Quelltext und Skripte dürfen gelesen werden).", + "settings.chromium": "Chromium-Programm", + "settings.widths": "Bildschirmbreiten (px)", + "settings.kind": "Typ", + "settings.baseUrl": "Basis-URL", + "settings.apiKey": "API-Key", + "settings.apiKeyStored": "Gespeichert – leer lassen zum Beibehalten", + "settings.apiKeyHint": "Am besten ${ENV_VAR}-Verweise nutzen; direkte Keys stehen im Klartext in der Config-Datei.", + "settings.authPrefix": "Auth-Präfix", + "settings.enabled": "Aktiv", + "settings.modelCount": "{n} Modelle", + "settings.models": "Modelle & Preise", + "settings.addModel": "Modell", + "settings.addDiscovered": "{n} gefundene hinzufügen", + "settings.pricesHint": "Preise pro 1 Mio. Tokens in der eingestellten Währung. Cache-Preise fallen auf den Input-Preis zurück.", + "settings.modelsEmptyHint": "Keine Modelle eingetragen: Sie werden automatisch beim Provider abgefragt.", + "settings.context": "Kontext", + "settings.maxOutput": "Max. Ausgabe", + "settings.reasoning": "Reasoning", + "settings.vision": "Bilder", + "settings.effort": "Effort", + "settings.priceIn": "Input", + "settings.priceOut": "Output", + "settings.priceCacheRead": "Cache lesen", + "settings.priceCacheWrite": "Cache schreiben", + "settings.addProvider": "Provider hinzufügen", + "settings.providerName": "Name (optional)", + "settings.reloadProviders": "Provider & Modelle neu laden", + "settings.deleteProviderConfirm": "Provider „{name}“ löschen?", + "settings.invalidName": "Namen dürfen nur Buchstaben, Ziffern, - und _ enthalten.", + "settings.name": "Name", + "settings.addMcp": "MCP-Server hinzufügen", + "settings.deleteMcpConfirm": "MCP-Server „{name}“ löschen?", + "settings.rawHint": "Die komplette Konfigurationsdatei inklusive Kommentaren. Sie wird vor dem Speichern geprüft.", + "settings.revert": "Zurücksetzen", + + "mcp.reconnect": "Alle neu verbinden", + "mcp.none": "Keine MCP-Server konfiguriert.", + "mcp.tools": "{n} Tools", + "mcp.command": "Befehl", + "mcp.args": "Argumente (eins pro Zeile)", + "mcp.env": "Umgebung (KEY=Wert)", + "mcp.headers": "Header (Name: Wert)", + "mcp.state.disabled": "deaktiviert", + "mcp.state.connecting": "verbinde…", + "mcp.state.connected": "verbunden", + "mcp.state.failed": "Fehler", + "mcp.state.unknown": "nicht gestartet", + + "permissions.intro": "Regeln für die Tool-Nutzung. „Fragen“ zeigt eine Freigabekarte. MCP-Tools: mcp__<server>__<tool>, Platzhalter erlaubt (mcp__*).", + "permissions.tools": "Tools", + "permissions.bash": "Shell-Befehle", + "permissions.bashHint": "Glob-Muster auf den ganzen Befehl. Zusammengesetzte Befehle (&&, ;, |) sind nur erlaubt, wenn jeder Teil erlaubt ist.", + "permissions.tool": "Tool", + "permissions.pattern": "Muster", + "permissions.rule": "Regel", + "permissions.allow": "Erlauben", + "permissions.ask": "Fragen", + "permissions.deny": "Verbieten", + + "agents.intro": "Modi und Subagenten. Eigene in der Config-Datei ([agents.*]) oder als Markdown in .codecraft/agents bzw. .claude/agents anlegen.", + "agents.title": "Agenten", + "agents.readOnly": "nur lesen", + "agents.commands": "Slash-Befehle", + "agents.skills": "Skills", + + "stats.range7": "7 Tage", + "stats.range30": "30 Tage", + "stats.range90": "90 Tage", + "stats.range365": "1 Jahr", + "stats.rangeAll": "Alles", + "stats.tableView": "Tabellenansicht", + "stats.chartView": "Diagrammansicht", + "stats.cost": "Kosten", + "stats.perRequest": "{v} pro Anfrage", + "stats.requests": "Anfragen", + "stats.errors": "{n} fehlgeschlagen", + "stats.input": "Input", + "stats.output": "Output", + "stats.cacheRead": "Cache gelesen", + "stats.cacheHit": "Cache-Trefferquote", + "stats.tokens": "Tokens", + "stats.ttft": "Zeit bis zum ersten Token", + "stats.ttftHint": "Durchschnittliche Prefill-Wartezeit", + "stats.outputSpeed": "Ausgabegeschwindigkeit", + "stats.prefillSpeed": "Prefill-Geschwindigkeit", + "stats.costPerDay": "Kosten pro Tag nach Modell", + "stats.tokensPerDay": "Tokens pro Tag", + "stats.heatmap": "Aktivität nach Wochentag und Uhrzeit", + "stats.byModel": "Nach Modell", + "stats.byProvider": "Nach Provider", + "stats.byAgent": "Nach Modus", + "stats.topSessions": "Teuerste Sessions", + "stats.perDay": "Pro Tag", + "stats.day": "Tag", + "stats.model": "Modell", + "stats.provider": "Provider", + "stats.agent": "Modus", + "stats.session": "Session", + "stats.total": "Gesamt", + "stats.other": "Sonstige", + "stats.noData": "Keine Anfragen in diesem Zeitraum.", +}; diff --git a/web/src/i18n/en.ts b/web/src/i18n/en.ts new file mode 100644 index 0000000..5393362 --- /dev/null +++ b/web/src/i18n/en.ts @@ -0,0 +1,229 @@ +// Reference language. Every other language must define the same keys. +export const en = { + "common.loading": "Loading…", + "common.save": "Save", + "common.add": "Add", + "common.edit": "Edit", + "common.delete": "Delete", + "common.remove": "Remove", + "common.close": "Close", + "common.collapse": "Collapse", + + "nav.menu": "Menu", + "nav.settings": "Settings", + "nav.stats": "Statistics", + + "login.prompt": "Enter the access token configured on the server.", + "login.token": "Access token", + "login.invalid": "Invalid token.", + "login.submit": "Sign in", + + "sidebar.newSession": "New session", + "sidebar.noSessions": "No sessions yet", + "sidebar.today": "Today", + "sidebar.yesterday": "Yesterday", + "sidebar.week": "Last 7 days", + "sidebar.older": "Older", + "sidebar.connected": "Connected", + "sidebar.disconnected": "Disconnected – reconnecting…", + "sidebar.needsInput": "Waiting for your input", + + "session.untitled": "New session", + + "new.title": "New session", + "new.directory": "Project directory", + "new.up": "Up", + "new.noSubdirs": "No subdirectories", + "new.model": "Model", + "new.mode": "Mode", + "new.firstPrompt": "What should be done? (optional)", + "new.start": "Start in {dir}", + + "chat.empty": "Send a message to start.", + "chat.reasoning": "Reasoning", + "chat.thinking": "Working…", + "chat.compacted": "Conversation compacted – summary", + "chat.context": "Context", + "chat.contextHint": "{tokens} tokens in the last request", + "chat.statsHint": "Tokens and cost of this session (click for details)", + "chat.renameHint": "Double-click to rename", + "chat.rewind": "Edit and resend from here", + "chat.rewindConfirm": "Remove this message and everything after it? File changes are not undone.", + "chat.delete": "Delete session", + "chat.deleteConfirm": "Delete this session including its subagents? Statistics are kept.", + + "composer.placeholder": "Message… (/ for commands, paste images)", + "composer.placeholderBusy": "Message is queued and sent at the next step…", + "composer.send": "Send", + "composer.queue": "Queue", + "composer.stop": "Stop", + "composer.mode": "Mode", + "composer.model": "Model", + "composer.permissionMode": "Permission mode", + "composer.attach": "Attach images", + + "command.compact": "Summarize the conversation to free up context", + "command.new": "Start a new session", + + "permissionMode.default": "Ask before changes", + "permissionMode.accept_edits": "Auto-accept edits", + "permissionMode.bypass": "Allow everything", + + "plan.implement": "Switch to build and implement the plan", + "plan.implementPrompt": "Implement the plan.", + + "tool.input": "Input", + "tool.output": "Output", + "tool.todos": "Tasks", + "tool.openSubagent": "Open subagent session", + + "interaction.fromSubagent": "From subagent:", + + "permission.title": "Permission required", + "permission.allowOnce": "Allow once", + "permission.alwaysTool": "Always allow {tool} in this session", + "permission.alwaysCommand": "Always allow \"{prefix}\" in this session", + "permission.reject": "Reject", + "permission.rejectWithFeedback": "Reject with feedback", + "permission.feedback": "Optional: tell the agent what to do instead", + + "question.title": "Question for you", + "question.fromAgent": "The agent needs a decision", + "question.fromMcp": "MCP server \"{server}\" asks", + "question.other": "Other (free text)", + "question.answer": "Your answer", + "question.submit": "Answer", + "question.dismiss": "Dismiss", + + "settings.tab.general": "General", + "settings.tab.providers": "Providers & models", + "settings.tab.mcp": "MCP", + "settings.tab.permissions": "Permissions", + "settings.tab.agents": "Agents & commands", + "settings.tab.raw": "Config file", + "settings.saved": "Saved – changes are active.", + "settings.interface": "Interface (this device)", + "settings.language": "Language", + "settings.theme": "Theme", + "settings.themeSystem": "System", + "settings.themeDark": "Dark", + "settings.themeLight": "Light", + "settings.notifications": "Notifications", + "settings.notificationsEnable": "Enable", + "settings.notificationsOn": "Enabled", + "settings.notificationsHint": "Notify when an agent asks a question while the app is in the background.", + "settings.server": "Server", + "settings.workspace": "Workspace", + "settings.defaultModel": "Default model", + "settings.smallModel": "Small model", + "settings.smallModelHint": "Used for session titles. Compaction uses the session model.", + "settings.currency": "Currency", + "settings.autoCompact": "Auto-compact at", + "settings.autoCompactHint": "Fraction of the context window (0 = off).", + "settings.craft": "Craft mode", + "settings.cleanRoom": "Clean room", + "settings.cleanRoomHint": "Only use what a visitor sees. Off = deep mode (page source and scripts may be read).", + "settings.chromium": "Chromium binary", + "settings.widths": "Screen widths (px)", + "settings.kind": "Type", + "settings.baseUrl": "Base URL", + "settings.apiKey": "API key", + "settings.apiKeyStored": "Stored – leave empty to keep", + "settings.apiKeyHint": "Prefer ${ENV_VAR} references; literal keys are stored in plain text in the config file.", + "settings.authPrefix": "Auth prefix", + "settings.enabled": "Enabled", + "settings.modelCount": "{n} models", + "settings.models": "Models & prices", + "settings.addModel": "Model", + "settings.addDiscovered": "Add {n} discovered", + "settings.pricesHint": "Prices per 1M tokens in the configured currency. Cache prices default to the input price.", + "settings.modelsEmptyHint": "No models listed: they are discovered automatically from the provider.", + "settings.context": "Context", + "settings.maxOutput": "Max output", + "settings.reasoning": "Reasoning", + "settings.vision": "Vision", + "settings.effort": "Effort", + "settings.priceIn": "Input", + "settings.priceOut": "Output", + "settings.priceCacheRead": "Cache read", + "settings.priceCacheWrite": "Cache write", + "settings.addProvider": "Add provider", + "settings.providerName": "Name (optional)", + "settings.reloadProviders": "Reload providers & models", + "settings.deleteProviderConfirm": "Delete provider \"{name}\"?", + "settings.invalidName": "Names may only contain letters, digits, - and _.", + "settings.name": "Name", + "settings.addMcp": "Add MCP server", + "settings.deleteMcpConfirm": "Delete MCP server \"{name}\"?", + "settings.rawHint": "The complete configuration file including comments. It is validated before saving.", + "settings.revert": "Revert", + + "mcp.reconnect": "Reconnect all", + "mcp.none": "No MCP servers configured.", + "mcp.tools": "{n} tools", + "mcp.command": "Command", + "mcp.args": "Arguments (one per line)", + "mcp.env": "Environment (KEY=value)", + "mcp.headers": "Headers (Name: value)", + "mcp.state.disabled": "disabled", + "mcp.state.connecting": "connecting…", + "mcp.state.connected": "connected", + "mcp.state.failed": "failed", + "mcp.state.unknown": "not started", + + "permissions.intro": "Rules for tool use. \"Ask\" shows an approval card. MCP tools: mcp__<server>__<tool>, wildcards allowed (mcp__*).", + "permissions.tools": "Tools", + "permissions.bash": "Shell commands", + "permissions.bashHint": "Glob patterns on the full command. Compound commands (&&, ;, |) are only allowed if every part is.", + "permissions.tool": "Tool", + "permissions.pattern": "Pattern", + "permissions.rule": "Rule", + "permissions.allow": "Allow", + "permissions.ask": "Ask", + "permissions.deny": "Deny", + + "agents.intro": "Modes and subagents. Add your own in the config file ([agents.*]) or as Markdown in .codecraft/agents or .claude/agents.", + "agents.title": "Agents", + "agents.readOnly": "read-only", + "agents.commands": "Slash commands", + "agents.skills": "Skills", + + "stats.range7": "7 days", + "stats.range30": "30 days", + "stats.range90": "90 days", + "stats.range365": "1 year", + "stats.rangeAll": "All", + "stats.tableView": "Table view", + "stats.chartView": "Chart view", + "stats.cost": "Cost", + "stats.perRequest": "{v} per request", + "stats.requests": "Requests", + "stats.errors": "{n} failed", + "stats.input": "Input", + "stats.output": "Output", + "stats.cacheRead": "Cache read", + "stats.cacheHit": "Cache hit rate", + "stats.tokens": "Tokens", + "stats.ttft": "Time to first token", + "stats.ttftHint": "Average prefill wait", + "stats.outputSpeed": "Output speed", + "stats.prefillSpeed": "Prefill speed", + "stats.costPerDay": "Cost per day by model", + "stats.tokensPerDay": "Tokens per day", + "stats.heatmap": "Activity by weekday and hour", + "stats.byModel": "By model", + "stats.byProvider": "By provider", + "stats.byAgent": "By mode", + "stats.topSessions": "Most expensive sessions", + "stats.perDay": "Per day", + "stats.day": "Day", + "stats.model": "Model", + "stats.provider": "Provider", + "stats.agent": "Mode", + "stats.session": "Session", + "stats.total": "Total", + "stats.other": "Other", + "stats.noData": "No requests in this period.", +}; + +export type Messages = Record<keyof typeof en, string>; diff --git a/web/src/i18n/index.ts b/web/src/i18n/index.ts new file mode 100644 index 0000000..edd1eaa --- /dev/null +++ b/web/src/i18n/index.ts @@ -0,0 +1,104 @@ +// Minimal i18n: dictionaries per language, `{name}` placeholders, persisted choice. +// To add a language: copy en.ts, translate the values, register it in `languages`. +// TypeScript enforces that every language defines every key of `en`. + +import { useSyncExternalStore } from "react"; +import { en, type Messages } from "./en"; +import { de } from "./de"; + +export type Key = keyof typeof en; + +export const languages: Record<string, { name: string; messages: Messages }> = { + en: { name: "English", messages: en }, + de: { name: "Deutsch", messages: de }, +}; + +const STORAGE_KEY = "codecraft.lang"; + +function detect(): string { + const saved = localStorage.getItem(STORAGE_KEY); + if (saved && languages[saved]) return saved; + const nav = navigator.language.slice(0, 2); + return languages[nav] ? nav : "en"; +} + +let current = detect(); +document.documentElement.lang = current; +const listeners = new Set<() => void>(); + +export function getLang() { + return current; +} + +export function setLang(lang: string) { + if (!languages[lang]) return; + current = lang; + localStorage.setItem(STORAGE_KEY, lang); + document.documentElement.lang = lang; + listeners.forEach((l) => l()); +} + +export function t(key: Key, vars?: Record<string, string | number>): string { + let s: string = languages[current].messages[key] ?? en[key] ?? key; + if (vars) { + for (const [k, v] of Object.entries(vars)) s = s.replaceAll(`{${k}}`, String(v)); + } + return s; +} + +/** Re-render on language change. Returns `t` for convenience. */ +export function useT() { + useSyncExternalStore( + (l) => { + listeners.add(l); + return () => listeners.delete(l); + }, + () => current, + ); + return t; +} + +// --- locale-aware formatting ------------------------------------------------- + +export function fmtNumber(n: number, digits = 0) { + return new Intl.NumberFormat(current, { maximumFractionDigits: digits }).format(n); +} + +export function fmtCompact(n: number) { + return new Intl.NumberFormat(current, { notation: "compact", maximumFractionDigits: 1 }).format(n); +} + +export function fmtCost(n: number, currency: string) { + const digits = n !== 0 && Math.abs(n) < 1 ? 4 : 2; + try { + return new Intl.NumberFormat(current, { style: "currency", currency, maximumFractionDigits: digits }).format(n); + } catch { + return `${n.toFixed(digits)} ${currency}`; + } +} + +export function fmtPercent(n: number) { + return new Intl.NumberFormat(current, { style: "percent", maximumFractionDigits: 1 }).format(n); +} + +export function fmtDate(ms: number, withTime = true) { + return new Intl.DateTimeFormat(current, withTime ? { dateStyle: "medium", timeStyle: "short" } : { dateStyle: "medium" }).format(ms); +} + +export function fmtRelative(ms: number) { + const diff = (ms - Date.now()) / 1000; + const rtf = new Intl.RelativeTimeFormat(current, { numeric: "auto" }); + const abs = Math.abs(diff); + if (abs < 60) return rtf.format(Math.round(diff), "second"); + if (abs < 3600) return rtf.format(Math.round(diff / 60), "minute"); + if (abs < 86400) return rtf.format(Math.round(diff / 3600), "hour"); + return rtf.format(Math.round(diff / 86400), "day"); +} + +export function weekdayNames(): string[] { + // Index 0 = Sunday, matching SQLite's %w. + const base = new Date(Date.UTC(2024, 0, 7)); // a Sunday + return Array.from({ length: 7 }, (_, i) => + new Intl.DateTimeFormat(current, { weekday: "short", timeZone: "UTC" }).format(new Date(base.getTime() + i * 86400000)), + ); +} diff --git a/web/src/main.tsx b/web/src/main.tsx new file mode 100644 index 0000000..8864ba4 --- /dev/null +++ b/web/src/main.tsx @@ -0,0 +1,15 @@ +import { StrictMode } from "react"; +import { createRoot } from "react-dom/client"; +import { registerSW } from "virtual:pwa-register"; +import "./styles.css"; +import { App } from "./App"; +import { applyTheme } from "./theme"; + +applyTheme(); +registerSW({ immediate: true }); + +createRoot(document.getElementById("root")!).render( + <StrictMode> + <App /> + </StrictMode>, +); diff --git a/web/src/router.ts b/web/src/router.ts new file mode 100644 index 0000000..835b697 --- /dev/null +++ b/web/src/router.ts @@ -0,0 +1,17 @@ +import { useSyncExternalStore } from "react"; + +/** Hash routes: #/ , #/s/<id>, #/new, #/settings[/tab], #/stats */ +export function useRoute(): string[] { + const hash = useSyncExternalStore( + (l) => { + window.addEventListener("hashchange", l); + return () => window.removeEventListener("hashchange", l); + }, + () => location.hash, + ); + return hash.replace(/^#\/?/, "").split("/").filter(Boolean); +} + +export function navigate(path: string) { + location.hash = path.startsWith("/") ? path : `/${path}`; +} diff --git a/web/src/store.ts b/web/src/store.ts new file mode 100644 index 0000000..c4c2d9b --- /dev/null +++ b/web/src/store.ts @@ -0,0 +1,211 @@ +import { useSyncExternalStore } from "react"; +import { get } from "./api"; +import type { + McpServerStatus, + Message, + Part, + PermissionRequest, + QuestionRequest, + ServerEvent, + Session, +} from "./types"; + +/** The assistant message currently being streamed. */ +export interface Draft { + id: string; + parts: Part[]; +} + +export interface SessionError { + id: number; + message: string; +} + +export interface State { + connected: boolean; + sessions: Session[]; + /** Includes subagent sessions loaded on demand. */ + sessionById: Record<string, Session>; + messages: Record<string, Message[]>; + drafts: Record<string, Draft | undefined>; + busy: Record<string, boolean>; + progress: Record<string, string>; + permissions: PermissionRequest[]; + questions: QuestionRequest[]; + errors: Record<string, SessionError[]>; + mcp: Record<string, McpServerStatus>; +} + +let state: State = { + connected: false, + sessions: [], + sessionById: {}, + messages: {}, + drafts: {}, + busy: {}, + progress: {}, + permissions: [], + questions: [], + errors: {}, + mcp: {}, +}; + +const listeners = new Set<() => void>(); + +export function setState(fn: (s: State) => Partial<State>) { + state = { ...state, ...fn(state) }; + listeners.forEach((l) => l()); +} + +export function getState() { + return state; +} + +export function useStore<T>(selector: (s: State) => T): T { + return useSyncExternalStore( + (l) => { + listeners.add(l); + return () => listeners.delete(l); + }, + () => selector(state), + ); +} + +function upsertSession(s: State, session: Session): Partial<State> { + const sessionById = { ...s.sessionById, [session.id]: session }; + if (session.parent_id) return { sessionById }; + const others = s.sessions.filter((x) => x.id !== session.id); + const sessions = [session, ...others].sort((a, b) => b.updated_at - a.updated_at); + return { sessions, sessionById }; +} + +let errorSeq = 0; + +function draftFor(s: State, sid: string, mid: string): Draft { + const d = s.drafts[sid]; + return d && d.id === mid ? { ...d, parts: [...d.parts] } : { id: mid, parts: [] }; +} + +export function applyEvent(ev: ServerEvent) { + switch (ev.type) { + case "session_updated": + setState((s) => upsertSession(s, ev.session)); + break; + case "session_deleted": + setState((s) => { + const { [ev.session_id]: _, ...rest } = s.sessionById; + return { sessions: s.sessions.filter((x) => x.id !== ev.session_id), sessionById: rest }; + }); + break; + case "session_status": + setState((s) => ({ + busy: { ...s.busy, [ev.session_id]: ev.busy }, + drafts: ev.busy ? s.drafts : { ...s.drafts, [ev.session_id]: undefined }, + })); + break; + case "message_added": + setState((s) => { + const list = s.messages[ev.session_id]; + const drafts = s.drafts[ev.session_id]?.id === ev.message.id ? { ...s.drafts, [ev.session_id]: undefined } : s.drafts; + if (!list) return { drafts }; + if (list.some((m) => m.id === ev.message.id)) return { drafts }; + return { messages: { ...s.messages, [ev.session_id]: [...list, ev.message] }, drafts }; + }); + break; + case "text_delta": + case "reasoning_delta": + setState((s) => { + const d = draftFor(s, ev.session_id, ev.message_id); + const kind = ev.type === "text_delta" ? "text" : "reasoning"; + const last = d.parts[d.parts.length - 1]; + if (last && last.type === kind) { + d.parts[d.parts.length - 1] = { ...last, text: last.text + ev.text } as Part; + } else { + d.parts.push({ type: kind, text: ev.text } as Part); + } + return { drafts: { ...s.drafts, [ev.session_id]: d } }; + }); + break; + case "tool_started": + setState((s) => { + const d = draftFor(s, ev.session_id, ev.message_id); + d.parts.push({ type: "tool_call", id: ev.call_id, name: ev.name, input: ev.input }); + return { drafts: { ...s.drafts, [ev.session_id]: d } }; + }); + break; + case "tool_progress": + setState((s) => ({ progress: { ...s.progress, [ev.call_id]: ev.output } })); + break; + case "permission_request": + setState((s) => ({ permissions: [...s.permissions.filter((p) => p.id !== ev.id), ev] })); + break; + case "permission_resolved": + setState((s) => ({ permissions: s.permissions.filter((p) => p.id !== ev.id) })); + break; + case "question_request": + setState((s) => ({ questions: [...s.questions.filter((q) => q.id !== ev.id), ev] })); + notify(ev.questions[0]?.question ?? ""); + break; + case "question_resolved": + setState((s) => ({ questions: s.questions.filter((q) => q.id !== ev.id) })); + break; + case "error": + setState((s) => ({ + errors: { + ...s.errors, + [ev.session_id]: [...(s.errors[ev.session_id] ?? []), { id: ++errorSeq, message: ev.message }].slice(-5), + }, + })); + break; + case "mcp_status": + setState(() => ({ mcp: ev.servers })); + break; + case "resync": + void resync(); + break; + } +} + +/** Notify when the app is in the background and an agent needs input. */ +function notify(body: string) { + if (document.visibilityState === "visible" || !("Notification" in window)) return; + if (Notification.permission === "granted") { + new Notification("CodeCraft", { body, icon: "/icon-192.png" }); + } +} + +export function dismissError(sessionId: string, id: number) { + setState((s) => ({ errors: { ...s.errors, [sessionId]: (s.errors[sessionId] ?? []).filter((e) => e.id !== id) } })); +} + +export async function loadSessions() { + const list = await get<Session[]>("/sessions"); + setState((s) => ({ + sessions: list, + sessionById: { ...s.sessionById, ...Object.fromEntries(list.map((x) => [x.id, x])) }, + busy: { ...s.busy, ...Object.fromEntries(list.map((x) => [x.id, !!x.busy])) }, + })); +} + +export async function loadSession(id: string) { + const data = await get<{ session: Session; messages: Message[]; busy: boolean }>(`/sessions/${id}`); + setState((s) => ({ + ...upsertSession(s, data.session), + sessionById: { ...s.sessionById, [id]: data.session }, + messages: { ...s.messages, [id]: data.messages }, + busy: { ...s.busy, [id]: data.busy }, + })); +} + +/** After reconnects: reload everything that could have changed. */ +export async function resync() { + const [pending, mcp] = await Promise.all([get<any[]>("/pending"), get("/mcp")]); + setState(() => ({ + permissions: pending.filter((e) => e.type === "permission_request"), + questions: pending.filter((e) => e.type === "question_request"), + mcp, + })); + await loadSessions(); + const loaded = Object.keys(getState().messages); + await Promise.all(loaded.map((id) => loadSession(id).catch(() => undefined))); +} diff --git a/web/src/styles.css b/web/src/styles.css new file mode 100644 index 0000000..2fda9be --- /dev/null +++ b/web/src/styles.css @@ -0,0 +1,1172 @@ +/* CodeCraft – Gruvbox theme (dark default, light via data-theme or OS). */ + +:root { + color-scheme: dark; + --bg0: #282828; + --bg1: #32302f; + --bg2: #3c3836; + --bg3: #504945; + --fg0: #fbf1c7; + --fg1: #ebdbb2; + --fg2: #d5c4a1; + --fg3: #a89984; + --muted: #928374; + --accent: #fabd2f; + --accent2: #fe8019; + --red: #fb4934; + --green: #b8bb26; + --aqua: #8ec07c; + --blue: #83a598; + --purple: #d3869b; + --diff-add: rgba(184, 187, 38, 0.16); + --diff-del: rgba(251, 73, 52, 0.16); + --shadow: 0 6px 24px rgba(0, 0, 0, 0.35); + + /* Data viz: validated categorical palette (dark steps on #282828). */ + --series-1: #3987e5; + --series-2: #d95926; + --series-3: #199e70; + --series-4: #c98500; + --series-5: #d55181; + --series-6: #008300; + --series-7: #9085e9; + --series-8: #e66767; + /* Sequential (heatmap), blue ramp: low → high on dark. */ + --seq-0: #32302f; + --seq-1: #104281; + --seq-2: #184f95; + --seq-3: #256abf; + --seq-4: #3987e5; + --seq-5: #6da7ec; + --seq-6: #9ec5f4; + --radius: 8px; + --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; + --mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace; +} + +@media (prefers-color-scheme: light) { + :root:where(:not([data-theme="dark"])) { + color-scheme: light; + --bg0: #fbf1c7; + --bg1: #f2e5bc; + --bg2: #ebdbb2; + --bg3: #d5c4a1; + --fg0: #282828; + --fg1: #3c3836; + --fg2: #504945; + --fg3: #665c54; + --muted: #7c6f64; + --accent: #b57614; + --accent2: #af3a03; + --red: #9d0006; + --green: #79740e; + --aqua: #427b58; + --blue: #076678; + --purple: #8f3f71; + --diff-add: rgba(121, 116, 14, 0.16); + --diff-del: rgba(157, 0, 6, 0.12); + --shadow: 0 6px 24px rgba(60, 56, 54, 0.18); + --series-1: #2a78d6; + --series-2: #eb6834; + --series-3: #1baf7a; + --series-4: #eda100; + --series-5: #e87ba4; + --series-6: #008300; + --series-7: #6250d6; + --series-8: #e34948; + --seq-0: #f2e5bc; + --seq-1: #cde2fb; + --seq-2: #9ec5f4; + --seq-3: #6da7ec; + --seq-4: #3987e5; + --seq-5: #256abf; + --seq-6: #184f95; + } +} + +:root[data-theme="light"] { + color-scheme: light; + --bg0: #fbf1c7; + --bg1: #f2e5bc; + --bg2: #ebdbb2; + --bg3: #d5c4a1; + --fg0: #282828; + --fg1: #3c3836; + --fg2: #504945; + --fg3: #665c54; + --muted: #7c6f64; + --accent: #b57614; + --accent2: #af3a03; + --red: #9d0006; + --green: #79740e; + --aqua: #427b58; + --blue: #076678; + --purple: #8f3f71; + --diff-add: rgba(121, 116, 14, 0.16); + --diff-del: rgba(157, 0, 6, 0.12); + --shadow: 0 6px 24px rgba(60, 56, 54, 0.18); + --series-1: #2a78d6; + --series-2: #eb6834; + --series-3: #1baf7a; + --series-4: #eda100; + --series-5: #e87ba4; + --series-6: #008300; + --series-7: #6250d6; + --series-8: #e34948; + --seq-0: #f2e5bc; + --seq-1: #cde2fb; + --seq-2: #9ec5f4; + --seq-3: #6da7ec; + --seq-4: #3987e5; + --seq-5: #256abf; + --seq-6: #184f95; +} + +* { + box-sizing: border-box; +} + +html, +body, +#root { + height: 100%; + margin: 0; +} + +body { + background: var(--bg0); + color: var(--fg1); + font: 14px/1.5 var(--font); + -webkit-font-smoothing: antialiased; +} + +a { + color: var(--blue); +} + +code, +pre, +.mono { + font-family: var(--mono); + font-size: 12.5px; +} + +button, +input, +select, +textarea { + font: inherit; + color: inherit; +} + +button { + cursor: pointer; + border: 1px solid var(--bg3); + background: var(--bg2); + border-radius: 6px; + padding: 5px 12px; +} +button:hover:not(:disabled) { + border-color: var(--fg3); +} +button:disabled { + opacity: 0.5; + cursor: default; +} +button.primary { + background: var(--accent); + border-color: var(--accent); + color: #282828; + font-weight: 600; +} +button.danger { + color: var(--red); +} +button.ghost { + background: transparent; + border-color: transparent; +} +button.ghost:hover:not(:disabled) { + background: var(--bg2); +} +button.small { + padding: 2px 8px; + font-size: 12px; +} + +input, +select, +textarea { + background: var(--bg1); + border: 1px solid var(--bg3); + border-radius: 6px; + padding: 5px 8px; + outline: none; +} +input:focus, +select:focus, +textarea:focus { + border-color: var(--accent); +} + +:focus-visible { + outline: 2px solid var(--accent); + outline-offset: 1px; +} + +/* --- layout ---------------------------------------------------------------- */ + +.app { + display: flex; + height: 100%; +} + +.sidebar { + width: 280px; + flex-shrink: 0; + background: var(--bg1); + border-right: 1px solid var(--bg2); + display: flex; + flex-direction: column; + min-height: 0; +} + +.sidebar-head { + display: flex; + align-items: center; + gap: 8px; + padding: 12px; + padding-top: max(12px, env(safe-area-inset-top)); +} +.sidebar-head .logo { + font-weight: 700; + font-size: 16px; + color: var(--fg0); + flex: 1; + display: flex; + align-items: center; + gap: 8px; +} +.sidebar-head .logo img { + width: 22px; + height: 22px; +} + +.conn-dot { + width: 8px; + height: 8px; + border-radius: 50%; + background: var(--red); +} +.conn-dot.on { + background: var(--green); +} + +.session-list { + flex: 1; + overflow-y: auto; + padding: 4px 8px; +} +.session-group { + font-size: 11px; + text-transform: uppercase; + letter-spacing: 0.05em; + color: var(--muted); + padding: 10px 8px 4px; +} +.session-item { + display: block; + width: 100%; + text-align: left; + border: none; + background: transparent; + padding: 7px 8px; + border-radius: 6px; + margin-bottom: 1px; +} +.session-item:hover { + background: var(--bg2); +} +.session-item.active { + background: var(--bg3); +} +.session-item .title { + display: flex; + align-items: center; + gap: 6px; + color: var(--fg0); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.session-item .title span { + overflow: hidden; + text-overflow: ellipsis; +} +.session-item .sub { + font-size: 11.5px; + color: var(--muted); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.busy-dot { + flex-shrink: 0; + width: 7px; + height: 7px; + border-radius: 50%; + background: var(--accent); + animation: pulse 1.2s infinite; +} +.attn-dot { + flex-shrink: 0; + width: 8px; + height: 8px; + border-radius: 50%; + background: var(--accent2); +} +@keyframes pulse { + 50% { + opacity: 0.3; + } +} + +.sidebar-foot { + border-top: 1px solid var(--bg2); + padding: 8px; + padding-bottom: max(8px, env(safe-area-inset-bottom)); + display: flex; + gap: 4px; +} +.sidebar-foot button { + flex: 1; +} +.sidebar-foot button.active { + background: var(--bg3); +} + +.main { + flex: 1; + min-width: 0; + display: flex; + flex-direction: column; + min-height: 0; +} + +.topbar { + display: flex; + align-items: center; + gap: 8px; + padding: 8px 14px; + padding-top: max(8px, env(safe-area-inset-top)); + border-bottom: 1px solid var(--bg2); + min-height: 48px; + flex-wrap: wrap; +} +.topbar .grow { + flex: 1; + min-width: 0; +} +.topbar h1 { + font-size: 15px; + margin: 0; + color: var(--fg0); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.topbar .path { + font-size: 11.5px; + color: var(--muted); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.menu-btn { + display: none; +} + +.chip { + display: inline-flex; + align-items: center; + gap: 4px; + font-size: 12px; + padding: 2px 8px; + border-radius: 999px; + background: var(--bg2); + color: var(--fg2); + white-space: nowrap; +} +.chip.warn { + color: var(--accent2); +} + +.page { + flex: 1; + overflow-y: auto; + padding: 20px; +} +.page-inner { + max-width: 1100px; + margin: 0 auto; +} + +/* --- chat ------------------------------------------------------------------ */ + +.chat-scroll { + flex: 1; + overflow-y: auto; + overscroll-behavior: contain; +} +.chat { + max-width: 900px; + margin: 0 auto; + padding: 16px 16px 24px; +} + +.msg { + margin-bottom: 14px; +} +.msg-user { + background: var(--bg1); + border: 1px solid var(--bg2); + border-radius: var(--radius); + padding: 8px 12px; + white-space: pre-wrap; + word-break: break-word; + position: relative; +} +.msg-user .msg-actions { + position: absolute; + top: 4px; + right: 4px; + display: none; +} +.msg-user:hover .msg-actions { + display: block; +} +.msg-user img { + max-height: 160px; + border-radius: 6px; + margin: 6px 6px 0 0; +} +.msg-meta { + font-size: 11px; + color: var(--muted); + margin-top: 2px; +} + +.markdown { + word-break: break-word; +} +.markdown > :first-child { + margin-top: 0; +} +.markdown > :last-child { + margin-bottom: 0; +} +.markdown pre { + background: var(--bg1); + border: 1px solid var(--bg2); + border-radius: 6px; + padding: 10px; + overflow-x: auto; +} +.markdown code { + background: var(--bg1); + padding: 1px 4px; + border-radius: 4px; +} +.markdown pre code { + background: none; + padding: 0; +} +.markdown table { + border-collapse: collapse; +} +.markdown th, +.markdown td { + border: 1px solid var(--bg3); + padding: 4px 8px; +} +.markdown blockquote { + border-left: 3px solid var(--bg3); + margin-left: 0; + padding-left: 12px; + color: var(--fg2); +} + +.reasoning { + color: var(--muted); + font-size: 13px; + border-left: 2px solid var(--bg3); + padding-left: 10px; + margin: 6px 0; +} +.reasoning summary { + cursor: pointer; + user-select: none; +} +.reasoning .body { + white-space: pre-wrap; + margin-top: 4px; +} + +.tool { + border: 1px solid var(--bg2); + border-radius: var(--radius); + margin: 6px 0; + background: var(--bg1); + overflow: hidden; +} +.tool > summary { + list-style: none; + cursor: pointer; + padding: 6px 10px; + display: flex; + align-items: center; + gap: 8px; + font-size: 13px; +} +.tool > summary::-webkit-details-marker { + display: none; +} +.tool .tool-name { + font-family: var(--mono); + font-size: 12px; + color: var(--accent); +} +.tool .tool-title { + color: var(--fg2); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + flex: 1; + min-width: 0; +} +.tool .status { + font-size: 12px; +} +.tool .status.ok { + color: var(--green); +} +.tool .status.err { + color: var(--red); +} +.tool .status.run { + color: var(--accent); +} +.tool-body { + border-top: 1px solid var(--bg2); + padding: 8px 10px; +} +.tool-body pre { + margin: 0; + white-space: pre-wrap; + word-break: break-word; + max-height: 420px; + overflow: auto; +} +.tool-body img { + max-width: 100%; + border-radius: 6px; + margin-top: 6px; +} +.tool-body .label { + font-size: 11px; + color: var(--muted); + text-transform: uppercase; + margin: 6px 0 2px; +} + +.diff { + font-family: var(--mono); + font-size: 12px; + overflow-x: auto; + max-height: 480px; + overflow-y: auto; + border-radius: 6px; + background: var(--bg0); +} +.diff div { + white-space: pre; + padding: 0 8px; +} +.diff .add { + background: var(--diff-add); +} +.diff .del { + background: var(--diff-del); +} +.diff .hunk { + color: var(--blue); +} +.diff .meta { + color: var(--muted); +} + +.summary-divider { + border: 1px dashed var(--bg3); + border-radius: var(--radius); + padding: 8px 12px; + color: var(--muted); + font-size: 13px; + margin: 14px 0; +} + +.todos { + border: 1px solid var(--bg2); + border-radius: var(--radius); + padding: 8px 12px; + margin: 8px 0; + font-size: 13px; +} +.todos ul { + list-style: none; + padding: 0; + margin: 4px 0 0; +} +.todos li { + display: flex; + gap: 8px; +} +.todos li.completed { + color: var(--muted); + text-decoration: line-through; +} +.todos li.in_progress { + color: var(--accent); + font-weight: 600; +} + +.card { + border: 1px solid var(--accent); + background: var(--bg1); + border-radius: var(--radius); + padding: 12px; + margin: 10px 0; + box-shadow: var(--shadow); +} +.card h3 { + margin: 0 0 6px; + font-size: 14px; + color: var(--fg0); + display: flex; + gap: 8px; + align-items: center; +} +.card .actions { + display: flex; + gap: 8px; + flex-wrap: wrap; + margin-top: 10px; +} +.card .from { + font-size: 11.5px; + color: var(--muted); +} + +.q-options { + display: grid; + gap: 6px; + margin: 8px 0; +} +.q-option { + display: flex; + gap: 8px; + align-items: flex-start; + text-align: left; + padding: 8px 10px; + border: 1px solid var(--bg3); + border-radius: 6px; + background: var(--bg0); + cursor: pointer; +} +.q-option.selected { + border-color: var(--accent); + background: var(--bg2); +} +.q-option .desc { + font-size: 12.5px; + color: var(--fg3); +} +.q-header { + display: inline-block; + font-size: 11px; + padding: 1px 6px; + border-radius: 4px; + background: var(--bg3); + color: var(--fg1); + margin-bottom: 4px; +} + +.error-box { + border: 1px solid var(--red); + color: var(--red); + border-radius: var(--radius); + padding: 8px 12px; + margin: 8px 0; + display: flex; + gap: 8px; + align-items: flex-start; + word-break: break-word; +} +.error-box span { + flex: 1; +} + +/* --- composer -------------------------------------------------------------- */ + +.composer-wrap { + border-top: 1px solid var(--bg2); + padding: 8px 12px; + padding-bottom: max(8px, env(safe-area-inset-bottom)); + background: var(--bg0); +} +.composer { + max-width: 900px; + margin: 0 auto; + position: relative; +} +.composer textarea { + width: 100%; + resize: none; + min-height: 44px; + max-height: 40vh; + padding: 10px 12px; + border-radius: var(--radius); + background: var(--bg1); + display: block; +} +.composer-bar { + display: flex; + align-items: center; + gap: 6px; + margin-top: 6px; + flex-wrap: wrap; +} +.composer-bar select { + max-width: 220px; + font-size: 12.5px; + padding: 3px 6px; +} +.composer-bar .grow { + flex: 1; +} +.mode-tabs { + display: inline-flex; + border: 1px solid var(--bg3); + border-radius: 6px; + overflow: hidden; +} +.mode-tabs button { + border: none; + border-radius: 0; + background: transparent; + padding: 3px 10px; + font-size: 12.5px; +} +.mode-tabs button.active { + background: var(--accent); + color: #282828; + font-weight: 600; +} +.attachments { + display: flex; + gap: 6px; + margin-bottom: 6px; + flex-wrap: wrap; +} +.attachments .att { + position: relative; +} +.attachments img { + height: 56px; + border-radius: 6px; + border: 1px solid var(--bg3); +} +.attachments button { + position: absolute; + top: -6px; + right: -6px; + padding: 0 5px; + font-size: 11px; + border-radius: 50%; +} +.suggest { + position: absolute; + bottom: 100%; + left: 0; + right: 0; + background: var(--bg1); + border: 1px solid var(--bg3); + border-radius: var(--radius); + box-shadow: var(--shadow); + max-height: 260px; + overflow-y: auto; + margin-bottom: 4px; + z-index: 5; +} +.suggest div { + padding: 6px 10px; + cursor: pointer; + display: flex; + gap: 10px; +} +.suggest div.active, +.suggest div:hover { + background: var(--bg2); +} +.suggest .name { + font-family: var(--mono); + color: var(--accent); +} +.suggest .desc { + color: var(--fg3); + font-size: 12.5px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +/* --- forms, settings ------------------------------------------------------- */ + +.tabs { + display: flex; + gap: 4px; + border-bottom: 1px solid var(--bg2); + margin-bottom: 16px; + flex-wrap: wrap; +} +.tabs button { + border: none; + border-bottom: 2px solid transparent; + border-radius: 0; + background: transparent; + padding: 8px 12px; +} +.tabs button.active { + border-bottom-color: var(--accent); + color: var(--fg0); +} + +.form { + display: grid; + grid-template-columns: minmax(140px, 220px) 1fr; + gap: 10px 16px; + align-items: center; + max-width: 820px; +} +.form label { + color: var(--fg2); +} +.form .hint { + grid-column: 2; + font-size: 12px; + color: var(--muted); + margin-top: -6px; +} +.panel { + border: 1px solid var(--bg2); + border-radius: var(--radius); + padding: 14px; + margin-bottom: 14px; + background: var(--bg1); +} +.panel h3 { + margin: 0 0 10px; + font-size: 14px; + display: flex; + align-items: center; + gap: 8px; + color: var(--fg0); +} +.row { + display: flex; + gap: 8px; + align-items: center; + flex-wrap: wrap; +} +.spacer { + flex: 1; +} +table.grid { + border-collapse: collapse; + width: 100%; + font-size: 13px; +} +table.grid th { + text-align: left; + color: var(--muted); + font-weight: 500; + font-size: 12px; + border-bottom: 1px solid var(--bg3); + padding: 6px; +} +table.grid td { + border-bottom: 1px solid var(--bg2); + padding: 5px 6px; +} +table.grid td.num, +table.grid th.num { + text-align: right; + font-variant-numeric: tabular-nums; +} +table.grid input { + width: 100%; + min-width: 60px; +} +.raw-editor { + width: 100%; + min-height: 60vh; + font-family: var(--mono); + font-size: 12.5px; + line-height: 1.5; + tab-size: 2; +} +.notice { + padding: 8px 12px; + border-radius: var(--radius); + background: var(--bg2); + margin-bottom: 12px; + font-size: 13px; +} +.notice.ok { + color: var(--green); +} +.notice.err { + color: var(--red); +} +.empty { + color: var(--muted); + text-align: center; + padding: 40px 0; +} + +.dir-list { + border: 1px solid var(--bg2); + border-radius: var(--radius); + max-height: 340px; + overflow-y: auto; +} +.dir-list button { + display: flex; + width: 100%; + gap: 8px; + border: none; + border-bottom: 1px solid var(--bg2); + border-radius: 0; + background: transparent; + text-align: left; + padding: 7px 10px; +} +.dir-list button:hover { + background: var(--bg2); +} + +/* --- stats ----------------------------------------------------------------- */ + +.kpis { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); + gap: 10px; + margin-bottom: 16px; +} +.kpi { + background: var(--bg1); + border: 1px solid var(--bg2); + border-radius: var(--radius); + padding: 12px; +} +.kpi .k-label { + font-size: 12px; + color: var(--fg3); +} +.kpi .k-value { + font-size: 22px; + font-weight: 650; + color: var(--fg0); + font-variant-numeric: tabular-nums; +} +.kpi .k-sub { + font-size: 11.5px; + color: var(--muted); +} +.chart { + position: relative; +} +.chart svg { + display: block; + width: 100%; + overflow: visible; +} +.chart .axis text { + fill: var(--muted); + font-size: 11px; +} +.chart .grid-line { + stroke: var(--bg2); + stroke-width: 1; +} +.legend { + display: flex; + gap: 12px; + flex-wrap: wrap; + font-size: 12px; + color: var(--fg2); + margin-bottom: 8px; +} +.legend span { + display: inline-flex; + align-items: center; + gap: 5px; +} +.legend i { + width: 10px; + height: 10px; + border-radius: 3px; + display: inline-block; +} +.tooltip { + position: absolute; + pointer-events: none; + background: var(--bg2); + border: 1px solid var(--bg3); + border-radius: 6px; + padding: 6px 9px; + font-size: 12px; + box-shadow: var(--shadow); + white-space: nowrap; + z-index: 10; + color: var(--fg1); +} +.tooltip b { + color: var(--fg0); +} +.tooltip .tt-row { + display: flex; + gap: 8px; + align-items: center; + justify-content: space-between; +} +.tooltip i { + width: 8px; + height: 8px; + border-radius: 2px; + display: inline-block; +} +.two-col { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 14px; +} + +/* --- login ----------------------------------------------------------------- */ + +.login { + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} +.login form { + background: var(--bg1); + border: 1px solid var(--bg2); + border-radius: 12px; + padding: 28px; + width: min(360px, 92vw); + display: grid; + gap: 12px; + text-align: center; +} +.login img { + width: 56px; + margin: 0 auto; +} + +/* --- responsive ------------------------------------------------------------ */ + +@media (max-width: 800px) { + .sidebar { + position: fixed; + inset: 0 auto 0 0; + z-index: 20; + transform: translateX(-100%); + transition: transform 0.18s ease; + box-shadow: var(--shadow); + width: min(300px, 86vw); + } + .sidebar.open { + transform: none; + } + .backdrop { + position: fixed; + inset: 0; + background: rgba(0, 0, 0, 0.4); + z-index: 15; + } + .menu-btn { + display: inline-block; + } + .form { + grid-template-columns: 1fr; + } + .form .hint { + grid-column: 1; + } + .two-col { + grid-template-columns: 1fr; + } + .page { + padding: 12px; + } + .chat { + padding: 12px 10px 20px; + } +} + +/* --- syntax highlighting (highlight.js classes, Gruvbox colours) ----------- */ +.hljs-keyword, +.hljs-selector-tag, +.hljs-built_in { + color: var(--red); +} +.hljs-string, +.hljs-attr, +.hljs-regexp { + color: var(--green); +} +.hljs-number, +.hljs-literal { + color: var(--purple); +} +.hljs-comment, +.hljs-quote { + color: var(--muted); + font-style: italic; +} +.hljs-title, +.hljs-section, +.hljs-function { + color: var(--aqua); +} +.hljs-type, +.hljs-class, +.hljs-tag { + color: var(--accent); +} +.hljs-variable, +.hljs-template-variable, +.hljs-params { + color: var(--blue); +} +.hljs-meta, +.hljs-symbol { + color: var(--accent2); +} +.hljs-addition { + background: var(--diff-add); +} +.hljs-deletion { + background: var(--diff-del); +} diff --git a/web/src/theme.ts b/web/src/theme.ts new file mode 100644 index 0000000..c8fcc2b --- /dev/null +++ b/web/src/theme.ts @@ -0,0 +1,15 @@ +const KEY = "codecraft.theme"; + +export type Theme = "system" | "dark" | "light"; + +export function getTheme(): Theme { + return (localStorage.getItem(KEY) as Theme) ?? "system"; +} + +export function applyTheme(theme: Theme = getTheme()) { + localStorage.setItem(KEY, theme); + if (theme === "system") delete document.documentElement.dataset.theme; + else document.documentElement.dataset.theme = theme; + const dark = theme === "dark" || (theme === "system" && matchMedia("(prefers-color-scheme: dark)").matches); + document.querySelector('meta[name="theme-color"]')?.setAttribute("content", dark ? "#282828" : "#fbf1c7"); +} diff --git a/web/src/types.ts b/web/src/types.ts new file mode 100644 index 0000000..56a063a --- /dev/null +++ b/web/src/types.ts @@ -0,0 +1,147 @@ +// Mirrors server/src/types.rs + +export interface ImageData { + media_type: string; + data: string; +} + +export type Part = + | { type: "text"; text: string } + | { type: "image"; image: ImageData } + | { type: "reasoning"; text: string; signature?: string } + | { type: "tool_call"; id: string; name: string; input: any } + | { + type: "tool_result"; + call_id: string; + name: string; + content: string; + images?: ImageData[]; + is_error: boolean; + meta?: any; + } + | { type: "summary"; text: string }; + +export interface Usage { + input_tokens: number; + output_tokens: number; + cache_read_tokens: number; + cache_write_tokens: number; +} + +export interface Message { + id: string; + role: "user" | "assistant"; + parts: Part[]; + model?: string; + usage?: Usage; + created_at: number; +} + +export interface Todo { + content: string; + status: "pending" | "in_progress" | "completed"; +} + +export interface Session { + id: string; + title: string; + cwd: string; + model: string; + agent: string; + permission_mode: "default" | "accept_edits" | "bypass"; + parent_id?: string; + created_at: number; + updated_at: number; + todos: Todo[] | null; + last_usage?: Usage | null; + busy?: boolean; +} + +export interface QuestionOption { + label: string; + description?: string; +} + +export interface Question { + question: string; + header?: string; + options: QuestionOption[]; + multi_select?: boolean; +} + +export interface PermissionRequest { + type: "permission_request"; + id: string; + session_id: string; + root_session_id?: string; + tool: string; + title: string; + input: any; + diff?: string; +} + +export interface QuestionRequest { + type: "question_request"; + id: string; + session_id: string; + root_session_id?: string; + source: string; + questions: Question[]; +} + +export type ServerEvent = + | { type: "session_updated"; session: Session } + | { type: "session_deleted"; session_id: string } + | { type: "session_status"; session_id: string; busy: boolean } + | { type: "message_added"; session_id: string; message: Message } + | { type: "text_delta"; session_id: string; message_id: string; text: string } + | { type: "reasoning_delta"; session_id: string; message_id: string; text: string } + | { type: "tool_started"; session_id: string; message_id: string; call_id: string; name: string; input: any } + | { type: "tool_progress"; session_id: string; call_id: string; output: string } + | PermissionRequest + | { type: "permission_resolved"; id: string; session_id: string } + | QuestionRequest + | { type: "question_resolved"; id: string; session_id: string } + | { type: "error"; session_id: string; message: string } + | { type: "mcp_status"; servers: Record<string, McpServerStatus> } + | { type: "resync" }; + +export interface McpServerStatus { + status: { state: "disabled" | "connecting" | "connected" | "failed"; tools?: number; error?: string }; + tools: { name: string; description: string }[]; +} + +export interface ModelInfo { + id: string; + name: string; + context?: number; + reasoning: boolean; + vision: boolean; +} + +export interface ProviderModels { + provider: string; + models: ModelInfo[]; +} + +export interface AgentInfo { + name: string; + description: string; + mode: "primary" | "subagent"; + read_only: boolean; +} + +export interface Aggregate { + requests: number; + input_tokens: number; + output_tokens: number; + cache_read_tokens: number; + cache_write_tokens: number; + cost: number; + errors: number; + avg_ttft_ms: number; + output_tps: number; + prefill_tps: number; + cache_hit_rate: number; + duration_ms: number; +} diff --git a/web/tsconfig.json b/web/tsconfig.json new file mode 100644 index 0000000..58f34e9 --- /dev/null +++ b/web/tsconfig.json @@ -0,0 +1,15 @@ +{ + "compilerOptions": { + "target": "ES2022", + "lib": ["ES2022", "DOM", "DOM.Iterable"], + "module": "ESNext", + "moduleResolution": "bundler", + "jsx": "react-jsx", + "strict": true, + "noEmit": true, + "skipLibCheck": true, + "resolveJsonModule": true, + "types": ["vite/client", "vite-plugin-pwa/client"] + }, + "include": ["src"] +} diff --git a/web/vite.config.ts b/web/vite.config.ts new file mode 100644 index 0000000..f0ade0c --- /dev/null +++ b/web/vite.config.ts @@ -0,0 +1,40 @@ +import { defineConfig } from "vite"; +import react from "@vitejs/plugin-react"; +import { VitePWA } from "vite-plugin-pwa"; + +const backend = process.env.CODECRAFT_BACKEND ?? "http://127.0.0.1:8787"; + +export default defineConfig({ + plugins: [ + react(), + VitePWA({ + registerType: "autoUpdate", + includeAssets: ["icon.svg", "apple-touch-icon.png"], + manifest: { + name: "CodeCraft", + short_name: "CodeCraft", + description: "Web-based coding harness for AI models", + theme_color: "#282828", + background_color: "#282828", + display: "standalone", + start_url: "/", + icons: [ + { src: "icon-192.png", sizes: "192x192", type: "image/png" }, + { src: "icon-512.png", sizes: "512x512", type: "image/png" }, + { src: "icon-512.png", sizes: "512x512", type: "image/png", purpose: "maskable" }, + { src: "icon.svg", sizes: "any", type: "image/svg+xml" }, + ], + }, + workbox: { + // The API is always live data; only the app shell is cached. + navigateFallbackDenylist: [/^\/api/], + runtimeCaching: [], + }, + }), + ], + server: { + proxy: { + "/api": { target: backend, ws: true, changeOrigin: true }, + }, + }, +});