dillenberg/agenttwo
1
0
Fork 0
mirror of https://github.com/Jeuners/agenttwo.git synced 2026-09-09 15:02:31 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

init: oxagenttwo — voice chat with local qwen3 (Ollama) + OpenRouter, Whisper STT, Piper TTS (Thorsten), sessions, thinking mode

Browse source
This commit is contained in:
Jeuner 2026-08-26 16:26:51 +02:00
commit 752198c5fa
26 changed files with 7690 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

8
.gitignore vendored Normal file
View file

@ -0,0 +1,8 @@
node_modules/
.env
*.sqlite
*.sqlite-*
data.sqlite*
# Piper-Stimmmodell (109 MB) — siehe README, wird lokal heruntergeladen
server/voices/*.onnx

101
README.md Normal file
View file

@ -0,0 +1,101 @@
# oxagenttwo
Voice-Chat-Oberfläche für lokale und Cloud-LLMs: lokales Qwen3 über
[Ollama](https://ollama.com), optionaler Fallback auf
[OpenRouter](https://openrouter.ai), Spracheingabe via
[whisper.cpp](https://github.com/ggml-org/whisper.cpp) und deutsche
Sprachausgabe via [Piper](https://github.com/rhasspy/piper) (Stimme: Thorsten).
## Aufbau
npm-Workspace mit zwei Paketen:
| Pfad | Inhalt |
|-----------|------------------------------------------------------------------------|
| `server/` | Fastify + WebSocket-Backend, Ollama-/OpenRouter-Bridge, STT/TTS, SQLite |
| `web/` | React 18 + Vite Frontend, Markdown-Rendering, Voice-Recording |
## Voraussetzungen
- Node.js 20+
- [Ollama](https://ollama.com) mit einem Qwen3-Modell (`ollama pull qwen3.5`)
- `ffmpeg` im `PATH`
- `whisper-cli` im `PATH` (whisper.cpp) inklusive Modell
- `piper` im `PATH`
Unter macOS:
```bash
brew install ffmpeg whisper-cpp piper
```
### Whisper-Modell
Wird per Default unter `~/whisper-models/ggml-large-v3-turbo.bin` erwartet:
```bash
mkdir -p ~/whisper-models
curl -L -o ~/whisper-models/ggml-large-v3-turbo.bin \
https://huggingface.co/ggerganov/whisper.cpp/resolve/main/ggml-large-v3-turbo.bin
```
### Piper-Stimme
Die Stimmdatei ist **nicht** im Repo (109 MB, über GitHubs Dateilimit).
Einmalig herunterladen:
```bash
mkdir -p server/voices
curl -L -o server/voices/de_DE-thorsten-high.onnx \
https://huggingface.co/rhasspy/piper-voices/resolve/main/de/de_DE/thorsten/high/de_DE-thorsten-high.onnx
```
Die zugehörige `de_DE-thorsten-high.onnx.json` liegt bereits im Repo.
## Konfiguration
`.env` im Projekt-Root (wird vom Server eingelesen, ist gitignored):
```bash
OPENROUTER_API_KEY=sk-or-...
```
Weitere optionale Variablen mit ihren Defaults:
| Variable | Default |
|----------------------|--------------------------------------------------|
| `PORT` | `8787` |
| `OLLAMA_URL` | `http://localhost:11434` |
| `MODEL` | `qwen3.5:latest` |
| `WHISPER_MODEL` | `~/whisper-models/ggml-large-v3-turbo.bin` |
| `WHISPER_LANG` | `de` |
| `PIPER_MODEL` | `server/voices/de_DE-thorsten-high.onnx` |
## Entwicklung
```bash
npm install
npm run dev # Server (:8787) und Vite-Dev-Server (:5173) parallel
```
Einzeln:
```bash
npm run dev:server
npm run dev:web
```
Typecheck über beide Workspaces:
```bash
npm run typecheck
```
## Produktion
```bash
npm start # baut das Frontend und startet den Server
```
Der Server bindet bewusst nur an `127.0.0.1` — für externen Zugriff einen
Reverse-Proxy davorschalten.

4722
package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

16
package.json Normal file
View file

@ -0,0 +1,16 @@
{
"name": "oxagenttwo",
"private": true,
"version": "0.1.0",
"workspaces": [
"server",
"web"
],
"scripts": {
"dev": "npm run dev --workspace server & npm run dev --workspace web & wait",
"dev:server": "npm run dev --workspace server",
"dev:web": "npm run dev --workspace web",
"typecheck": "npm run typecheck --workspaces --if-present",
"start": "npm run build --workspace web && npm start --workspace server"
}
}

22
server/package.json Normal file
View file

@ -0,0 +1,22 @@
{
"name": "server",
"private": true,
"version": "0.1.0",
"type": "module",
"scripts": {
"dev": "tsx watch src/index.ts",
"start": "tsx src/index.ts",
"typecheck": "tsc --noEmit"
},
"dependencies": {
"@fastify/cors": "^10.0.1",
"fastify": "^5.2.1"
},
"devDependencies": {
"@types/node": "^22.13.0",
"@types/ws": "^8.5.14",
"tsx": "^4.19.3",
"typescript": "^5.7.3",
"ws": "^8.18.0"
}
}

117
server/src/db.ts Normal file
View file

@ -0,0 +1,117 @@
import { DatabaseSync } from "node:sqlite";
import { randomUUID } from "node:crypto";
import path from "node:path";
const dbPath = path.join(import.meta.dirname, "..", "data.sqlite");
export const db = new DatabaseSync(dbPath);
db.exec(`
PRAGMA journal_mode = WAL;
CREATE TABLE IF NOT EXISTS sessions (
id TEXT PRIMARY KEY,
title TEXT NOT NULL DEFAULT 'Neuer Chat',
created_at INTEGER NOT NULL
);
CREATE TABLE IF NOT EXISTS messages (
id TEXT PRIMARY KEY,
session_id TEXT NOT NULL REFERENCES sessions(id) ON DELETE CASCADE,
role TEXT NOT NULL CHECK(role IN ('user','assistant','system')),
content TEXT NOT NULL DEFAULT '',
thinking TEXT,
created_at INTEGER NOT NULL
);
CREATE INDEX IF NOT EXISTS idx_messages_session ON messages(session_id, created_at);
`);
export interface SessionRow {
id: string;
title: string;
created_at: number;
}
export interface MessageRow {
id: string;
session_id: string;
role: string;
content: string;
thinking: string | null;
created_at: number;
}
export function listSessions(): SessionRow[] {
return db
.prepare("SELECT * FROM sessions ORDER BY created_at DESC")
.all() as unknown as SessionRow[];
}
export function createSession(title = "Neuer Chat"): SessionRow {
const row: SessionRow = { id: randomUUID(), title, created_at: Date.now() };
db.prepare("INSERT INTO sessions (id, title, created_at) VALUES (?, ?, ?)").run(
row.id,
row.title,
row.created_at,
);
return row;
}
export function getSession(id: string): SessionRow | undefined {
return db.prepare("SELECT * FROM sessions WHERE id = ?").get(id) as
| SessionRow
| undefined;
}
export function renameSessionIfDefault(id: string, firstMessage: string) {
const s = getSession(id);
if (!s || s.title !== "Neuer Chat") return;
const title =
firstMessage.trim().slice(0, 60) + (firstMessage.length > 60 ? "…" : "");
db.prepare("UPDATE sessions SET title = ? WHERE id = ?").run(
title || "Neuer Chat",
id,
);
}
export function deleteSession(id: string) {
db.prepare("DELETE FROM messages WHERE session_id = ?").run(id);
db.prepare("DELETE FROM sessions WHERE id = ?").run(id);
}
export function insertMessage(
sessionId: string,
role: string,
content: string,
thinking?: string | null,
): MessageRow {
const row: MessageRow = {
id: randomUUID(),
session_id: sessionId,
role,
content,
thinking: thinking ?? null,
created_at: Date.now(),
};
db.prepare(
"INSERT INTO messages (id, session_id, role, content, thinking, created_at) VALUES (?, ?, ?, ?, ?, ?)",
).run(row.id, row.session_id, row.role, row.content, row.thinking, row.created_at);
return row;
}
export function updateAssistantMessage(
id: string,
content: string,
thinking: string | null,
) {
db.prepare("UPDATE messages SET content = ?, thinking = ? WHERE id = ?").run(
content,
thinking,
id,
);
}
export function listMessages(sessionId: string): MessageRow[] {
return db
.prepare(
"SELECT * FROM messages WHERE session_id = ? ORDER BY created_at ASC",
)
.all(sessionId) as unknown as MessageRow[];
}

302
server/src/index.ts Normal file
View file

@ -0,0 +1,302 @@
import Fastify from "fastify";
import cors from "@fastify/cors";
import { WebSocketServer, WebSocket } from "ws";
import type { IncomingMessage } from "node:http";
import { readFileSync } from "node:fs";
import path from "node:path";
import * as dbmod from "./db.js";
import { streamChat, type OllamaOptions } from "./ollama.js";
import { transcribeAudio, synthesizeSpeech } from "./voice.js";
import {
streamOpenRouter,
listOpenRouterModels,
getOpenRouterKey,
} from "./openrouter.js";
// simple .env loader (project root)
try {
for (const line of readFileSync(
path.join(import.meta.dirname, "..", "..", ".env"),
"utf8",
).split("\n")) {
const m = line.match(/^\s*([A-Za-z_][A-Za-z0-9_]*)\s*=\s*(.*)\s*$/);
if (m && !(m[1] in process.env)) process.env[m[1]] = m[2].replace(/^["']|["']$/g, "");
}
} catch {
/* keine .env vorhanden */
}
const PORT = Number(process.env.PORT ?? 8787);
const OLLAMA_URL = process.env.OLLAMA_URL ?? "http://localhost:11434";
const app = Fastify({ logger: false, bodyLimit: 32 * 1024 * 1024 });
await app.register(cors, { origin: true });
app.addContentTypeParser(
["application/octet-stream", "audio/*", "video/*"],
{ parseAs: "buffer" },
(_req, body, done) => done(null, body),
);
app.get("/api/health", async () => ({ ok: true }));
app.get("/api/model", async () => {
try {
const res = await fetch(`${OLLAMA_URL}/api/show`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ name: process.env.MODEL ?? "qwen3.5:latest" }),
});
if (!res.ok) return { ok: false, error: `Ollama HTTP ${res.status}` };
const data = (await res.json()) as {
details?: { parameter_size?: string; quantization_level?: string };
capabilities?: string[];
};
return {
ok: true,
model: process.env.MODEL ?? "qwen3.5:latest",
parameterSize: data.details?.parameter_size,
quantization: data.details?.quantization_level,
capabilities: data.capabilities ?? [],
};
} catch (err) {
return { ok: false, error: String(err) };
}
});
// --- Sessions REST ---
app.get("/api/sessions", async () => dbmod.listSessions());
app.post("/api/sessions", async () => dbmod.createSession());
app.get("/api/sessions/:id/messages", async (req, reply) => {
const { id } = req.params as { id: string };
if (!dbmod.getSession(id)) return reply.code(404).send({ error: "not found" });
return dbmod.listMessages(id);
});
app.delete("/api/sessions/:id", async (req) => {
const { id } = req.params as { id: string };
dbmod.deleteSession(id);
broadcast({ type: "session-deleted", id });
return { ok: true };
});
// --- Voice ---
app.post("/api/stt", async (req, reply) => {
const audio = req.body as Buffer;
if (!Buffer.isBuffer(audio) || audio.length === 0) {
return reply.code(400).send({ ok: false, error: "Kein Audio empfangen" });
}
try {
const text = await transcribeAudio(audio);
return { ok: true, text };
} catch (err) {
app.log.error(err);
return reply
.code(500)
.send({ ok: false, error: err instanceof Error ? err.message : String(err) });
}
});
app.post("/api/tts", async (req, reply) => {
const { text } = (req.body ?? {}) as { text?: string };
if (!text || !text.trim()) {
return reply.code(400).send({ error: "text fehlt" });
}
try {
const wav = await synthesizeSpeech(text);
reply.header("Content-Type", "audio/wav").send(wav);
} catch (err) {
app.log.error(err);
return reply
.code(500)
.send({ error: err instanceof Error ? err.message : String(err) });
}
});
// --- OpenRouter models ---
app.get("/api/openrouter/models", async () => {
if (!getOpenRouterKey()) {
return { ok: false, error: "OPENROUTER_API_KEY nicht gesetzt (.env fehlt)" };
}
try {
return { ok: true, models: await listOpenRouterModels() };
} catch (err) {
return { ok: false, error: err instanceof Error ? err.message : String(err) };
}
});
// --- WebSocket ---
interface ChatOptionsPayload {
think: boolean;
temperature: number;
numPredict: number;
provider?: string;
openrouterModel?: string;
}
function parseOptions(raw: unknown): OllamaOptions & {
provider: "ollama" | "openrouter";
openrouterModel: string;
} {
const o = (raw ?? {}) as Partial<ChatOptionsPayload>;
return {
model: process.env.MODEL ?? "qwen3.5:latest",
think: o.think !== false,
temperature: clamp(Number(o.temperature ?? 0.7), 0, 2),
numPredict: Math.min(Math.max(Number(o.numPredict ?? 2048), 64), 16384),
provider: o.provider === "openrouter" ? "openrouter" : "ollama",
openrouterModel:
typeof o.openrouterModel === "string" &&
/^[\w./:-]{3,120}$/.test(o.openrouterModel)
? o.openrouterModel
: "anthropic/claude-sonnet-4.5",
};
}
function clamp(v: number, min: number, max: number) {
if (!Number.isFinite(v)) return min;
return Math.min(Math.max(v, min), max);
}
const wss = new WebSocketServer({ noServer: true });
function broadcast(data: unknown) {
for (const client of wss.clients) {
if (client.readyState === WebSocket.OPEN) client.send(JSON.stringify(data));
}
}
wss.on("connection", (socket: WebSocket, _req: IncomingMessage) => {
let activeAbort: AbortController | null = null;
socket.on("message", async (raw: Buffer) => {
let msg: Record<string, unknown>;
try {
msg = JSON.parse(raw.toString()) as Record<string, unknown>;
} catch {
socket.send(JSON.stringify({ type: "error", error: "invalid json" }));
return;
}
if (msg.type === "abort") {
activeAbort?.abort();
return;
}
if (msg.type !== "chat") return;
const sessionId = String(msg.sessionId ?? "");
const content = String(msg.content ?? "").trim();
if (!sessionId || !content) {
socket.send(JSON.stringify({ type: "error", error: "sessionId/content fehlt" }));
return;
}
let session = dbmod.getSession(sessionId);
if (!session) session = dbmod.createSession();
dbmod.renameSessionIfDefault(session.id, content);
const userMsg = dbmod.insertMessage(session.id, "user", content);
socket.send(JSON.stringify({ type: "user-message", message: userMsg }));
broadcast({ type: "sessions-changed" });
const opts = parseOptions(msg.options);
const history = dbmod
.listMessages(session.id)
.slice(-24)
.map((m) => ({ role: m.role, content: m.content }));
const assistantRow = dbmod.insertMessage(session.id, "assistant", "");
socket.send(JSON.stringify({ type: "assistant-start", message: assistantRow }));
activeAbort = new AbortController();
let full = "";
let thinking = "";
const callbacks = {
onThinking(text: string) {
thinking += text;
socket.send(
JSON.stringify({ type: "thinking", text, messageId: assistantRow.id }),
);
},
onToken(text: string) {
full += text;
socket.send(
JSON.stringify({ type: "token", text, messageId: assistantRow.id }),
);
},
onDone() {},
};
try {
if (opts.provider === "openrouter") {
const apiKey = getOpenRouterKey();
if (!apiKey) throw new Error("OPENROUTER_API_KEY nicht gesetzt (.env fehlt)");
await streamOpenRouter(
history,
typeof msg.systemPrompt === "string" && msg.systemPrompt.trim()
? (msg.systemPrompt as string)
: undefined,
{
model: opts.openrouterModel,
temperature: opts.temperature,
numPredict: opts.numPredict,
},
apiKey,
callbacks,
activeAbort.signal,
);
} else {
await streamChat(
history,
typeof msg.systemPrompt === "string" && msg.systemPrompt.trim()
? (msg.systemPrompt as string)
: undefined,
opts,
callbacks,
activeAbort.signal,
);
}
dbmod.updateAssistantMessage(assistantRow.id, full.trim(), thinking.trim() || null);
socket.send(
JSON.stringify({
type: "done",
messageId: assistantRow.id,
aborted: activeAbort.signal.aborted,
}),
);
broadcast({ type: "sessions-changed" });
} catch (err) {
const aborted =
activeAbort.signal.aborted ||
(err instanceof Error && err.name === "AbortError");
dbmod.updateAssistantMessage(assistantRow.id, full.trim(), thinking.trim() || null);
if (aborted) {
socket.send(JSON.stringify({ type: "done", messageId: assistantRow.id, aborted: true }));
} else {
socket.send(
JSON.stringify({
type: "error",
messageId: assistantRow.id,
error: err instanceof Error ? err.message : String(err),
}),
);
}
} finally {
activeAbort = null;
}
});
});
const server = app.server;
server.on("upgrade", (req, socket, head) => {
const url = new URL(req.url ?? "", "http://localhost");
if (url.pathname === "/ws") {
wss.handleUpgrade(req, socket, head, (ws) => wss.emit("connection", ws, req));
} else {
socket.destroy();
}
});
app.listen({ port: PORT, host: "127.0.0.1" }, () => {
console.log(`[oxagenttwo] Server läuft auf http://127.0.0.1:${PORT}`);
});

84
server/src/ollama.ts Normal file
View file

@ -0,0 +1,84 @@
export interface OllamaOptions {
model: string;
think: boolean;
temperature: number;
numPredict: number;
}
export interface StreamCallbacks {
onThinking(text: string): void;
onToken(text: string): void;
onDone(): void;
}
interface ChatChunk {
message?: { content?: string; thinking?: string };
done?: boolean;
error?: string;
}
export async function streamChat(
history: { role: string; content: string }[],
systemPrompt: string | undefined,
opts: OllamaOptions,
cb: StreamCallbacks,
signal: AbortSignal,
): Promise<void> {
const body: Record<string, unknown> = {
model: opts.model,
messages: [
...(systemPrompt ? [{ role: "system", content: systemPrompt }] : []),
...history,
],
stream: true,
think: opts.think,
options: {
temperature: opts.temperature,
num_predict: opts.numPredict,
},
};
const res = await fetch("http://localhost:11434/api/chat", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(body),
signal,
});
if (!res.ok || !res.body) {
const text = await res.text().catch(() => res.statusText);
throw new Error(`Ollama HTTP ${res.status}: ${text}`);
}
const reader = res.body.getReader();
const decoder = new TextDecoder();
let buffer = "";
while (true) {
const { value, done } = await reader.read();
if (done) break;
buffer += decoder.decode(value, { stream: true });
let nlIndex: number;
while ((nlIndex = buffer.indexOf("\n")) !== -1) {
const line = buffer.slice(0, nlIndex).trim();
buffer = buffer.slice(nlIndex + 1);
if (!line) continue;
let chunk: ChatChunk;
try {
chunk = JSON.parse(line) as ChatChunk;
} catch {
continue;
}
if (chunk.error) throw new Error(chunk.error);
if (chunk.message?.thinking) cb.onThinking(chunk.message.thinking);
if (chunk.message?.content) cb.onToken(chunk.message.content);
if (chunk.done) {
cb.onDone();
return;
}
}
}
cb.onDone();
}

116
server/src/openrouter.ts Normal file
View file

@ -0,0 +1,116 @@
export interface OpenRouterOptions {
model: string;
temperature: number;
numPredict: number;
}
export interface StreamCallbacks {
onThinking(text: string): void;
onToken(text: string): void;
onDone(): void;
}
export function getOpenRouterKey(): string | undefined {
return process.env.OPENROUTER_API_KEY;
}
export async function listOpenRouterModels(): Promise<
{ id: string; name: string; contextLength: number; promptPrice: number }[]
> {
const res = await fetch("https://openrouter.ai/api/v1/models");
if (!res.ok) throw new Error(`OpenRouter HTTP ${res.status}`);
const data = (await res.json()) as {
data: {
id: string;
name: string;
context_length: number;
pricing: { prompt: string };
}[];
};
return data.data
.map((m) => ({
id: m.id,
name: m.name,
contextLength: m.context_length,
promptPrice: Number(m.pricing?.prompt ?? 0) * 1_000_000,
}))
.sort((a, b) => a.name.localeCompare(b.name));
}
export async function streamOpenRouter(
history: { role: string; content: string }[],
systemPrompt: string | undefined,
opts: OpenRouterOptions,
apiKey: string,
cb: StreamCallbacks,
signal: AbortSignal,
): Promise<void> {
const res = await fetch("https://openrouter.ai/api/v1/chat/completions", {
method: "POST",
headers: {
Authorization: `Bearer ${apiKey}`,
"Content-Type": "application/json",
"HTTP-Referer": "http://localhost:5173",
"X-Title": "oxagenttwo",
},
body: JSON.stringify({
model: opts.model,
stream: true,
messages: [
...(systemPrompt ? [{ role: "system", content: systemPrompt }] : []),
...history,
],
temperature: opts.temperature,
max_tokens: opts.numPredict,
}),
signal,
});
if (!res.ok || !res.body) {
const text = await res.text().catch(() => res.statusText);
throw new Error(`OpenRouter HTTP ${res.status}: ${text.slice(0, 300)}`);
}
const reader = res.body.getReader();
const decoder = new TextDecoder();
let buffer = "";
while (true) {
const { value, done } = await reader.read();
if (done) break;
buffer += decoder.decode(value, { stream: true });
let nlIndex: number;
while ((nlIndex = buffer.indexOf("\n")) !== -1) {
const line = buffer.slice(0, nlIndex).trim();
buffer = buffer.slice(nlIndex + 1);
if (!line.startsWith("data:")) continue;
const payload = line.slice(5).trim();
if (payload === "[DONE]") {
cb.onDone();
return;
}
let chunk: {
choices?: {
delta?: { content?: string; reasoning?: string };
finish_reason?: string | null;
}[];
error?: { message?: string };
};
try {
chunk = JSON.parse(payload);
} catch {
continue;
}
if (chunk.error) throw new Error(chunk.error.message ?? "OpenRouter error");
const delta = chunk.choices?.[0]?.delta;
if (delta?.reasoning) cb.onThinking(delta.reasoning);
if (delta?.content) cb.onToken(delta.content);
if (chunk.choices?.[0]?.finish_reason && !delta?.content) {
cb.onDone();
return;
}
}
}
cb.onDone();
}

88
server/src/voice.ts Normal file
View file

@ -0,0 +1,88 @@
import { execFile, spawn } from "node:child_process";
import { mkdtemp, readFile, rm, writeFile } from "node:fs/promises";
import { tmpdir, homedir } from "node:os";
import path from "node:path";
import { promisify } from "node:util";
const pExecFile = promisify(execFile);
const WHISPER_MODEL =
process.env.WHISPER_MODEL ??
path.join(homedir(), "whisper-models", "ggml-large-v3-turbo.bin");
const PIPER_MODEL =
process.env.PIPER_MODEL ??
path.join(import.meta.dirname, "..", "voices", "de_DE-thorsten-high.onnx");
const WHISPER_LANG = process.env.WHISPER_LANG ?? "de";
export async function transcribeAudio(input: Buffer): Promise<string> {
const dir = await mkdtemp(path.join(tmpdir(), "oxa-voice-"));
const rawPath = path.join(dir, "in.raw");
const wavPath = path.join(dir, "in.wav");
try {
await writeFile(rawPath, input);
await pExecFile(
"ffmpeg",
["-y", "-i", rawPath, "-ar", "16000", "-ac", "1", "-c:a", "pcm_s16le", wavPath],
{ timeout: 30_000 },
);
const { stdout } = await pExecFile(
"whisper-cli",
["-m", WHISPER_MODEL, "-f", wavPath, "-nt", "-np", "-l", WHISPER_LANG],
{ timeout: 180_000, maxBuffer: 16 * 1024 * 1024 },
);
return stdout
.split("\n")
.map((l) => l.trim())
.filter(Boolean)
.join(" ")
.replace(/\s+/g, " ")
.trim();
} finally {
await rm(dir, { recursive: true, force: true });
}
}
export function stripMarkdownForSpeech(text: string): string {
return text
.replace(/```[\s\S]*?```/g, " ")
.replace(/`([^`]+)`/g, "$1")
.replace(/!\[[^\]]*\]\([^)]*\)/g, " ")
.replace(/\[([^\]]+)\]\([^)]*\)/g, "$1")
.replace(/^\s{0,3}#{1,6}\s+/gm, "")
.replace(/(\*\*|__|\*|_|~~)/g, "")
.replace(/^\s*[-*+]\s+/gm, "")
.replace(/^\s*\|.*\|\s*$/gm, "")
.replace(/https?:\/\/\S+/g, "Link")
.replace(/\s+/g, " ")
.trim();
}
export async function synthesizeSpeech(text: string): Promise<Buffer> {
const cleaned = stripMarkdownForSpeech(text);
if (!cleaned) throw new Error("Kein sprechbarer Text");
const dir = await mkdtemp(path.join(tmpdir(), "oxa-tts-"));
const wavPath = path.join(dir, "out.wav");
try {
await new Promise<void>((resolve, reject) => {
const proc = spawn(
"python3",
["-m", "piper", "-m", PIPER_MODEL, "-f", wavPath, "--sentence-silence", "0.2"],
{ stdio: ["pipe", "ignore", "pipe"] },
);
let err = "";
proc.stderr.on("data", (d) => (err += d.toString()));
proc.on("error", reject);
proc.on("close", (code) =>
code === 0
? resolve()
: reject(new Error(`piper exit ${code}: ${err.slice(-400)}`)),
);
proc.stdin.write(cleaned);
proc.stdin.end();
});
return await readFile(wavPath);
} finally {
await rm(dir, { recursive: true, force: true });
}
}

12
server/tsconfig.json Normal file
View file

@ -0,0 +1,12 @@
{
"compilerOptions": {
"target": "ES2023",
"module": "NodeNext",
"moduleResolution": "NodeNext",
"strict": true,
"skipLibCheck": true,
"noEmit": true,
"types": ["node"]
},
"include": ["src"]
}

493
server/voices/de_DE-thorsten-high.onnx.json Normal file
View file

@ -0,0 +1,493 @@
{
"audio": {
"sample_rate": 22050,
"quality": "high"
},
"espeak": {
"voice": "de"
},
"inference": {
"noise_scale": 0.667,
"length_scale": 1,
"noise_w": 0.8
},
"phoneme_type": "espeak",
"phoneme_map": {},
"phoneme_id_map": {
"_": [
0
],
"^": [
1
],
"$": [
2
],
" ": [
3
],
"!": [
4
],
"'": [
5
],
"(": [
6
],
")": [
7
],
",": [
8
],
"-": [
9
],
".": [
10
],
":": [
11
],
";": [
12
],
"?": [
13
],
"a": [
14
],
"b": [
15
],
"c": [
16
],
"d": [
17
],
"e": [
18
],
"f": [
19
],
"h": [
20
],
"i": [
21
],
"j": [
22
],
"k": [
23
],
"l": [
24
],
"m": [
25
],
"n": [
26
],
"o": [
27
],
"p": [
28
],
"q": [
29
],
"r": [
30
],
"s": [
31
],
"t": [
32
],
"u": [
33
],
"v": [
34
],
"w": [
35
],
"x": [
36
],
"y": [
37
],
"z": [
38
],
"æ": [
39
],
"ç": [
40
],
"ð": [
41
],
"ø": [
42
],
"ħ": [
43
],
"ŋ": [
44
],
"œ": [
45
],
"ǀ": [
46
],
"ǁ": [
47
],
"ǂ": [
48
],
"ǃ": [
49
],
"ɐ": [
50
],
"ɑ": [
51
],
"ɒ": [
52
],
"ɓ": [
53
],
"ɔ": [
54
],
"ɕ": [
55
],
"ɖ": [
56
],
"ɗ": [
57
],
"ɘ": [
58
],
"ə": [
59
],
"ɚ": [
60
],
"ɛ": [
61
],
"ɜ": [
62
],
"ɞ": [
63
],
"ɟ": [
64
],
"ɠ": [
65
],
"ɡ": [
66
],
"ɢ": [
67
],
"ɣ": [
68
],
"ɤ": [
69
],
"ɥ": [
70
],
"ɦ": [
71
],
"ɧ": [
72
],
"ɨ": [
73
],
"ɪ": [
74
],
"ɫ": [
75
],
"ɬ": [
76
],
"ɭ": [
77
],
"ɮ": [
78
],
"ɯ": [
79
],
"ɰ": [
80
],
"ɱ": [
81
],
"ɲ": [
82
],
"ɳ": [
83
],
"ɴ": [
84
],
"ɵ": [
85
],
"ɶ": [
86
],
"ɸ": [
87
],
"ɹ": [
88
],
"ɺ": [
89
],
"ɻ": [
90
],
"ɽ": [
91
],
"ɾ": [
92
],
"ʀ": [
93
],
"ʁ": [
94
],
"ʂ": [
95
],
"ʃ": [
96
],
"ʄ": [
97
],
"ʈ": [
98
],
"ʉ": [
99
],
"ʊ": [
100
],
"ʋ": [
101
],
"ʌ": [
102
],
"ʍ": [
103
],
"ʎ": [
104
],
"ʏ": [
105
],
"ʐ": [
106
],
"ʑ": [
107
],
"ʒ": [
108
],
"ʔ": [
109
],
"ʕ": [
110
],
"ʘ": [
111
],
"ʙ": [
112
],
"ʛ": [
113
],
"ʜ": [
114
],
"ʝ": [
115
],
"ʟ": [
116
],
"ʡ": [
117
],
"ʢ": [
118
],
"ʲ": [
119
],
"ˈ": [
120
],
"ˌ": [
121
],
"ː": [
122
],
"ˑ": [
123
],
"˞": [
124
],
"β": [
125
],
"θ": [
126
],
"χ": [
127
],
"ᵻ": [
128
],
"ⱱ": [
129
],
"0": [
130
],
"1": [
131
],
"2": [
132
],
"3": [
133
],
"4": [
134
],
"5": [
135
],
"6": [
136
],
"7": [
137
],
"8": [
138
],
"9": [
139
],
"̧": [
140
],
"̃": [
141
],
"̪": [
142
],
"̯": [
143
],
"̩": [
144
],
"ʰ": [
145
],
"ˤ": [
146
],
"ε": [
147
],
"↓": [
148
],
"#": [
149
],
"\"": [
150
],
"↑": [
151
],
"̺": [
152
],
"̻": [
153
]
},
"num_symbols": 256,
"num_speakers": 1,
"speaker_id_map": {},
"piper_version": "1.0.0",
"language": {
"code": "de_DE",
"family": "de",
"region": "DE",
"name_native": "Deutsch",
"name_english": "German",
"country_english": "Germany"
},
"dataset": "thorsten"
}

12
web/index.html Normal file
View file

@ -0,0 +1,12 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>oxagenttwo — local qwen3 chat</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

27
web/package.json Normal file
View file

@ -0,0 +1,27 @@
{
"name": "web",
"private": true,
"version": "0.1.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc --noEmit && vite build",
"preview": "vite preview",
"typecheck": "tsc --noEmit"
},
"dependencies": {
"highlight.js": "^11.11.1",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-markdown": "^9.0.3",
"rehype-highlight": "^7.0.2",
"remark-gfm": "^4.0.0"
},
"devDependencies": {
"@types/react": "^18.3.18",
"@types/react-dom": "^18.3.5",
"@vitejs/plugin-react": "^4.3.4",
"typescript": "^5.7.3",
"vite": "^6.0.11"
}
}

335
web/src/App.tsx Normal file
View file

@ -0,0 +1,335 @@
import { useCallback, useEffect, useRef, useState } from "react";
import { useChat } from "./useChat";
import { useVoice } from "./useVoice";
import { Sidebar } from "./components/Sidebar";
import { ChatMessage } from "./components/ChatMessage";
import { Composer } from "./components/Composer";
import type { OpenRouterModel } from "./types";
const VOICE_KEY = "oxagenttwo.voiceMode";
export default function App() {
const chat = useChat();
const scrollRef = useRef<HTMLDivElement>(null);
const [settingsOpen, setSettingsOpen] = useState(false);
const [injectedText, setInjectedText] = useState<string | null>(null);
const [voiceMode, setVoiceModeState] = useState(
() => localStorage.getItem(VOICE_KEY) === "1",
);
const [orModels, setOrModels] = useState<OpenRouterModel[]>([]);
useEffect(() => {
if (
settingsOpen &&
chat.options.provider === "openrouter" &&
orModels.length === 0
) {
fetch("/api/openrouter/models")
.then((r) => r.json())
.then((d: { ok: boolean; models?: OpenRouterModel[] }) => {
if (d.ok && d.models) setOrModels(d.models);
})
.catch(() => {});
}
}, [settingsOpen, chat.options.provider, orModels.length]);
const voiceModeRef = useRef(voiceMode);
const streamingRef = useRef(false);
const awaitingDrainRef = useRef(false);
streamingRef.current = chat.streaming;
voiceModeRef.current = voiceMode;
const setVoiceMode = useCallback((on: boolean) => {
setVoiceModeState(on);
localStorage.setItem(VOICE_KEY, on ? "1" : "0");
}, []);
const voice = useVoice({
onTranscript: (text) => {
if (voiceModeRef.current) {
voiceRef.current.cancelSpeech();
pendingSpeechRef.current = "";
chatRef.current.sendMessage(text);
} else {
setInjectedText(text);
}
},
onQueueDrained: () => {
if (awaitingDrainRef.current) {
awaitingDrainRef.current = false;
if (voiceModeRef.current && !streamingRef.current) {
void voiceRef.current.startRecording();
}
}
},
});
const voiceRef = useRef(voice);
voiceRef.current = voice;
const chatRef = useRef(chat);
chatRef.current = chat;
const pendingSpeechRef = useRef("");
const ttsCursorRef = useRef({ id: "", offset: 0 });
// auto-scroll
useEffect(() => {
const el = scrollRef.current;
if (el) el.scrollTop = el.scrollHeight;
}, [chat.messages]);
// queue completed sentences for TTS while streaming
useEffect(() => {
if (!voiceMode) return;
const lastAssistant = [...chat.messages]
.reverse()
.find((m) => m.role === "assistant");
if (!lastAssistant) return;
if (ttsCursorRef.current.id !== lastAssistant.id) {
ttsCursorRef.current = { id: lastAssistant.id, offset: 0 };
pendingSpeechRef.current = "";
}
const content = lastAssistant.content;
if (content.length < ttsCursorRef.current.offset) {
ttsCursorRef.current.offset = content.length;
return;
}
const delta = content.slice(ttsCursorRef.current.offset);
if (!delta) return;
pendingSpeechRef.current += delta;
ttsCursorRef.current.offset = content.length;
const buf = pendingSpeechRef.current;
const matches = [...buf.matchAll(/[.!?…]+["')\]]?(?=\s|$)/g)];
let speakPart = "";
if (matches.length) {
const lastMatch = matches[matches.length - 1];
const end = lastMatch.index + lastMatch[0].length;
if (end >= 40) speakPart = buf.slice(0, end);
} else if (buf.length > 300) {
const brk = Math.max(buf.lastIndexOf(", "), buf.lastIndexOf(" "));
speakPart = brk > 100 ? buf.slice(0, brk + 1) : buf;
}
if (speakPart) {
pendingSpeechRef.current = buf.slice(speakPart.length);
voice.enqueueSpeech(speakPart);
}
});
// flush remainder once streaming finished
const wasStreamingRef = useRef(false);
useEffect(() => {
if (wasStreamingRef.current && !chat.streaming && voiceMode) {
const rest = pendingSpeechRef.current.trim();
if (rest) {
pendingSpeechRef.current = "";
voice.enqueueSpeech(rest);
}
if (rest || ttsCursorRef.current.id) awaitingDrainRef.current = true;
}
wasStreamingRef.current = chat.streaming;
}, [chat.streaming, voiceMode, voice]);
const handleSend = useCallback(
(text: string) => {
voice.cancelSpeech();
pendingSpeechRef.current = "";
chat.sendMessage(text);
},
[chat, voice],
);
const handleAbort = useCallback(() => {
voice.cancelSpeech();
pendingSpeechRef.current = "";
chat.abort();
}, [chat, voice]);
const handleMicToggle = useCallback(() => {
if (voice.recording) {
voice.stopRecording();
} else {
voice.cancelSpeech();
void voice.startRecording();
}
}, [voice]);
return (
<div className="app">
<Sidebar
sessions={chat.sessions}
activeId={chat.activeId}
onSelect={chat.setActiveId}
onNew={() => void chat.newSession()}
onDelete={(id) => void chat.deleteSession(id)}
/>
<main className="main">
<header className="topbar">
<div
className="model-badge"
title={chat.modelInfo?.ok ? undefined : chat.modelInfo?.error}
>
<span
className={`status-dot ${chat.status === "open" ? "on" : "off"}`}
/>
{chat.options.provider === "openrouter"
? `☁ ${chat.options.openrouterModel}`
: chat.modelInfo?.ok
? `${chat.modelInfo.model} · ${chat.modelInfo.parameterSize} · ${chat.modelInfo.quantization}`
: "Ollama offline"}
</div>
<div className="topbar-actions">
{voiceMode && (voice.recording || voice.transcribing || voice.speaking) && (
<span className="voice-state">
{voice.recording
? "● hört zu"
: voice.transcribing
? "… transkribiert"
: "🔊 spricht"}
</span>
)}
<button
className={`btn-settings ${voiceMode ? "toggled" : ""}`}
onClick={() => {
if (voiceMode) {
voice.cancelSpeech();
voice.stopRecording();
}
setVoiceMode(!voiceMode);
}}
title="Sprachmodus: Antworten werden vorgelesen, danach wird automatisch wieder zugehört"
>
{voiceMode ? "🔊 Stimme: an" : "🔇 Stimme: aus"}
</button>
<button
className="btn-settings"
onClick={() => setSettingsOpen((v) => !v)}
>
⚙ Einstellungen
</button>
</div>
</header>
{settingsOpen && (
<section className="settings-panel">
<label className="setting-row">
<span>Modell</span>
<select
className="provider-select"
value={chat.options.provider}
onChange={(e) =>
chat.setOptions({ provider: e.target.value as "ollama" | "openrouter" })
}
>
<option value="ollama">Lokal: qwen3.5 (Ollama)</option>
<option value="openrouter">OpenRouter (Cloud)</option>
</select>
</label>
{chat.options.provider === "openrouter" && (
<label className="setting-row column">
<span>OpenRouter-Modell ({orModels.length} verfügbar)</span>
<input
list="or-models"
value={chat.options.openrouterModel}
placeholder="z. B. anthropic/claude-sonnet-4.5"
onChange={(e) =>
chat.setOptions({ openrouterModel: e.target.value })
}
/>
<datalist id="or-models">
{orModels.map((m) => (
<option key={m.id} value={m.id}>
{m.name} · {m.promptPrice === 0 ? "gratis" : `$${m.promptPrice.toFixed(2)}/M`}
</option>
))}
</datalist>
</label>
)}
{chat.options.provider === "ollama" && (
<label className="setting-row checkbox">
<input
type="checkbox"
checked={chat.options.think}
onChange={(e) => chat.setOptions({ think: e.target.checked })}
/>
<span>Thinking-Mode (Modell denkt sichtbar vor der Antwort)</span>
</label>
)}
<label className="setting-row">
<span>Temperature: {chat.options.temperature.toFixed(2)}</span>
<input
type="range"
min={0}
max={1.5}
step={0.05}
value={chat.options.temperature}
onChange={(e) =>
chat.setOptions({ temperature: Number(e.target.value) })
}
/>
</label>
<label className="setting-row">
<span>Max. Tokens: {chat.options.numPredict}</span>
<input
type="range"
min={256}
max={8192}
step={256}
value={chat.options.numPredict}
onChange={(e) =>
chat.setOptions({ numPredict: Number(e.target.value) })
}
/>
</label>
<label className="setting-row column">
<span>System-Prompt</span>
<textarea
rows={3}
placeholder="Optional: Verhalten des Modells steuern …"
value={chat.systemPrompt}
onChange={(e) => chat.setSystemPrompt(e.target.value)}
/>
</label>
</section>
)}
<div className="messages" ref={scrollRef}>
{chat.messages.length === 0 && (
<div className="welcome">
<div className="welcome-title">▸ oxagenttwo</div>
<p>
Echtzeit-Chat mit lokalem Qwen3 über Ollama — per Tastatur oder
Stimme (Whisper STT + Piper TTS, alles lokal).
</p>
<p className="hint">
🎙 für Sprachnachricht · 🔊 Stimme an für freihändigen Dialog
</p>
</div>
)}
{chat.messages.map((m) => (
<ChatMessage key={m.id} message={m} />
))}
</div>
{voice.error && (
<div className="voice-error">
{voice.error}
<button onClick={() => voice.setError(null)}>✕</button>
</div>
)}
<Composer
streaming={chat.streaming}
disabled={!chat.activeId}
recording={voice.recording}
transcribing={voice.transcribing}
injectedText={injectedText}
onInjected={() => setInjectedText(null)}
onSend={handleSend}
onAbort={handleAbort}
onMicToggle={handleMicToggle}
/>
</main>
</div>
);
}

42
web/src/components/ChatMessage.tsx Normal file
View file

@ -0,0 +1,42 @@
import { useState } from "react";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import rehypeHighlight from "rehype-highlight";
import type { Message } from "../types";
export function ChatMessage({ message }: { message: Message }) {
const [showThinking, setShowThinking] = useState(false);
const isUser = message.role === "user";
return (
<div className={`msg ${isUser ? "msg-user" : "msg-assistant"}`}>
<div className="msg-role">
{isUser ? "du" : "qwen3"}
</div>
{!isUser && message.thinking && message.thinking.length > 0 && (
<div className={`thinking ${showThinking ? "open" : ""}`}>
<button className="thinking-toggle" onClick={() => setShowThinking((v) => !v)}>
<span className={`caret ${showThinking ? "rotated" : ""}`}>▸</span>
{message.content === "" && showThinking === false
? "denkt nach …"
: `Denkprozess (${message.thinking.length.toLocaleString("de-DE")} Zeichen)`}
</button>
{showThinking && (
<pre className="thinking-body">{message.thinking}</pre>
)}
</div>
)}
{isUser ? (
<div className="msg-content user-content">{message.content}</div>
) : (
<div className="msg-content markdown">
<ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeHighlight]}>
{message.content || "▍"}
</ReactMarkdown>
</div>
)}
</div>
);
}

99
web/src/components/Composer.tsx Normal file
View file

@ -0,0 +1,99 @@
import { useEffect, useRef, useState } from "react";
interface Props {
streaming: boolean;
disabled: boolean;
recording: boolean;
transcribing: boolean;
injectedText: string | null;
onInjected: () => void;
onSend: (text: string) => void;
onAbort: () => void;
onMicToggle: () => void;
}
export function Composer({
streaming,
disabled,
recording,
transcribing,
injectedText,
onInjected,
onSend,
onAbort,
onMicToggle,
}: Props) {
const [value, setValue] = useState("");
const ref = useRef<HTMLTextAreaElement>(null);
useEffect(() => {
if (injectedText != null) {
setValue(injectedText);
onInjected();
requestAnimationFrame(() => {
ref.current?.focus();
ref.current?.setSelectionRange(injectedText.length, injectedText.length);
});
}
}, [injectedText, onInjected]);
const submit = () => {
const text = value.trim();
if (!text || streaming || disabled) return;
onSend(text);
setValue("");
requestAnimationFrame(() => ref.current?.focus());
};
return (
<div className="composer">
<button
className={`btn-mic ${recording ? "recording" : ""} ${transcribing ? "transcribing" : ""}`}
onClick={onMicToggle}
title={
recording
? "Aufnahme stoppen & senden"
: transcribing
? "Transkribiere …"
: "Sprachnachricht aufnehmen"
}
disabled={transcribing || disabled}
>
{recording ? "●" : transcribing ? "…" : "🎙"}
</button>
<textarea
ref={ref}
value={value}
placeholder={
recording
? "Ich höre zu … (zum Beenden nochmal auf das Mikro klicken)"
: disabled
? "Keine Session aktiv — neuen Chat starten"
: "Nachricht an qwen3 … (Enter = senden, Shift+Enter = Zeilenumbruch)"
}
rows={1}
disabled={disabled}
onChange={(e) => setValue(e.target.value)}
onKeyDown={(e) => {
if (e.key === "Enter" && !e.shiftKey) {
e.preventDefault();
submit();
}
}}
/>
{streaming ? (
<button className="btn-send stop" onClick={onAbort}>
■ Stop
</button>
) : (
<button
className="btn-send"
disabled={!value.trim() || disabled}
onClick={submit}
>
Senden ▸
</button>
)}
</div>
);
}

48
web/src/components/Sidebar.tsx Normal file
View file

@ -0,0 +1,48 @@
import type { Session } from "../types";
interface Props {
sessions: Session[];
activeId: string | null;
onSelect: (id: string) => void;
onNew: () => void;
onDelete: (id: string) => void;
}
export function Sidebar({ sessions, activeId, onSelect, onNew, onDelete }: Props) {
return (
<aside className="sidebar">
<div className="sidebar-header">
<div className="brand">
<span className="brand-prompt">▸</span> oxagenttwo
</div>
<button className="btn-new" onClick={onNew}>
+ Neuer Chat
</button>
</div>
<nav className="session-list">
{sessions.length === 0 && (
<div className="empty-hint">Noch keine Sessions.</div>
)}
{sessions.map((s) => (
<div
key={s.id}
className={`session-item ${s.id === activeId ? "active" : ""}`}
onClick={() => onSelect(s.id)}
>
<span className="session-title">{s.title}</span>
<button
className="session-delete"
title="Session löschen"
onClick={(e) => {
e.stopPropagation();
onDelete(s.id);
}}
>
✕
</button>
</div>
))}
</nav>
</aside>
);
}

11
web/src/main.tsx Normal file
View file

@ -0,0 +1,11 @@
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "highlight.js/styles/github-dark.css";
import "./styles.css";
ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode>
<App />
</React.StrictMode>,
);

71
web/src/socket.ts Normal file
View file

@ -0,0 +1,71 @@
export interface Session {
id: string;
title: string;
created_at: number;
}
export interface Message {
id: string;
session_id: string;
role: "user" | "assistant" | "system";
content: string;
thinking: string | null;
created_at: number;
}
export interface ChatOptions {
think: boolean;
temperature: number;
numPredict: number;
}
type Handler = (data: Record<string, unknown>) => void;
export class ChatSocket {
private ws: WebSocket | null = null;
private handlers = new Set<Handler>();
private queue: string[] = [];
private closedByUser = false;
onStatus?: (status: "connecting" | "open" | "closed") => void;
connect() {
this.closedByUser = false;
this.onStatus?.("connecting");
const proto = location.protocol === "https:" ? "wss:" : "ws:";
const ws = new WebSocket(`${proto}//${location.host}/ws`);
ws.onopen = () => {
this.onStatus?.("open");
for (const item of this.queue) ws.send(item);
this.queue = [];
};
ws.onmessage = (ev) => {
try {
const data = JSON.parse(ev.data as string);
for (const h of this.handlers) h(data);
} catch {
/* ignore */
}
};
ws.onclose = () => {
this.onStatus?.("closed");
if (!this.closedByUser) setTimeout(() => this.connect(), 1500);
};
this.ws = ws;
}
send(data: unknown) {
const payload = JSON.stringify(data);
if (this.ws?.readyState === WebSocket.OPEN) this.ws.send(payload);
else this.queue.push(payload);
}
close() {
this.closedByUser = true;
this.ws?.close();
}
subscribe(h: Handler): () => void {
this.handlers.add(h);
return () => this.handlers.delete(h);
}
}

540
web/src/styles.css Normal file
View file

@ -0,0 +1,540 @@
:root {
--bg: #0a0f0c;
--bg-panel: #0e1511;
--bg-elevated: #121b15;
--border: #1e2c23;
--text: #d4e4d8;
--text-dim: #7a9484;
--accent: #3ddc84;
--accent-dim: #2a9a5f;
--accent-warm: #ffb454;
--user-bg: #16241c;
--mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body,
#root {
height: 100%;
}
body {
background: var(--bg);
color: var(--text);
font-family: var(--mono);
font-size: 14px;
line-height: 1.55;
}
.app {
display: flex;
height: 100%;
}
/* ---------- Sidebar ---------- */
.sidebar {
width: 250px;
flex-shrink: 0;
background: var(--bg-panel);
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
}
.sidebar-header {
padding: 16px 14px;
border-bottom: 1px solid var(--border);
}
.brand {
font-weight: 700;
letter-spacing: 0.04em;
color: var(--accent);
margin-bottom: 12px;
}
.brand-prompt {
animation: blink 1.2s steps(2) infinite;
}
@keyframes blink {
50% {
opacity: 0.25;
}
}
.btn-new,
.btn-settings,
.btn-send {
font-family: inherit;
font-size: 13px;
background: transparent;
color: var(--accent);
border: 1px solid var(--accent-dim);
border-radius: 6px;
padding: 7px 12px;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
}
.btn-new {
width: 100%;
}
.btn-new:hover,
.btn-settings:hover {
background: rgba(61, 220, 132, 0.08);
border-color: var(--accent);
}
.session-list {
overflow-y: auto;
flex: 1;
padding: 8px;
}
.empty-hint {
color: var(--text-dim);
padding: 10px;
font-size: 13px;
}
.session-item {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 10px;
border-radius: 6px;
cursor: pointer;
color: var(--text-dim);
margin-bottom: 2px;
}
.session-item:hover {
background: var(--bg-elevated);
color: var(--text);
}
.session-item.active {
background: var(--user-bg);
color: var(--accent);
}
.session-title {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 13px;
}
.session-delete {
background: none;
border: none;
color: var(--text-dim);
cursor: pointer;
opacity: 0;
font-size: 12px;
}
.session-item:hover .session-delete {
opacity: 1;
}
.session-delete:hover {
color: #ff6b6b;
}
/* ---------- Main ---------- */
.main {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
}
.topbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 20px;
border-bottom: 1px solid var(--border);
background: var(--bg-panel);
}
.model-badge {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--text-dim);
}
.status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #555;
}
.status-dot.on {
background: var(--accent);
box-shadow: 0 0 6px var(--accent);
}
.status-dot.off {
background: #ff6b6b;
}
.settings-panel {
padding: 14px 20px;
border-bottom: 1px solid var(--border);
background: var(--bg-elevated);
display: flex;
flex-direction: column;
gap: 12px;
}
.setting-row {
display: flex;
align-items: center;
gap: 14px;
font-size: 13px;
color: var(--text-dim);
}
.setting-row.column {
flex-direction: column;
align-items: stretch;
}
.setting-row input[type="range"] {
flex: 1;
accent-color: var(--accent);
}
.setting-row textarea,
.provider-select,
.settings-panel input[list] {
font-family: inherit;
background: var(--bg);
border: 1px solid var(--border);
color: var(--text);
border-radius: 6px;
padding: 8px 10px;
}
.setting-row textarea {
resize: vertical;
}
.provider-select {
min-width: 220px;
}
/* ---------- Messages ---------- */
.messages {
flex: 1;
overflow-y: auto;
padding: 24px 20px;
scroll-behavior: smooth;
}
.welcome {
max-width: 640px;
margin: 80px auto;
text-align: center;
color: var(--text-dim);
}
.welcome-title {
font-size: 22px;
color: var(--accent);
margin-bottom: 12px;
}
.welcome .hint {
margin-top: 8px;
font-size: 13px;
}
.msg {
max-width: 760px;
margin: 0 auto 20px;
}
.msg-role {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-dim);
margin-bottom: 6px;
}
.msg-user .msg-role {
color: var(--accent);
}
.user-content {
background: var(--user-bg);
border: 1px solid var(--border);
border-radius: 10px;
padding: 12px 14px;
white-space: pre-wrap;
word-break: break-word;
}
.markdown {
word-break: break-word;
}
.markdown p {
margin: 0 0 10px;
}
.markdown p:last-child {
margin-bottom: 0;
}
.markdown ul,
.markdown ol {
margin: 0 0 10px 22px;
}
.markdown li {
margin-bottom: 4px;
}
.markdown h1,
.markdown h2,
.markdown h3 {
margin: 16px 0 8px;
color: var(--accent);
}
.markdown blockquote {
border-left: 3px solid var(--accent-dim);
padding-left: 12px;
color: var(--text-dim);
margin: 0 0 10px;
}
.markdown a {
color: var(--accent);
}
.markdown table {
border-collapse: collapse;
margin-bottom: 10px;
}
.markdown th,
.markdown td {
border: 1px solid var(--border);
padding: 5px 10px;
font-size: 13px;
}
.markdown :not(pre) > code {
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: 4px;
padding: 1px 5px;
font-size: 13px;
color: var(--accent-warm);
}
.markdown pre {
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: 8px;
padding: 12px 14px;
overflow-x: auto;
margin-bottom: 10px;
font-size: 13px;
}
/* ---------- Thinking ---------- */
.thinking {
margin-bottom: 8px;
border: 1px dashed var(--border);
border-radius: 8px;
}
.thinking-toggle {
width: 100%;
text-align: left;
background: none;
border: none;
font-family: inherit;
font-size: 12px;
color: var(--text-dim);
padding: 8px 10px;
cursor: pointer;
}
.thinking-toggle:hover {
color: var(--accent-warm);
}
.caret {
display: inline-block;
transition: transform 0.15s;
}
.caret.rotated {
transform: rotate(90deg);
}
.thinking-body {
padding: 4px 12px 10px;
font-size: 12.5px;
color: var(--text-dim);
white-space: pre-wrap;
max-height: 260px;
overflow-y: auto;
}
/* ---------- Composer ---------- */
.composer {
display: flex;
gap: 10px;
padding: 14px 20px 18px;
border-top: 1px solid var(--border);
background: var(--bg-panel);
align-items: stretch;
}
.btn-mic {
width: 46px;
flex-shrink: 0;
font-size: 18px;
background: transparent;
border: 1px solid var(--border);
border-radius: 8px;
cursor: pointer;
color: var(--text-dim);
transition: border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.btn-mic:hover:not(:disabled) {
border-color: var(--accent-dim);
color: var(--accent);
}
.btn-mic.recording {
border-color: #ff6b6b;
color: #ff6b6b;
animation: pulse 1.2s ease-in-out infinite;
}
.btn-mic.transcribing {
border-color: var(--accent-warm);
color: var(--accent-warm);
}
@keyframes pulse {
50% {
box-shadow: 0 0 0 5px rgba(255, 107, 107, 0.15);
}
}
.voice-state {
font-size: 12px;
color: var(--accent-warm);
white-space: nowrap;
}
.topbar-actions {
display: flex;
align-items: center;
gap: 12px;
}
.btn-settings.toggled {
color: var(--accent-warm);
border-color: var(--accent-warm);
}
.voice-error {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin: 0 20px 8px;
padding: 8px 12px;
font-size: 13px;
color: #ffb454;
background: rgba(255, 180, 84, 0.08);
border: 1px solid rgba(255, 180, 84, 0.3);
border-radius: 8px;
}
.voice-error button {
background: none;
border: none;
color: inherit;
cursor: pointer;
}
.composer textarea {
flex: 1;
resize: none;
font-family: inherit;
font-size: 14px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--text);
padding: 11px 14px;
min-height: 44px;
max-height: 180px;
}
.composer textarea:focus {
outline: none;
border-color: var(--accent-dim);
}
.composer textarea::placeholder {
color: #4d6355;
}
.btn-send {
min-width: 96px;
align-self: stretch;
}
.btn-send:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.btn-send:not(:disabled):hover {
background: rgba(61, 220, 132, 0.1);
}
.btn-send.stop {
color: var(--accent-warm);
border-color: var(--accent-warm);
}
/* ---------- Scrollbars ---------- */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 4px;
}
::-webkit-scrollbar-track {
background: transparent;
}

38
web/src/types.ts Normal file
View file

@ -0,0 +1,38 @@
export interface Session {
id: string;
title: string;
created_at: number;
}
export interface Message {
id: string;
session_id: string;
role: "user" | "assistant" | "system";
content: string;
thinking: string | null;
created_at: number;
}
export interface ChatOptions {
think: boolean;
temperature: number;
numPredict: number;
provider: "ollama" | "openrouter";
openrouterModel: string;
}
export interface OpenRouterModel {
id: string;
name: string;
contextLength: number;
promptPrice: number;
}
export interface ModelInfo {
ok: boolean;
model?: string;
parameterSize?: string;
quantization?: string;
capabilities?: string[];
error?: string;
}

194
web/src/useChat.ts Normal file
View file

@ -0,0 +1,194 @@
import { useCallback, useEffect, useRef, useState } from "react";
import { ChatSocket } from "./socket";
import type { ChatOptions, Message, Session } from "./types";
export type ConnStatus = "connecting" | "open" | "closed";
export interface ModelInfo {
ok: boolean;
model?: string;
parameterSize?: string;
quantization?: string;
capabilities?: string[];
error?: string;
}
const OPTIONS_KEY = "oxagenttwo.options";
const SESSION_KEY = "oxagenttwo.session";
const SYSTEM_KEY = "oxagenttwo.systemPrompt";
function loadOptions(): ChatOptions {
const defaults: ChatOptions = {
think: true,
temperature: 0.7,
numPredict: 2048,
provider: "ollama",
openrouterModel: "anthropic/claude-sonnet-4.5",
};
try {
const raw = localStorage.getItem(OPTIONS_KEY);
if (raw) return { ...defaults, ...JSON.parse(raw) };
} catch { /* ignore */ }
return defaults;
}
export function useChat() {
const socketRef = useRef<ChatSocket | null>(null);
const [status, setStatus] = useState<ConnStatus>("connecting");
const [sessions, setSessions] = useState<Session[]>([]);
const [activeId, setActiveId] = useState<string | null>(
() => localStorage.getItem(SESSION_KEY),
);
const [messages, setMessages] = useState<Message[]>([]);
const [streaming, setStreaming] = useState(false);
const [options, setOptionsState] = useState<ChatOptions>(loadOptions);
const [systemPrompt, setSystemPromptState] = useState(
() => localStorage.getItem(SYSTEM_KEY) ?? "",
);
const [modelInfo, setModelInfo] = useState<ModelInfo | null>(null);
const streamingRef = useRef(false);
// socket setup
useEffect(() => {
const sock = new ChatSocket();
socketRef.current = sock;
sock.onStatus = setStatus;
const unsub = sock.subscribe((data) => {
const t = data.type as string;
if (t === "user-message") {
const m = data.message as Message;
setMessages((prev) =>
prev.some((x) => x.id === m.id) ? prev : [...prev, m],
);
} else if (t === "assistant-start") {
const m = data.message as Message;
setMessages((prev) => [...prev, { ...m, content: "", thinking: "" }]);
} else if (t === "thinking") {
const text = data.text as string;
setMessages((prev) =>
prev.map((m) =>
m.id === data.messageId
? { ...m, thinking: (m.thinking ?? "") + text }
: m,
),
);
} else if (t === "token") {
const text = data.text as string;
setMessages((prev) =>
prev.map((m) =>
m.id === data.messageId ? { ...m, content: m.content + text } : m,
),
);
} else if (t === "done" || t === "error") {
streamingRef.current = false;
setStreaming(false);
} else if (t === "sessions-changed" || t === "session-deleted") {
void refreshSessions();
}
});
sock.connect();
return () => {
unsub();
sock.close();
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const refreshSessions = useCallback(async () => {
const res = await fetch("/api/sessions");
const list = (await res.json()) as Session[];
setSessions(list);
setActiveId((cur) => cur ?? list[0]?.id ?? null);
}, []);
useEffect(() => {
void refreshSessions();
fetch("/api/model")
.then((r) => r.json())
.then(setModelInfo)
.catch(() => setModelInfo({ ok: false, error: "Ollama nicht erreichbar" }));
}, [refreshSessions]);
// load messages on session switch
useEffect(() => {
if (!activeId) {
setMessages([]);
return;
}
localStorage.setItem(SESSION_KEY, activeId);
streamingRef.current = false;
setStreaming(false);
fetch(`/api/sessions/${activeId}/messages`)
.then((r) => r.json())
.then((list: Message[]) => setMessages(Array.isArray(list) ? list : []))
.catch(() => setMessages([]));
}, [activeId]);
const setOptions = useCallback((o: Partial<ChatOptions>) => {
setOptionsState((prev) => {
const next = { ...prev, ...o };
localStorage.setItem(OPTIONS_KEY, JSON.stringify(next));
return next;
});
}, []);
const setSystemPrompt = useCallback((p: string) => {
setSystemPromptState(p);
localStorage.setItem(SYSTEM_KEY, p);
}, []);
const sendMessage = useCallback(
(content: string) => {
if (!content.trim() || streamingRef.current || !activeId) return;
streamingRef.current = true;
setStreaming(true);
socketRef.current?.send({
type: "chat",
sessionId: activeId,
content,
options,
systemPrompt,
});
},
[activeId, options, systemPrompt],
);
const abort = useCallback(() => {
socketRef.current?.send({ type: "abort" });
}, []);
const newSession = useCallback(async () => {
const res = await fetch("/api/sessions", { method: "POST" });
const s = (await res.json()) as Session;
await refreshSessions();
setActiveId(s.id);
}, [refreshSessions]);
const deleteSession = useCallback(
async (id: string) => {
await fetch(`/api/sessions/${id}`, { method: "DELETE" });
setSessions((prev) => prev.filter((s) => s.id !== id));
setActiveId((cur) => (cur === id ? null : cur));
await refreshSessions();
},
[refreshSessions],
);
return {
status,
sessions,
activeId,
setActiveId,
messages,
streaming,
sendMessage,
abort,
newSession,
deleteSession,
options,
setOptions,
systemPrompt,
setSystemPrompt,
modelInfo,
};
}

161
web/src/useVoice.ts Normal file
View file

@ -0,0 +1,161 @@
import { useCallback, useEffect, useRef, useState } from "react";
interface Options {
onTranscript: (text: string) => void;
onQueueDrained: () => void;
}
export function useVoice({ onTranscript, onQueueDrained }: Options) {
const [recording, setRecording] = useState(false);
const [transcribing, setTranscribing] = useState(false);
const [speaking, setSpeaking] = useState(false);
const [error, setError] = useState<string | null>(null);
const recorderRef = useRef<MediaRecorder | null>(null);
const chunksRef = useRef<Blob[]>([]);
const streamRef = useRef<MediaStream | null>(null);
const maxDurRef = useRef<ReturnType<typeof setTimeout> | null>(null);
const queueRef = useRef<string[]>([]);
const audioRef = useRef<HTMLAudioElement | null>(null);
const busyRef = useRef(false);
const abortRef = useRef<AbortController | null>(null);
const drainedCbRef = useRef(onQueueDrained);
drainedCbRef.current = onQueueDrained;
const transcriptCbRef = useRef(onTranscript);
transcriptCbRef.current = onTranscript;
// ---- TTS ----
const playNext = useCallback(async () => {
if (busyRef.current) return;
const next = queueRef.current.shift();
if (next === undefined) {
setSpeaking(false);
drainedCbRef.current();
return;
}
busyRef.current = true;
setSpeaking(true);
try {
abortRef.current = new AbortController();
const res = await fetch("/api/tts", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ text: next }),
signal: abortRef.current.signal,
});
if (!res.ok) throw new Error(`TTS HTTP ${res.status}`);
const blob = await res.blob();
const audio = new Audio(URL.createObjectURL(blob));
audioRef.current = audio;
await new Promise<void>((resolve) => {
audio.onended = () => resolve();
audio.onerror = () => resolve();
void audio.play().catch(() => resolve());
});
URL.revokeObjectURL(audio.src);
} catch (err) {
if (!(err instanceof DOMException && err.name === "AbortError")) {
setError(err instanceof Error ? err.message : String(err));
}
} finally {
busyRef.current = false;
abortRef.current = null;
void playNext();
}
}, []);
const enqueueSpeech = useCallback(
(text: string) => {
const t = text.trim();
if (!t) return;
queueRef.current.push(t);
void playNext();
},
[playNext],
);
const cancelSpeech = useCallback(() => {
queueRef.current = [];
abortRef.current?.abort();
if (audioRef.current) {
audioRef.current.pause();
audioRef.current.src = "";
}
busyRef.current = false;
setSpeaking(false);
}, []);
// ---- STT / Recording ----
const stopRecording = useCallback(() => {
if (maxDurRef.current) clearTimeout(maxDurRef.current);
maxDurRef.current = null;
recorderRef.current?.state === "recording" && recorderRef.current.stop();
}, []);
const startRecording = useCallback(async () => {
if (recorderRef.current?.state === "recording") return;
setError(null);
try {
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
streamRef.current = stream;
const recorder = new MediaRecorder(stream);
chunksRef.current = [];
recorder.ondataavailable = (e) => {
if (e.data.size > 0) chunksRef.current.push(e.data);
};
recorder.onstop = async () => {
streamRef.current?.getTracks().forEach((t) => t.stop());
streamRef.current = null;
setRecording(false);
const blob = new Blob(chunksRef.current);
chunksRef.current = [];
if (blob.size < 2000) return;
setTranscribing(true);
try {
const res = await fetch("/api/stt", {
method: "POST",
headers: { "Content-Type": "application/octet-stream" },
body: blob,
});
const data = (await res.json()) as { ok: boolean; text?: string; error?: string };
if (!data.ok) throw new Error(data.error ?? "STT fehlgeschlagen");
const text = data.text?.trim();
if (text) transcriptCbRef.current(text);
else setError("Nichts verstanden — bitte nochmal sprechen.");
} catch (err) {
setError(err instanceof Error ? err.message : String(err));
} finally {
setTranscribing(false);
}
};
recorderRef.current = recorder;
recorder.start();
setRecording(true);
maxDurRef.current = setTimeout(() => stopRecording(), 30_000);
} catch (err) {
setError(err instanceof Error ? err.message : String(err));
}
}, [onTranscript, stopRecording]);
useEffect(() => {
return () => {
recorderRef.current?.state === "recording" && recorderRef.current.stop();
streamRef.current?.getTracks().forEach((t) => t.stop());
cancelSpeech();
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return {
recording,
transcribing,
speaking,
error,
setError,
startRecording,
stopRecording,
enqueueSpeech,
cancelSpeech,
};
}

15
web/tsconfig.json Normal file
View file

@ -0,0 +1,15 @@
{
"compilerOptions": {
"target": "ES2022",
"lib": ["ES2022", "DOM", "DOM.Iterable"],
"module": "ESNext",
"moduleResolution": "bundler",
"jsx": "react-jsx",
"strict": true,
"skipLibCheck": true,
"noEmit": true,
"useDefineForClassFields": true,
"isolatedModules": true
},
"include": ["src"]
}

16
web/vite.config.ts Normal file
View file

@ -0,0 +1,16 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
plugins: [react()],
server: {
port: 5173,
proxy: {
"/api": "http://127.0.0.1:8787",
"/ws": {
target: "ws://127.0.0.1:8787",
ws: true,
},
},
},
});