chore: import upstream snapshot with attribution
This commit is contained in:
wehub-resource-sync
@@ -0,0 +1,392 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { render, Box, Text, useInput } from "ink";
|
||||
import TextInput from "ink-text-input";
|
||||
import { marked } from "marked";
|
||||
import { markedTerminal } from "marked-terminal";
|
||||
import { apiFetch } from "../api.mjs";
|
||||
import { TokenCounter } from "../tui-components/TokenCounter.jsx";
|
||||
import { MarkdownView } from "../tui-components/MarkdownView.jsx";
|
||||
import { saveSession, loadSession, listSessions, autosave, deleteSession } from "./session.mjs";
|
||||
import { writeFileSync } from "node:fs";
|
||||
|
||||
marked.use(markedTerminal({ width: 80 }));
|
||||
|
||||
const SLASH_COMMANDS = [
|
||||
"model",
|
||||
"combo",
|
||||
"system",
|
||||
"clear",
|
||||
"save",
|
||||
"load",
|
||||
"list",
|
||||
"history",
|
||||
"export",
|
||||
"tokens",
|
||||
"file",
|
||||
"temperature",
|
||||
"max-tokens",
|
||||
"reasoning",
|
||||
"skill",
|
||||
"memory",
|
||||
"help",
|
||||
"exit",
|
||||
"quit",
|
||||
];
|
||||
|
||||
const HELP_TEXT = `Available commands:
|
||||
/model <id> Change active model
|
||||
/combo <name> Change active combo
|
||||
/system <prompt> Set system prompt
|
||||
/clear Clear conversation history
|
||||
/save <name> Save current session
|
||||
/load <name> Load a saved session
|
||||
/list List saved sessions
|
||||
/history [N] Show last N messages (default 10)
|
||||
/export <file> Export conversation (md/json/txt)
|
||||
/tokens Show token usage + cost
|
||||
/file <path> Attach file content to next message
|
||||
/temperature <t> Adjust temperature (0-2)
|
||||
/max-tokens <n> Adjust max tokens
|
||||
/reasoning <level> Adjust reasoning level
|
||||
/skill execute <id> '<args>' Run a skill
|
||||
/memory search <q> Search memory
|
||||
/memory add <text> Add to memory
|
||||
/help Show this help
|
||||
/exit, /quit Exit REPL`;
|
||||
|
||||
function Message({ message }) {
|
||||
const isUser = message.role === "user";
|
||||
const isSystem = message.role === "system";
|
||||
return (
|
||||
<Box flexDirection="column" marginBottom={1}>
|
||||
{isUser && (
|
||||
<Text color="green" bold>
|
||||
{">"}{" "}
|
||||
</Text>
|
||||
)}
|
||||
{isSystem && <Text color="yellow">[system] </Text>}
|
||||
<MarkdownView content={message.content} />
|
||||
{message.latencyMs != null && (
|
||||
<Text dimColor>
|
||||
[{message.model} · {message.latencyMs}ms · {message.usage?.total_tokens ?? "?"} tok]
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
function SidePanel({ session }) {
|
||||
return (
|
||||
<Box flexDirection="column" width={20} borderStyle="single" borderColor="gray" paddingX={1}>
|
||||
<Text bold underline>
|
||||
Session
|
||||
</Text>
|
||||
<Text>
|
||||
Model: <Text color="yellow">{session.model}</Text>
|
||||
</Text>
|
||||
{session.combo && <Text>Combo: {session.combo}</Text>}
|
||||
<Text>Msgs: {session.messages.length}</Text>
|
||||
<Box marginTop={1}>
|
||||
<TokenCounter
|
||||
tokensIn={session.totalUsage.in}
|
||||
tokensOut={session.totalUsage.out}
|
||||
costUsd={session.totalCost}
|
||||
/>
|
||||
</Box>
|
||||
<Box marginTop={1} flexDirection="column">
|
||||
<Text dimColor bold>
|
||||
Commands
|
||||
</Text>
|
||||
{["/model", "/combo", "/system", "/clear", "/save", "/load", "/tokens", "/exit"].map(
|
||||
(c) => (
|
||||
<Text key={c} dimColor>
|
||||
{c}
|
||||
</Text>
|
||||
)
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
function ReplApp({ initialOptions, onExit }) {
|
||||
const [session, setSession] = useState(() => {
|
||||
if (initialOptions.resume) {
|
||||
try {
|
||||
return loadSession(initialOptions.resume);
|
||||
} catch {}
|
||||
}
|
||||
return {
|
||||
model: initialOptions.model || "auto",
|
||||
combo: initialOptions.combo || null,
|
||||
system: initialOptions.system || null,
|
||||
messages: [],
|
||||
totalUsage: { in: 0, out: 0 },
|
||||
totalCost: 0,
|
||||
createdAt: new Date().toISOString(),
|
||||
};
|
||||
});
|
||||
const [input, setInput] = useState("");
|
||||
const [historyBuf, setHistoryBuf] = useState([]);
|
||||
const [historyIdx, setHistoryIdx] = useState(-1);
|
||||
const [pending, setPending] = useState(false);
|
||||
const [statusMsg, setStatusMsg] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (statusMsg) {
|
||||
const t = setTimeout(() => setStatusMsg(null), 3000);
|
||||
return () => clearTimeout(t);
|
||||
}
|
||||
}, [statusMsg]);
|
||||
|
||||
useInput((char, key) => {
|
||||
if (pending) return;
|
||||
if (key.upArrow && !input) {
|
||||
const next = Math.min(historyIdx + 1, historyBuf.length - 1);
|
||||
if (next >= 0) {
|
||||
setHistoryIdx(next);
|
||||
setInput(historyBuf[historyBuf.length - 1 - next] || "");
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (key.downArrow && historyIdx >= 0) {
|
||||
const next = historyIdx - 1;
|
||||
setHistoryIdx(next);
|
||||
setInput(next < 0 ? "" : historyBuf[historyBuf.length - 1 - next] || "");
|
||||
return;
|
||||
}
|
||||
if (key.tab && input.startsWith("/")) {
|
||||
const partial = input.slice(1).split(" ")[0];
|
||||
const match = SLASH_COMMANDS.find((c) => c.startsWith(partial) && c !== partial);
|
||||
if (match) setInput("/" + match + " ");
|
||||
}
|
||||
});
|
||||
|
||||
async function submit(value) {
|
||||
const text = (value ?? input).trim();
|
||||
if (!text) return;
|
||||
setInput("");
|
||||
setHistoryBuf((h) => [...h, text]);
|
||||
setHistoryIdx(-1);
|
||||
|
||||
if (text.startsWith("/")) {
|
||||
await handleSlash(text);
|
||||
} else {
|
||||
await sendMessage(text);
|
||||
}
|
||||
}
|
||||
|
||||
async function sendMessage(content) {
|
||||
setPending(true);
|
||||
const t0 = Date.now();
|
||||
const nextMsgs = [...session.messages, { role: "user", content }];
|
||||
setSession((s) => ({ ...s, messages: nextMsgs }));
|
||||
try {
|
||||
const payload = {
|
||||
model: session.model,
|
||||
messages: [
|
||||
...(session.system ? [{ role: "system", content: session.system }] : []),
|
||||
...nextMsgs,
|
||||
],
|
||||
};
|
||||
if (session.combo) payload.combo = session.combo;
|
||||
const res = await apiFetch("/v1/chat/completions", {
|
||||
method: "POST",
|
||||
body: payload,
|
||||
baseUrl: initialOptions.baseUrl,
|
||||
apiKey: initialOptions.apiKey,
|
||||
});
|
||||
const data = await res.json();
|
||||
const latencyMs = Date.now() - t0;
|
||||
const replyContent = data.choices?.[0]?.message?.content ?? "";
|
||||
const usage = data.usage || {};
|
||||
const costUsd = data.cost_usd || 0;
|
||||
setSession((s) => ({
|
||||
...s,
|
||||
messages: [
|
||||
...s.messages,
|
||||
{
|
||||
role: "assistant",
|
||||
content: replyContent,
|
||||
model: data.model || s.model,
|
||||
latencyMs,
|
||||
usage,
|
||||
},
|
||||
],
|
||||
totalUsage: {
|
||||
in: s.totalUsage.in + (usage.prompt_tokens || 0),
|
||||
out: s.totalUsage.out + (usage.completion_tokens || 0),
|
||||
},
|
||||
totalCost: s.totalCost + costUsd,
|
||||
}));
|
||||
} catch (err) {
|
||||
setSession((s) => ({
|
||||
...s,
|
||||
messages: [...s.messages, { role: "system", content: `[error] ${err.message}` }],
|
||||
}));
|
||||
} finally {
|
||||
setPending(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSlash(line) {
|
||||
const parts = line.slice(1).trim().split(/\s+/);
|
||||
const cmd = parts[0];
|
||||
const args = parts.slice(1);
|
||||
switch (cmd) {
|
||||
case "exit":
|
||||
case "quit":
|
||||
autosave(session);
|
||||
onExit();
|
||||
return;
|
||||
case "model":
|
||||
if (args[0]) {
|
||||
setSession((s) => ({ ...s, model: args[0] }));
|
||||
setStatusMsg(`✓ Model changed to ${args[0]}`);
|
||||
}
|
||||
break;
|
||||
case "combo":
|
||||
setSession((s) => ({ ...s, combo: args[0] || null }));
|
||||
setStatusMsg(`✓ Combo changed to ${args[0] || "none"}`);
|
||||
break;
|
||||
case "system":
|
||||
setSession((s) => ({ ...s, system: args.join(" ") || null }));
|
||||
setStatusMsg("✓ System prompt updated");
|
||||
break;
|
||||
case "clear":
|
||||
setSession((s) => ({ ...s, messages: [] }));
|
||||
setStatusMsg("✓ History cleared");
|
||||
break;
|
||||
case "tokens":
|
||||
setSession((s) => ({
|
||||
...s,
|
||||
messages: [
|
||||
...s.messages,
|
||||
{
|
||||
role: "system",
|
||||
content: `In: ${s.totalUsage.in} · Out: ${s.totalUsage.out} · Cost: $${s.totalCost.toFixed(4)}`,
|
||||
},
|
||||
],
|
||||
}));
|
||||
break;
|
||||
case "save":
|
||||
if (args[0]) {
|
||||
saveSession(args[0], session);
|
||||
setStatusMsg(`✓ Session saved as '${args[0]}'`);
|
||||
} else {
|
||||
setStatusMsg("Usage: /save <name>");
|
||||
}
|
||||
break;
|
||||
case "load":
|
||||
if (args[0]) {
|
||||
try {
|
||||
const loaded = loadSession(args[0]);
|
||||
setSession(loaded);
|
||||
setStatusMsg(`✓ Session '${args[0]}' loaded`);
|
||||
} catch {
|
||||
setStatusMsg(`✗ Session '${args[0]}' not found`);
|
||||
}
|
||||
}
|
||||
break;
|
||||
case "list": {
|
||||
const sessions = listSessions();
|
||||
const content =
|
||||
sessions.length > 0
|
||||
? sessions
|
||||
.map(
|
||||
(s) => `• ${s.name} ${s.updatedAt ? new Date(s.updatedAt).toLocaleString() : ""}`
|
||||
)
|
||||
.join("\n")
|
||||
: "No saved sessions";
|
||||
setSession((s) => ({
|
||||
...s,
|
||||
messages: [...s.messages, { role: "system", content }],
|
||||
}));
|
||||
break;
|
||||
}
|
||||
case "history": {
|
||||
const n = parseInt(args[0] || "10", 10);
|
||||
const msgs = session.messages
|
||||
.slice(-n)
|
||||
.map((m) => `[${m.role}] ${String(m.content).substring(0, 120)}`)
|
||||
.join("\n");
|
||||
setSession((s) => ({
|
||||
...s,
|
||||
messages: [...s.messages, { role: "system", content: msgs || "No history" }],
|
||||
}));
|
||||
break;
|
||||
}
|
||||
case "export": {
|
||||
const filename = args[0];
|
||||
if (!filename) {
|
||||
setStatusMsg("Usage: /export <file.md|json|txt>");
|
||||
break;
|
||||
}
|
||||
try {
|
||||
const ext = filename.split(".").pop();
|
||||
let content;
|
||||
if (ext === "json") {
|
||||
content = JSON.stringify(session, null, 2);
|
||||
} else if (ext === "md") {
|
||||
content = session.messages
|
||||
.map((m) => `**${m.role}**\n\n${m.content}`)
|
||||
.join("\n\n---\n\n");
|
||||
} else {
|
||||
content = session.messages.map((m) => `[${m.role}]: ${m.content}`).join("\n\n");
|
||||
}
|
||||
writeFileSync(filename, content);
|
||||
setStatusMsg(`✓ Exported to ${filename}`);
|
||||
} catch (err) {
|
||||
setStatusMsg(`✗ Export failed: ${err.message}`);
|
||||
}
|
||||
break;
|
||||
}
|
||||
case "temperature":
|
||||
case "max-tokens":
|
||||
case "reasoning":
|
||||
setStatusMsg(`✓ ${cmd} set to ${args[0]} (applied to next request)`);
|
||||
break;
|
||||
case "skill":
|
||||
case "memory":
|
||||
await sendMessage(line);
|
||||
break;
|
||||
case "help":
|
||||
setSession((s) => ({
|
||||
...s,
|
||||
messages: [...s.messages, { role: "system", content: HELP_TEXT }],
|
||||
}));
|
||||
break;
|
||||
default:
|
||||
setStatusMsg(`Unknown command: /${cmd} — type /help`);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Box flexDirection="row" height={process.stdout.rows}>
|
||||
<Box flexDirection="column" flexGrow={1} paddingX={1}>
|
||||
<Box flexDirection="column" flexGrow={1} overflow="hidden">
|
||||
{session.messages.map((m, i) => (
|
||||
<Message key={i} message={m} />
|
||||
))}
|
||||
{pending && <Text color="cyan">⠋ generating…</Text>}
|
||||
{statusMsg && <Text color="green">{statusMsg}</Text>}
|
||||
</Box>
|
||||
<Box borderStyle="round" borderColor={pending ? "gray" : "cyan"}>
|
||||
<Text color="green">{"> "}</Text>
|
||||
<TextInput value={input} onChange={setInput} onSubmit={submit} />
|
||||
</Box>
|
||||
<Text dimColor>↑↓ history · Tab autocomplete · /help · /exit</Text>
|
||||
</Box>
|
||||
<SidePanel session={session} />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export async function runRepl(opts = {}) {
|
||||
return new Promise((resolve) => {
|
||||
const { unmount, waitUntilExit } = render(
|
||||
<ReplApp initialOptions={opts} onExit={() => unmount()} />
|
||||
);
|
||||
waitUntilExit().then(resolve);
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user