Spaces:
Sleeping
Sleeping
| import { useEffect, useRef, useState } from "react"; | |
| type LineKind = "user" | "system" | "error" | "muted"; | |
| interface Line { | |
| kind: LineKind; | |
| text: string; | |
| } | |
| interface PersonaSummary { | |
| name: string; | |
| title: string; | |
| temperature: number; | |
| tools: string[]; | |
| } | |
| interface Citation { | |
| source: string; | |
| index: number; | |
| text: string; | |
| score: number; | |
| } | |
| interface AskResponse { | |
| persona: string; | |
| query: string; | |
| answer: string; | |
| citations: Citation[]; | |
| model: string; | |
| } | |
| interface QueryResponse { | |
| query: string; | |
| results: Citation[]; | |
| } | |
| const HELP = `T.I.A. terminal — available commands: | |
| /personas List configured personas | |
| /persona <name> Select active persona | |
| /health Hit /v1/system/health | |
| /search <query> Plain RAG search via /v1/harvest/query | |
| /token <jwt> Set/replace the Bearer token (kept in memory only) | |
| /clear Clear the screen | |
| /help Show this message | |
| <free text> Ask the active persona (defaults to Librarian)`; | |
| export function TerminalView() { | |
| const [lines, setLines] = useState<Line[]>([ | |
| { kind: "system", text: "T.I.A. RAG Engine — Terminal v0.1" }, | |
| { kind: "muted", text: "Type /help for available commands." }, | |
| ]); | |
| const [input, setInput] = useState(""); | |
| const [persona, setPersona] = useState("Librarian"); | |
| const [personas, setPersonas] = useState<PersonaSummary[]>([]); | |
| const [token, setToken] = useState<string>(""); | |
| const [busy, setBusy] = useState(false); | |
| const outputRef = useRef<HTMLDivElement>(null); | |
| const inputRef = useRef<HTMLInputElement>(null); | |
| useEffect(() => { | |
| outputRef.current?.scrollTo({ top: outputRef.current.scrollHeight }); | |
| }, [lines]); | |
| useEffect(() => { | |
| inputRef.current?.focus(); | |
| }, []); | |
| function append(kind: LineKind, text: string) { | |
| setLines((prev) => [...prev, { kind, text }]); | |
| } | |
| async function api(path: string, init?: RequestInit): Promise<Response> { | |
| const headers = new Headers(init?.headers || {}); | |
| headers.set("Accept", "application/json"); | |
| if (init?.body && !headers.has("Content-Type")) { | |
| headers.set("Content-Type", "application/json"); | |
| } | |
| if (token) headers.set("Authorization", `Bearer ${token}`); | |
| return fetch(path, { ...init, headers }); | |
| } | |
| async function loadPersonas() { | |
| try { | |
| const res = await api("/v1/personas"); | |
| if (!res.ok) { | |
| append("error", `GET /v1/personas → ${res.status}`); | |
| return; | |
| } | |
| const data = (await res.json()) as { personas: PersonaSummary[] }; | |
| setPersonas(data.personas); | |
| append( | |
| "system", | |
| `Personas: ${data.personas.map((p) => p.name).join(", ")}` | |
| ); | |
| } catch (err) { | |
| append("error", `Failed to load personas: ${(err as Error).message}`); | |
| } | |
| } | |
| async function runHealth() { | |
| try { | |
| const res = await fetch("/v1/system/health"); | |
| const body = await res.json(); | |
| append("system", JSON.stringify(body, null, 2)); | |
| } catch (err) { | |
| append("error", `health check failed: ${(err as Error).message}`); | |
| } | |
| } | |
| async function runSearch(query: string) { | |
| if (!query.trim()) { | |
| append("error", "Usage: /search <query>"); | |
| return; | |
| } | |
| setBusy(true); | |
| try { | |
| const res = await api("/v1/harvest/query", { | |
| method: "POST", | |
| body: JSON.stringify({ query, top_k: 5 }), | |
| }); | |
| if (!res.ok) { | |
| append("error", `query failed: ${res.status} ${await res.text()}`); | |
| return; | |
| } | |
| const data = (await res.json()) as QueryResponse; | |
| if (!data.results.length) { | |
| append("muted", "(no results)"); | |
| } | |
| for (const hit of data.results) { | |
| append( | |
| "system", | |
| `[${hit.source}#${hit.index}] (score=${hit.score})\n${hit.text}` | |
| ); | |
| } | |
| } catch (err) { | |
| append("error", `search failed: ${(err as Error).message}`); | |
| } finally { | |
| setBusy(false); | |
| } | |
| } | |
| async function askPersona(query: string) { | |
| setBusy(true); | |
| try { | |
| const res = await api(`/v1/personas/${encodeURIComponent(persona)}/ask`, { | |
| method: "POST", | |
| body: JSON.stringify({ query, top_k: 5 }), | |
| }); | |
| if (!res.ok) { | |
| append( | |
| "error", | |
| `${persona} replied ${res.status}: ${await res.text()}` | |
| ); | |
| return; | |
| } | |
| const data = (await res.json()) as AskResponse; | |
| append("system", `${data.persona} (${data.model}):\n${data.answer}`); | |
| if (data.citations.length) { | |
| const cites = data.citations | |
| .map((c) => ` • [${c.source}#${c.index}] (score=${c.score})`) | |
| .join("\n"); | |
| append("muted", `citations:\n${cites}`); | |
| } | |
| } catch (err) { | |
| append("error", `persona call failed: ${(err as Error).message}`); | |
| } finally { | |
| setBusy(false); | |
| } | |
| } | |
| async function handleSubmit(raw: string) { | |
| const command = raw.trim(); | |
| if (!command) return; | |
| append("user", `❯ ${command}`); | |
| if (command === "/help") { | |
| append("muted", HELP); | |
| return; | |
| } | |
| if (command === "/clear") { | |
| setLines([]); | |
| return; | |
| } | |
| if (command === "/personas") { | |
| await loadPersonas(); | |
| return; | |
| } | |
| if (command === "/health") { | |
| await runHealth(); | |
| return; | |
| } | |
| if (command.startsWith("/persona ")) { | |
| const next = command.slice("/persona ".length).trim(); | |
| if (!next) { | |
| append("error", "Usage: /persona <name>"); | |
| } else { | |
| setPersona(next); | |
| append("system", `Active persona set to: ${next}`); | |
| } | |
| return; | |
| } | |
| if (command.startsWith("/search ")) { | |
| await runSearch(command.slice("/search ".length).trim()); | |
| return; | |
| } | |
| if (command.startsWith("/token ")) { | |
| const next = command.slice("/token ".length).trim(); | |
| setToken(next); | |
| append( | |
| "system", | |
| next ? "Bearer token updated (in-memory)." : "Bearer token cleared." | |
| ); | |
| return; | |
| } | |
| if (command.startsWith("/")) { | |
| append("error", `Unknown command: ${command}. Type /help.`); | |
| return; | |
| } | |
| await askPersona(command); | |
| } | |
| function onKeyDown(event: React.KeyboardEvent<HTMLInputElement>) { | |
| if (event.key === "Enter" && !busy) { | |
| const value = input; | |
| setInput(""); | |
| void handleSubmit(value); | |
| } | |
| } | |
| return ( | |
| <div className="terminal"> | |
| <div className="terminal-header"> | |
| <div className="terminal-title">T.I.A. // TERMINAL</div> | |
| <div className="terminal-controls"> | |
| <label htmlFor="persona-select">persona</label> | |
| <select | |
| id="persona-select" | |
| value={persona} | |
| onChange={(e) => setPersona(e.target.value)} | |
| > | |
| {(personas.length | |
| ? personas.map((p) => p.name) | |
| : ["Librarian", "Vanguard", "Oracle"] | |
| ).map((name) => ( | |
| <option key={name} value={name}> | |
| {name} | |
| </option> | |
| ))} | |
| </select> | |
| <button onClick={() => void loadPersonas()} type="button"> | |
| refresh | |
| </button> | |
| <button onClick={() => void runHealth()} type="button"> | |
| health | |
| </button> | |
| </div> | |
| </div> | |
| <div className="terminal-output" ref={outputRef}> | |
| {lines.map((line, i) => ( | |
| <div key={i} className={`terminal-line ${line.kind}`}> | |
| {line.text} | |
| </div> | |
| ))} | |
| </div> | |
| <div className="terminal-input"> | |
| <span>❯</span> | |
| <input | |
| ref={inputRef} | |
| type="text" | |
| autoComplete="off" | |
| spellCheck={false} | |
| disabled={busy} | |
| value={input} | |
| placeholder={busy ? "…" : `ask ${persona} or /help`} | |
| onChange={(e) => setInput(e.target.value)} | |
| onKeyDown={onKeyDown} | |
| /> | |
| </div> | |
| </div> | |
| ); | |
| } | |