'+(r?t:$e(t,!0))+`"+(r?t:$e(t,!0))+`-${t}-`}html(t,n){return t}heading(t,n,r){return`
-`}list(t,n,r){const l=n?"ol":"ul",i=n&&r!==1?' start="'+r+'"':"";return"<"+l+i+`> -`+t+" -`}listitem(t,n,r){return`
${t}
-`}table(t,n){return n&&(n=`${n}`),`${t}`}br(){return""}del(t){return`
An error occurred:
"+$e(r.message+"",!0)+"";return n?Promise.resolve(l):l}if(n)return Promise.reject(r);throw r}};const En=new pg;function H(e,t){return En.parse(e,t)}H.options=H.setOptions=function(e){return En.setOptions(e),H.defaults=En.defaults,Od(H.defaults),H};H.getDefaults=Tu;H.defaults=Cn;H.use=function(...e){return En.use(...e),H.defaults=En.defaults,Od(H.defaults),H};H.walkTokens=function(e,t){return En.walkTokens(e,t)};H.parseInline=En.parseInline;H.Parser=wt;H.parser=wt.parse;H.Renderer=cl;H.TextRenderer=Pu;H.Lexer=kt;H.lexer=kt.lex;H.Tokenizer=Ri;H.Hooks=Gr;H.parse=H;H.options;H.setOptions;H.use;H.walkTokens;H.parseInline;wt.parse;kt.lex;/*! @license DOMPurify 3.3.3 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.3.3/LICENSE */const{entries:Wd,setPrototypeOf:ac,isFrozen:hg,getPrototypeOf:mg,getOwnPropertyDescriptor:gg}=Object;let{freeze:Ne,seal:nt,create:ni}=Object,{apply:As,construct:Ls}=typeof Reflect<"u"&&Reflect;Ne||(Ne=function(t){return t});nt||(nt=function(t){return t});As||(As=function(t,n){for(var r=arguments.length,l=new Array(r>2?r-2:0),i=2;i
-
`};H.setOptions({breaks:!0,gfm:!0});H.use({renderer:Yd});function vc(e){const t=H.parse(e);return Dg.sanitize(t,{ADD_TAGS:["div","span","button","pre","code"],ADD_ATTR:["class","data-code"],FORCE_BODY:!1})}function jg({message:e,onDelete:t,onEditAndResend:n,onEditAssistant:r,renderMarkdown:l}){const[i,o]=M.useState(!1),[s,u]=M.useState(e.content),[a,m]=M.useState(!1),g=M.useRef(null),d=M.useRef(null);M.useEffect(()=>{if(!d.current)return;d.current.querySelectorAll(".copy-code-btn").forEach(h=>{h.onclick=()=>{const v=h.getAttribute("data-code")||"";navigator.clipboard.writeText(v).then(()=>{h.textContent="Copied!",h.style.color="var(--success)",setTimeout(()=>{h.textContent="Copy",h.style.color=""},2e3)})}})});const y=()=>{const c=g.current;c&&(c.style.height="auto",c.style.height=Math.min(c.scrollHeight,300)+"px")},w=()=>{u(e.content),o(!0),setTimeout(()=>{var c;(c=g.current)==null||c.focus(),y()},0)},k=()=>o(!1),O=c=>{const h=s.trim();h&&(o(!1),c&&n?n(e,h):r&&r(e.id,h))},p=()=>{navigator.clipboard.writeText(e.content).then(()=>{m(!0),setTimeout(()=>m(!1),2e3)})};return _.jsx("div",{className:`msg-wrapper ${e.role}`,children:i?_.jsxs("div",{className:"msg-edit-container",children:[_.jsx("textarea",{ref:g,className:"msg-edit-textarea",value:s,onChange:c=>{u(c.target.value),y()},onKeyDown:c=>{c.key==="Escape"&&k(),c.key==="Enter"&&c.ctrlKey&&O(!1)}}),_.jsxs("div",{className:"msg-edit-actions",children:[n&&_.jsx("button",{className:"btn-primary",onClick:()=>O(!0),children:"Save & Resend"}),_.jsx("button",{className:"btn-secondary",onClick:()=>O(!1),children:"Save only"}),_.jsx("button",{className:"btn-ghost",onClick:k,children:"Cancel"})]})]}):_.jsxs(_.Fragment,{children:[e.role==="assistant"?_.jsx("div",{ref:d,className:"msg-bubble",dangerouslySetInnerHTML:{__html:l(e.content)}}):_.jsx("div",{className:"msg-bubble",children:e.content}),_.jsxs("div",{className:"msg-actions",children:[_.jsx("button",{className:`action-btn ${a?"copied":""}`,onClick:p,children:a?"✓ Copied":"⎘ Copy"}),_.jsxs("button",{className:"action-btn",onClick:w,children:["✎ Edit",n?" & Resend":""]}),_.jsx("button",{className:"action-btn danger",onClick:()=>t(e.id),children:"✕ Delete"})]})]})})}const Fg=20;function Ug({db:e,chatId:t,server:n,apiKey:r,model:l,onChatCreated:i,onChatUpdated:o}){const[s,u]=M.useState([]),[a,m]=M.useState(""),[g,d]=M.useState(!1),[y,w]=M.useState(null),[k,O]=M.useState(null),[p,c]=M.useState(!0),[h,v]=M.useState(!0),T=M.useRef(null),N=M.useRef(null),A=M.useRef(null);M.useEffect(()=>{Mg()},[]);const L=M.useCallback(()=>{if(!t){u([]);return}const E=e.query("SELECT * FROM messages WHERE chat_id = ? ORDER BY created_at ASC",[t]);u(E)},[e,t]);M.useEffect(()=>{L()},[L]),M.useEffect(()=>{var E;(E=T.current)==null||E.scrollIntoView({behavior:"smooth"})},[s,y]);const X=()=>{const E=N.current;E&&(E.style.height="auto",E.style.height=Math.min(E.scrollHeight,200)+"px")},j=M.useCallback(()=>{if(t)return t;e.run("INSERT INTO chats (title) VALUES ('New Chat')");const I=e.get("SELECT last_insert_rowid() as id").id;return i(I),I},[t,e,i]),B=M.useCallback((E,I)=>{const D=I.slice(0,50)+(I.length>50?"…":"");e.run("UPDATE chats SET title = ?, updated_at = strftime('%s','now') WHERE id = ?",[D,E]),o()},[e,o]),Ge=M.useCallback(E=>{const I=h?Fg:1;return e.query("SELECT role, content FROM messages WHERE chat_id = ? ORDER BY created_at DESC LIMIT ?",[E,I]).reverse()},[e,h]),Ye=M.useCallback(async(E,I)=>{var V,ye,Xe,rt,cr,Nn,fr;if(!E.trim()||g)return;if(!l){alert("No model selected");return}d(!0),w(null);const D=I??j();e.run("INSERT INTO messages (chat_id, role, content) VALUES (?, 'user', ?)",[D,E]);const K=e.get("SELECT COUNT(*) as c FROM messages WHERE chat_id = ?",[D]);(K==null?void 0:K.c)===1&&B(D,E),L();const J=Ge(D),je={"Content-Type":"application/json"};r&&(je.Authorization=`Bearer ${r}`),A.current=new AbortController;try{const Ke=await fetch(`${n}/v1/chat/completions`,{method:"POST",headers:je,signal:A.current.signal,body:JSON.stringify({model:l,messages:J,stream:p,stream_options:p?{include_usage:!0}:void 0,max_tokens:2048})});if(!Ke.ok){const ve=await Ke.json().catch(()=>({}));throw new Error(((V=ve==null?void 0:ve.error)==null?void 0:V.message)||`HTTP ${Ke.status}`)}let lt="",it=null;if(p){const ve=Ke.body.getReader(),dr=new TextDecoder;let sn="";for(;;){const{done:jt,value:Rn}=await ve.read();if(jt)break;sn+=dr.decode(Rn,{stream:!0});const un=sn.split(`
-`);sn=un.pop();for(const pr of un){if(!pr.startsWith("data: "))continue;const hr=pr.slice(6).trim();if(hr!=="[DONE]")try{const mr=JSON.parse(hr),An=(rt=(Xe=(ye=mr.choices)==null?void 0:ye[0])==null?void 0:Xe.delta)==null?void 0:rt.content;An&&(lt+=An,w(lt)),mr.usage&&(it=mr.usage)}catch{}}}}else{const ve=await Ke.json();lt=((fr=(Nn=(cr=ve.choices)==null?void 0:cr[0])==null?void 0:Nn.message)==null?void 0:fr.content)||"",it=ve.usage}e.run("INSERT INTO messages (chat_id, role, content) VALUES (?, 'assistant', ?)",[D,lt]),e.run("UPDATE chats SET updated_at = strftime('%s','now') WHERE id = ?",[D]),it!=null&&it.tokens_per_second&&O(it.tokens_per_second),o()}catch(Ke){Ke instanceof Error&&Ke.name!=="AbortError"&&e.run("INSERT INTO messages (chat_id, role, content) VALUES (?, 'assistant', ?)",[D,`⚠️ Error: ${Ke.message}`])}finally{d(!1),w(null),L(),A.current=null}},[g,l,n,r,p,e,j,B,Ge,L,o]),xt=()=>{const E=a.trim();E&&(m(""),N.current&&(N.current.style.height="auto"),Ye(E))},ar=()=>{var E;(E=A.current)==null||E.abort()},ln=E=>{e.run("DELETE FROM messages WHERE id = ?",[E]),L()},on=(E,I)=>{e.run("UPDATE messages SET content = ? WHERE id = ?",[I,E.id]),e.run("DELETE FROM messages WHERE chat_id = ? AND id > ?",[E.chat_id,E.id]),L(),Ye(I,E.chat_id)},C=(E,I)=>{e.run("UPDATE messages SET content = ? WHERE id = ?",[I,E]),L()};return _.jsxs("div",{className:"chat-view",children:[_.jsxs("div",{className:"chat-topbar",children:[_.jsx("div",{className:"chat-topbar-left",children:k!==null&&_.jsxs("span",{className:"tps-badge",children:[k.toFixed(1)," tok/s"]})}),_.jsxs("div",{className:"chat-topbar-right",children:[_.jsxs("label",{className:"toggle-label",children:[_.jsx("input",{type:"checkbox",checked:p,onChange:E=>c(E.target.checked)}),"Streaming"]}),_.jsxs("label",{className:"toggle-label",children:[_.jsx("input",{type:"checkbox",checked:h,onChange:E=>v(E.target.checked)}),"Memory"]})]})]}),_.jsxs("div",{className:"messages-area",children:[!t&&s.length===0&&_.jsxs("div",{className:"empty-state",children:[_.jsx("div",{className:"empty-icon",children:"⚡"}),_.jsx("h2",{children:"ForgeLM Chat"}),_.jsx("p",{children:"Start a conversation. Supports full Markdown, code highlighting, and persistent history."})]}),s.map(E=>_.jsx(jg,{message:E,onDelete:ln,onEditAndResend:E.role==="user"?on:void 0,onEditAssistant:E.role==="assistant"?C:void 0,renderMarkdown:vc},E.id)),g&&y!==null&&_.jsx("div",{className:"msg-wrapper assistant",children:_.jsx("div",{className:"msg-bubble",dangerouslySetInnerHTML:{__html:vc(y)}})}),g&&y===null&&_.jsx("div",{className:"msg-wrapper assistant",children:_.jsxs("div",{className:"thinking",children:[_.jsx("span",{}),_.jsx("span",{}),_.jsx("span",{})]})}),_.jsx("div",{ref:T})]}),_.jsxs("div",{className:"input-area",children:[_.jsxs("div",{className:"input-row",children:[_.jsx("textarea",{ref:N,className:"input-textarea",value:a,onChange:E=>{m(E.target.value),X()},onKeyDown:E=>{E.key==="Enter"&&!E.shiftKey&&(E.preventDefault(),xt())},placeholder:"Message… (Enter to send, Shift+Enter for new line)",rows:1,disabled:g}),g?_.jsx("button",{className:"stop-btn",onClick:ar,children:"■ Stop"}):_.jsx("button",{className:"send-btn",onClick:xt,disabled:!a.trim(),children:"Send ↑"})]}),_.jsx("div",{className:"input-meta",children:_.jsxs("span",{className:"char-count",children:[a.length," chars"]})})]})]})}class $g{constructor(t){G(this,"inner");this.inner=t}run(t,n=[]){this.inner.run(t,n),this.persist()}query(t,n=[]){const r=this.inner.prepare(t);r.bind(n);const l=[];for(;r.step();)l.push(r.getAsObject());return r.free(),l}get(t,n=[]){return this.query(t,n)[0]??null}persist(){try{const t=this.inner.export(),n=btoa(String.fromCharCode(...t));localStorage.setItem("forgelm_db_v2",n)}catch{}}}async function Hg(){window.initSqlJs||await new Promise((l,i)=>{const o=document.createElement("script");o.src="https://cdn.jsdelivr.net/npm/sql.js@1.12.0/dist/sql-wasm.js",o.onload=()=>l(),o.onerror=i,document.head.appendChild(o)});const e=await window.initSqlJs({locateFile:l=>`https://cdn.jsdelivr.net/npm/sql.js@1.12.0/dist/${l}`}),t=localStorage.getItem("forgelm_db_v2");let n;if(t){const l=Uint8Array.from(atob(t),i=>i.charCodeAt(0));n=new e.Database(l)}else n=new e.Database;const r=new $g(n);return r.run(`
- CREATE TABLE IF NOT EXISTS chats (
- id INTEGER PRIMARY KEY AUTOINCREMENT,
- title TEXT NOT NULL DEFAULT 'New Chat',
- created_at INTEGER NOT NULL DEFAULT (strftime('%s','now')),
- updated_at INTEGER NOT NULL DEFAULT (strftime('%s','now'))
- )
- `),r.run(`
- CREATE TABLE IF NOT EXISTS messages (
- id INTEGER PRIMARY KEY AUTOINCREMENT,
- chat_id INTEGER NOT NULL,
- role TEXT NOT NULL,
- content TEXT NOT NULL,
- created_at INTEGER NOT NULL DEFAULT (strftime('%s','now'))
- )
- `),r.run("CREATE INDEX IF NOT EXISTS idx_msg_chat ON messages(chat_id, created_at)"),r}function Bg(){const[e,t]=M.useState(null),[n,r]=M.useState(!1);return M.useEffect(()=>{Hg().then(l=>{t(l),r(!0)})},[]),{db:e,ready:n}}function Wg(e,t){const[n,r]=M.useState([]),[l,i]=M.useState(""),[o,s]=M.useState("loading"),u=M.useCallback(async()=>{s("loading");try{const a={};t&&(a.Authorization=`Bearer ${t}`);const d=(await(await fetch(`${e}/v1/models`,{headers:a})).json()).data||[];r(d),d.length>0&&!l&&i(d[0].id),s("ok")}catch{s("error")}},[e,t,l]);return M.useEffect(()=>{u();const a=setInterval(u,3e4);return()=>clearInterval(a)},[u]),{models:n,selectedModel:l,setSelectedModel:i,status:o,refresh:u}}function Vg(){const{db:e,ready:t}=Bg(),[n,r]=M.useState(null),[l,i]=M.useState([]),[o,s]=M.useState(()=>localStorage.getItem("forgelm_server")||"http://127.0.0.1:8080"),[u,a]=M.useState(()=>localStorage.getItem("forgelm_apikey")||""),{models:m,selectedModel:g,setSelectedModel:d,status:y,refresh:w}=Wg(o,u);M.useEffect(()=>{localStorage.setItem("forgelm_server",o)},[o]),M.useEffect(()=>{localStorage.setItem("forgelm_apikey",u)},[u]);const k=M.useCallback(()=>{if(!e)return;const c=e.query("SELECT * FROM chats ORDER BY updated_at DESC");i(c)},[e]);M.useEffect(()=>{k()},[k]);const O=M.useCallback(()=>{if(!e)return;e.run("INSERT INTO chats (title) VALUES ('New Chat')");const c=e.get("SELECT last_insert_rowid() as id");c&&(r(c.id),k())},[e,k]),p=M.useCallback(c=>{e&&(e.run("DELETE FROM chats WHERE id = ?",[c]),n===c&&r(null),k())},[e,n,k]);return t?_.jsxs("div",{className:"app-layout",children:[_.jsx(Om,{chats:l,currentChatId:n,onSelectChat:r,onNewChat:O,onDeleteChat:p,server:o,onServerChange:s,apiKey:u,onApiKeyChange:a,models:m,selectedModel:g,onModelChange:d,status:y,onRefreshModels:w}),_.jsx(Ug,{db:e,chatId:n,server:o,apiKey:u,model:g,onChatCreated:c=>{r(c),k()},onChatUpdated:k})]}):_.jsxs("div",{className:"app-loading",children:[_.jsx("div",{className:"loading-spinner"}),_.jsx("span",{children:"Initializing…"})]})}zo.createRoot(document.getElementById("root")).render(_.jsx(wp.StrictMode,{children:_.jsx(Vg,{})}));
diff --git a/tauri-app/dist/index.html b/tauri-app/dist/index.html
index 34ed5f2..93784cd 100644
--- a/tauri-app/dist/index.html
+++ b/tauri-app/dist/index.html
@@ -4,8 +4,8 @@
- ${n}
-
-
- ${r}
+ {chatId !== null && chatTotals.total_tokens > 0 && (
+
+ Sent {chatTotals.prompt_tokens}
+ Generated {chatTotals.completion_tokens}
+ Total {chatTotals.total_tokens}
+
+ )}
{tps !== null && (
{tps.toFixed(1)} tok/s
)}
@@ -241,17 +298,43 @@ export default function ChatView({ db, chatId, server, apiKey, model, onChatCrea
))}
{/* Live streaming bubble */}
- {generating && streamContent !== null && (
+ {generating && (streamReasoning || streamContent || streamThinkingOpen) && (
-
+ {(streamReasoning || streamThinkingOpen) && (
+
)}
- {/* Thinking indicator */}
- {generating && streamContent === null && (
+ {generating && !streamReasoning && !streamContent && !streamThinkingOpen && (
+
+ {showLiveReasoning && streamReasoning && (
+
+ )}
+
+ )}
+
+ {streamContent && (
+
+ )}
+
+ {!streamContent && streamThinkingOpen && (
+
+
+
+ )}
diff --git a/tauri-app/src/components/MessageBubble.css b/tauri-app/src/components/MessageBubble.css
index d131c21..76343ed 100644
--- a/tauri-app/src/components/MessageBubble.css
+++ b/tauri-app/src/components/MessageBubble.css
@@ -66,6 +66,58 @@
.btn-ghost:hover { color: var(--text2); }
/* Message actions */
+.reasoning-panel {
+ width: 100%;
+ margin-bottom: 8px;
+}
+
+.reasoning-toggle {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ background: rgba(124, 158, 248, 0.08);
+ color: var(--text2);
+ border: 1px solid var(--border);
+ border-radius: 999px;
+ padding: 6px 12px;
+ font-size: 0.75rem;
+ cursor: pointer;
+ font-family: inherit;
+}
+
+.reasoning-toggle:hover {
+ background: rgba(124, 158, 248, 0.12);
+ color: var(--text);
+}
+
+.reasoning-content {
+ margin-top: 8px;
+ padding: 12px 14px;
+ background: rgba(124, 158, 248, 0.06);
+ border: 1px solid var(--border);
+ border-radius: var(--radius);
+ color: var(--text2);
+ font-size: 0.84rem;
+ line-height: 1.6;
+}
+
+.message-metrics {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+ margin-top: 8px;
+ color: var(--text3);
+ font-size: 0.72rem;
+ font-variant-numeric: tabular-nums;
+}
+
+.message-metrics span {
+ background: var(--bg3);
+ border: 1px solid var(--border);
+ border-radius: 999px;
+ padding: 3px 8px;
+}
+
.msg-actions {
display: flex;
gap: 4px;
diff --git a/tauri-app/src/components/MessageBubble.tsx b/tauri-app/src/components/MessageBubble.tsx
index f819343..7d768c0 100644
--- a/tauri-app/src/components/MessageBubble.tsx
+++ b/tauri-app/src/components/MessageBubble.tsx
@@ -14,8 +14,10 @@ export default function MessageBubble({ message, onDelete, onEditAndResend, onEd
const [editing, setEditing] = useState(false);
const [editValue, setEditValue] = useState(message.content);
const [copied, setCopied] = useState(false);
+ const [showReasoning, setShowReasoning] = useState(false);
const textareaRef = useRef(null);
const bubbleRef = useRef(null);
+ const reasoningRef = useRef(null);
// Wire up copy-code buttons inside rendered markdown
useEffect(() => {
@@ -33,6 +35,21 @@ export default function MessageBubble({ message, onDelete, onEditAndResend, onEd
});
});
+ useEffect(() => {
+ if (!reasoningRef.current) return;
+ const buttons = reasoningRef.current.querySelectorAll(".copy-code-btn");
+ buttons.forEach((btn) => {
+ btn.onclick = () => {
+ const code = btn.getAttribute("data-code") || "";
+ navigator.clipboard.writeText(code).then(() => {
+ btn.textContent = "Copied!";
+ btn.style.color = "var(--success)";
+ setTimeout(() => { btn.textContent = "Copy"; btn.style.color = ""; }, 2000);
+ });
+ };
+ });
+ });
+
const autoResize = () => {
const el = textareaRef.current;
if (!el) return;
@@ -66,6 +83,13 @@ export default function MessageBubble({ message, onDelete, onEditAndResend, onEd
});
};
+ const hasReasoning = Boolean(message.reasoning_content?.trim());
+ const hasUsage = message.role === "assistant" && (
+ (message.prompt_tokens ?? 0) > 0 ||
+ (message.completion_tokens ?? 0) > 0 ||
+ (message.total_tokens ?? 0) > 0
+ );
+
return (
{editing ? (
@@ -94,6 +118,26 @@ export default function MessageBubble({ message, onDelete, onEditAndResend, onEd
) : (
<>
+ {hasReasoning && (
+
+
+ {showReasoning && (
+
+ )}
+
+ )}
+
{message.role === "assistant" ? (
) : (
- {message.content}
+ {message.content}
+ )}
+
+ {hasUsage && (
+
+ Sent {message.prompt_tokens ?? 0}
+ Generated {message.completion_tokens ?? 0}
+ Total {message.total_tokens ?? 0}
+ {message.tokens_per_second ? {message.tokens_per_second.toFixed(1)} tok/s : null}
+
)}
diff --git a/tauri-app/src/components/Sidebar.css b/tauri-app/src/components/Sidebar.css
index e95a33e..3ed038a 100644
--- a/tauri-app/src/components/Sidebar.css
+++ b/tauri-app/src/components/Sidebar.css
@@ -1,7 +1,9 @@
.sidebar {
width: 280px;
min-width: 280px;
- background: var(--bg2);
+ background:
+ radial-gradient(circle at top left, rgba(72, 166, 255, 0.12), transparent 26%),
+ var(--bg2);
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
@@ -29,7 +31,7 @@
.brand-icon {
width: 28px;
height: 28px;
- background: linear-gradient(135deg, var(--accent), #7c3aed);
+ background: linear-gradient(135deg, #2b88e6, #49c0ff);
border-radius: 8px;
display: flex;
align-items: center;
@@ -43,7 +45,7 @@
font-size: 15px;
font-weight: 800;
letter-spacing: -0.02em;
- background: linear-gradient(135deg, #e8e8ed, #9ca3af);
+ background: linear-gradient(135deg, #f5fbff, #89b5d9);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
@@ -196,7 +198,7 @@
.new-chat-btn {
width: 100%;
- background: linear-gradient(135deg, var(--accent), #7c3aed);
+ background: linear-gradient(135deg, #2b88e6, #49c0ff);
color: #fff;
border: none;
border-radius: var(--radius-sm);
@@ -211,12 +213,12 @@
transition: opacity 0.15s, transform 0.1s, box-shadow 0.15s;
font-family: inherit;
letter-spacing: 0.01em;
- box-shadow: 0 2px 10px rgba(91,106,240,0.25);
+ box-shadow: 0 2px 10px rgba(72,166,255,0.25);
}
.new-chat-btn:hover {
opacity: 0.9;
- box-shadow: 0 4px 16px rgba(91,106,240,0.4);
+ box-shadow: 0 4px 16px rgba(72,166,255,0.4);
}
.new-chat-btn:active {
diff --git a/tauri-app/src/components/Sidebar.tsx b/tauri-app/src/components/Sidebar.tsx
index fc471a1..275c307 100644
--- a/tauri-app/src/components/Sidebar.tsx
+++ b/tauri-app/src/components/Sidebar.tsx
@@ -1,7 +1,8 @@
import { useState } from "react";
import type { Chat, ModelInfo, ServerStatus } from "../lib/types";
-import type { ProcessStatus, ServerConfig } from "../hooks/useServerProcess";
-import ServerPanel from "./ServerPanel";
+import RuntimeSettingsDrawer from "../features/runtime/components/RuntimeSettingsDrawer";
+import RuntimeStatusCard from "../features/runtime/components/RuntimeStatusCard";
+import type { RuntimeConfig, RuntimeSnapshot } from "../features/runtime/types";
import "./Sidebar.css";
interface Props {
@@ -10,33 +11,31 @@ interface Props {
onSelectChat: (id: number) => void;
onNewChat: () => void;
onDeleteChat: (id: number) => void;
- server: string;
- onServerChange: (v: string) => void;
- apiKey: string;
- onApiKeyChange: (v: string) => void;
models: ModelInfo[];
selectedModel: string;
onModelChange: (v: string) => void;
status: ServerStatus;
onRefreshModels: () => void;
- serverProcess: {
- status: ProcessStatus;
- message: string;
- start: (cfg: ServerConfig) => void;
- stop: () => void;
+ runtime: {
+ snapshot: RuntimeSnapshot;
+ loading: boolean;
+ busy: boolean;
+ saveConfig: (patch: Partial) => Promise;
+ startLocal: () => Promise;
+ stopLocal: () => Promise;
};
}
export default function Sidebar({
chats, currentChatId, onSelectChat, onNewChat, onDeleteChat,
- server, onServerChange, apiKey, onApiKeyChange,
models, selectedModel, onModelChange, status, onRefreshModels,
- serverProcess,
+ runtime,
}: Props) {
- const [showSettings, setShowSettings] = useState(false);
+ const [showRuntimeSettings, setShowRuntimeSettings] = useState(false);
return (
-
+
+ setShowRuntimeSettings(false)}
+ onSave={runtime.saveConfig}
+ onStart={() => runtime.startLocal()}
+ onStop={() => runtime.stopLocal()}
+ />
+
);
}
diff --git a/tauri-app/src/features/runtime/api.ts b/tauri-app/src/features/runtime/api.ts
new file mode 100644
index 0000000..8c25c26
--- /dev/null
+++ b/tauri-app/src/features/runtime/api.ts
@@ -0,0 +1,120 @@
+import { invoke } from "@tauri-apps/api/core";
+import { createDefaultRuntimeSnapshot } from "./runtime-utils";
+import type {
+ RuntimeConfig,
+ RuntimeGpuInfo,
+ RuntimeModelFile,
+ RuntimePickDirResult,
+ RuntimeSnapshot,
+} from "./types";
+
+const STORAGE_KEY = "forgelm_runtime_snapshot_v1";
+
+function canUseLocalStorage(): boolean {
+ return typeof window !== "undefined" && typeof window.localStorage !== "undefined";
+}
+
+function readFallbackSnapshot(): RuntimeSnapshot {
+ if (!canUseLocalStorage()) {
+ return createDefaultRuntimeSnapshot();
+ }
+
+ const raw = window.localStorage.getItem(STORAGE_KEY);
+ if (!raw) {
+ return createDefaultRuntimeSnapshot();
+ }
+
+ try {
+ return { ...createDefaultRuntimeSnapshot(), ...JSON.parse(raw) } as RuntimeSnapshot;
+ } catch {
+ return createDefaultRuntimeSnapshot();
+ }
+}
+
+function writeFallbackSnapshot(snapshot: RuntimeSnapshot): RuntimeSnapshot {
+ if (canUseLocalStorage()) {
+ window.localStorage.setItem(STORAGE_KEY, JSON.stringify(snapshot));
+ }
+ return snapshot;
+}
+
+export async function bootstrapRuntime(): Promise {
+ try {
+ return await invoke("bootstrap_runtime_command");
+ } catch {
+ return readFallbackSnapshot();
+ }
+}
+
+export async function getRuntimeSnapshot(): Promise {
+ try {
+ return await invoke("get_runtime_snapshot_command");
+ } catch {
+ return readFallbackSnapshot();
+ }
+}
+
+export async function saveRuntimeConfig(config: RuntimeConfig): Promise {
+ try {
+ return await invoke("save_runtime_config_command_handler", { config });
+ } catch {
+ const snapshot = readFallbackSnapshot();
+ return writeFallbackSnapshot({ ...snapshot, config });
+ }
+}
+
+export async function startRuntime(): Promise {
+ try {
+ return await invoke("start_runtime_command");
+ } catch {
+ const snapshot = readFallbackSnapshot();
+ return writeFallbackSnapshot({
+ ...snapshot,
+ status: "error",
+ last_error: { code: "tauri_unavailable", message: "Local runtime control requires the Tauri desktop app." },
+ });
+ }
+}
+
+export async function stopRuntime(): Promise {
+ try {
+ return await invoke("stop_runtime_command");
+ } catch {
+ const snapshot = readFallbackSnapshot();
+ return writeFallbackSnapshot({ ...snapshot, status: "stopped", process_running: false, ready: false });
+ }
+}
+
+export async function queryRuntimeGpu(): Promise {
+ try {
+ return await invoke("query_gpu");
+ } catch {
+ return null;
+ }
+}
+
+export async function scanRuntimeModels(dir: string): Promise {
+ return invoke("scan_models", { dir });
+}
+
+export async function pickRuntimeModelsDir(): Promise {
+ try {
+ return await invoke("pick_models_dir");
+ } catch (error) {
+ if (String(error) === "cancelled") {
+ return null;
+ }
+ throw error;
+ }
+}
+
+export async function pickRuntimeModelFiles(): Promise {
+ try {
+ return await invoke("pick_model_files");
+ } catch (error) {
+ if (String(error) === "cancelled") {
+ return [];
+ }
+ throw error;
+ }
+}
diff --git a/tauri-app/src/features/runtime/components/RuntimeSettingsDrawer.css b/tauri-app/src/features/runtime/components/RuntimeSettingsDrawer.css
new file mode 100644
index 0000000..db8f9b7
--- /dev/null
+++ b/tauri-app/src/features/runtime/components/RuntimeSettingsDrawer.css
@@ -0,0 +1,355 @@
+.runtime-drawer-shell {
+ position: fixed;
+ inset: 0;
+ z-index: 40;
+ display: flex;
+ justify-content: flex-end;
+}
+
+.runtime-drawer-backdrop {
+ flex: 1;
+ border: 0;
+ background: rgba(5, 6, 10, 0.58);
+ backdrop-filter: blur(6px);
+}
+
+.runtime-drawer {
+ width: min(560px, 100%);
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ background:
+ radial-gradient(circle at top right, rgba(72, 166, 255, 0.14), transparent 24%),
+ linear-gradient(180deg, #10161f, #0b1017 72%);
+ border-left: 1px solid rgba(255, 255, 255, 0.07);
+ box-shadow: -28px 0 70px rgba(0, 0, 0, 0.48);
+}
+
+.runtime-drawer-header,
+.runtime-drawer-footer {
+ padding: 20px 22px;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.runtime-drawer-footer {
+ border-bottom: 0;
+ border-top: 1px solid rgba(255, 255, 255, 0.05);
+ display: flex;
+ gap: 10px;
+}
+
+.runtime-drawer-kicker {
+ font-size: 11px;
+ font-weight: 700;
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+ color: #78bdf4;
+ margin-bottom: 6px;
+}
+
+.runtime-drawer-header h2 {
+ font-size: 28px;
+ line-height: 1.1;
+ letter-spacing: -0.03em;
+}
+
+.runtime-drawer-copy {
+ margin-top: 10px;
+ max-width: 34ch;
+ color: var(--text2);
+ line-height: 1.55;
+}
+
+.runtime-drawer-header {
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ gap: 12px;
+}
+
+.runtime-drawer-close {
+ width: 36px;
+ height: 36px;
+ border-radius: 999px;
+ border: 1px solid rgba(255, 255, 255, 0.08);
+ background: rgba(255, 255, 255, 0.04);
+ color: var(--text);
+ font-size: 26px;
+ line-height: 1;
+ cursor: pointer;
+}
+
+.runtime-drawer-body {
+ flex: 1;
+ overflow-y: auto;
+ padding: 20px 22px 28px;
+}
+
+.runtime-drawer-section {
+ margin-bottom: 18px;
+}
+
+.runtime-section-card,
+.runtime-overview-card {
+ border: 1px solid rgba(255, 255, 255, 0.07);
+ border-radius: 18px;
+ background: rgba(255, 255, 255, 0.035);
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
+}
+
+.runtime-section-card {
+ padding: 16px;
+}
+
+.runtime-overview-card {
+ display: grid;
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ gap: 14px;
+ padding: 18px;
+ margin-bottom: 18px;
+}
+
+.runtime-overview-label {
+ font-size: 11px;
+ font-weight: 700;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+ color: var(--text3);
+ margin-bottom: 8px;
+}
+
+.runtime-overview-value {
+ color: var(--text);
+ font-size: 14px;
+ line-height: 1.45;
+}
+
+.runtime-overview-mono,
+.runtime-static-value-mono {
+ font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
+ font-size: 13px;
+}
+
+.runtime-drawer-section-title,
+.runtime-field-label {
+ display: block;
+ font-size: 11px;
+ font-weight: 700;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+ color: var(--text3);
+ margin-bottom: 8px;
+}
+
+.runtime-segmented {
+ display: flex;
+ gap: 8px;
+}
+
+.runtime-segmented-btn,
+.runtime-footer-btn {
+ border-radius: 12px;
+ border: 1px solid rgba(255, 255, 255, 0.08);
+ background: rgba(255, 255, 255, 0.03);
+ color: var(--text);
+ font-family: inherit;
+ font-size: 13px;
+ font-weight: 700;
+ cursor: pointer;
+ transition: border-color 0.12s ease, background 0.12s ease, transform 0.12s ease;
+}
+
+.runtime-segmented-btn {
+ flex: 1;
+ padding: 11px 12px;
+}
+
+.runtime-segmented-btn.active {
+ border-color: rgba(72, 166, 255, 0.55);
+ background: rgba(72, 166, 255, 0.16);
+}
+
+.runtime-field-input,
+.runtime-static-value {
+ width: 100%;
+ min-height: 44px;
+ border-radius: 12px;
+ border: 1px solid rgba(255, 255, 255, 0.08);
+ background: rgba(255, 255, 255, 0.03);
+ color: var(--text);
+ padding: 11px 13px;
+ font-size: 14px;
+ font-family: inherit;
+}
+
+.runtime-static-value {
+ display: flex;
+ align-items: center;
+}
+
+.runtime-field-select {
+ appearance: none;
+}
+
+.runtime-static-value-path {
+ word-break: break-all;
+}
+
+.runtime-grid-two {
+ display: grid;
+ gap: 12px;
+}
+
+.runtime-field-row {
+ display: flex;
+ justify-content: space-between;
+ gap: 14px;
+ align-items: flex-end;
+ margin-bottom: 14px;
+}
+
+.runtime-field-row-top {
+ align-items: flex-start;
+}
+
+.runtime-field-support {
+ color: var(--text2);
+ font-size: 13px;
+ line-height: 1.5;
+}
+
+.runtime-inline-actions {
+ display: flex;
+ gap: 8px;
+ flex-wrap: wrap;
+}
+
+.runtime-inline-btn,
+.runtime-preset,
+.runtime-chip {
+ border-radius: 12px;
+ border: 1px solid rgba(255, 255, 255, 0.08);
+ background: rgba(255, 255, 255, 0.04);
+ color: var(--text);
+ font-family: inherit;
+ cursor: pointer;
+}
+
+.runtime-inline-btn {
+ min-height: 40px;
+ padding: 0 12px;
+ font-size: 13px;
+ font-weight: 700;
+}
+
+.runtime-inline-btn:disabled {
+ opacity: 0.55;
+ cursor: not-allowed;
+}
+
+.runtime-chip-list {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+ margin-top: 12px;
+}
+
+.runtime-chip {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ padding: 8px 10px;
+ font-size: 12px;
+}
+
+.runtime-chip span {
+ color: var(--text3);
+}
+
+.runtime-preset-row {
+ display: flex;
+ gap: 8px;
+ flex-wrap: wrap;
+ margin-top: 12px;
+}
+
+.runtime-preset {
+ padding: 8px 12px;
+ font-size: 12px;
+ font-weight: 700;
+}
+
+.runtime-preset.active {
+ border-color: rgba(72, 166, 255, 0.55);
+ background: rgba(72, 166, 255, 0.16);
+}
+
+.runtime-checkbox-row {
+ display: flex;
+ gap: 10px;
+ align-items: flex-start;
+ color: var(--text2);
+ font-size: 14px;
+ line-height: 1.5;
+}
+
+.runtime-error-banner {
+ border-radius: 12px;
+ border: 1px solid rgba(240, 64, 64, 0.18);
+ background: rgba(240, 64, 64, 0.08);
+ color: #ffb7b7;
+ padding: 12px 14px;
+ line-height: 1.5;
+}
+
+.runtime-warning-banner {
+ border-radius: 12px;
+ border: 1px solid rgba(243, 211, 139, 0.18);
+ background: rgba(243, 211, 139, 0.08);
+ color: #f3d38b;
+ padding: 12px 14px;
+ line-height: 1.5;
+}
+
+.runtime-footer-btn {
+ flex: 1;
+ padding: 12px 14px;
+}
+
+.runtime-footer-btn:active:not(:disabled),
+.runtime-segmented-btn:active:not(:disabled) {
+ transform: scale(0.98);
+}
+
+.runtime-footer-btn:disabled {
+ opacity: 0.55;
+ cursor: not-allowed;
+}
+
+.runtime-footer-btn-secondary:hover:not(:disabled) {
+ border-color: var(--accent);
+}
+
+.runtime-footer-btn-primary {
+ color: #fff;
+ border-color: rgba(72, 166, 255, 0.55);
+ background: linear-gradient(135deg, #2c8ce8, #49c0ff);
+}
+
+@media (max-width: 720px) {
+ .runtime-drawer {
+ width: 100%;
+ }
+
+ .runtime-overview-card,
+ .runtime-grid-two,
+ .runtime-field-row {
+ grid-template-columns: 1fr;
+ flex-direction: column;
+ align-items: stretch;
+ }
+
+ .runtime-drawer-footer {
+ flex-direction: column;
+ }
+}
diff --git a/tauri-app/src/features/runtime/components/RuntimeSettingsDrawer.tsx b/tauri-app/src/features/runtime/components/RuntimeSettingsDrawer.tsx
new file mode 100644
index 0000000..4de891b
--- /dev/null
+++ b/tauri-app/src/features/runtime/components/RuntimeSettingsDrawer.tsx
@@ -0,0 +1,480 @@
+import { useEffect, useMemo, useState } from "react";
+import {
+ pickRuntimeModelFiles,
+ pickRuntimeModelsDir,
+ queryRuntimeGpu,
+ scanRuntimeModels,
+} from "../api";
+import type {
+ RuntimeConfig,
+ RuntimeGpuInfo,
+ RuntimeModelFile,
+ RuntimeSnapshot,
+} from "../types";
+import "./RuntimeSettingsDrawer.css";
+
+const CTX_PRESETS = [2048, 4096, 8192, 16384, 32768, 65536];
+
+function pathName(path: string | null | undefined): string {
+ if (!path) return "";
+ const parts = path.split(/[\\/]/).filter(Boolean);
+ return parts[parts.length - 1] || path;
+}
+
+function toModelFile(path: string): RuntimeModelFile {
+ return { name: pathName(path) || path, path };
+}
+
+function dedupeModels(models: RuntimeModelFile[]): RuntimeModelFile[] {
+ const seen = new Set();
+ return models.filter((model) => {
+ if (seen.has(model.path)) return false;
+ seen.add(model.path);
+ return true;
+ });
+}
+
+function chooseModel(current: string, scanned: RuntimeModelFile[], extra: RuntimeModelFile[]): string {
+ const nextChoices = [...scanned, ...extra].map((model) => model.path);
+ if (current && (nextChoices.length === 0 || nextChoices.includes(current))) {
+ return current;
+ }
+ return scanned[0]?.path || extra[0]?.path || "";
+}
+
+interface Props {
+ open: boolean;
+ snapshot: RuntimeSnapshot;
+ busy: boolean;
+ onClose: () => void;
+ onSave: (patch: Partial) => Promise;
+ onStart: () => Promise;
+ onStop: () => Promise;
+}
+
+export default function RuntimeSettingsDrawer({
+ open,
+ snapshot,
+ busy,
+ onClose,
+ onSave,
+ onStart,
+ onStop,
+}: Props) {
+ const [mode, setMode] = useState(snapshot.config.connection_mode);
+ const [startPolicy, setStartPolicy] = useState(snapshot.config.start_policy);
+ const [serverUrl, setServerUrl] = useState(snapshot.config.server_url);
+ const [apiKey, setApiKey] = useState(snapshot.config.api_key);
+ const [modelsDir, setModelsDir] = useState(snapshot.config.models_dir || "");
+ const [selectedModel, setSelectedModel] = useState(snapshot.config.model_path || "");
+ const [addr, setAddr] = useState(snapshot.config.addr);
+ const [gpuLayers, setGpuLayers] = useState(snapshot.config.gpu_layers);
+ const [ctxSize, setCtxSize] = useState(snapshot.config.ctx_size);
+ const [scannedModels, setScannedModels] = useState([]);
+ const [extraModels, setExtraModels] = useState([]);
+ const [gpuInfo, setGpuInfo] = useState(null);
+ const [gpuError, setGpuError] = useState("");
+ const [localError, setLocalError] = useState("");
+ const [scanning, setScanning] = useState(false);
+
+ useEffect(() => {
+ if (!open) return;
+
+ const extra = snapshot.config.extra_model_paths.map(toModelFile);
+
+ setMode(snapshot.config.connection_mode);
+ setStartPolicy(snapshot.config.start_policy);
+ setServerUrl(snapshot.config.server_url);
+ setApiKey(snapshot.config.api_key);
+ setModelsDir(snapshot.config.models_dir || "");
+ setSelectedModel(snapshot.config.model_path || "");
+ setAddr(snapshot.config.addr);
+ setGpuLayers(snapshot.config.gpu_layers);
+ setCtxSize(snapshot.config.ctx_size);
+ setExtraModels(extra);
+ setScannedModels([]);
+ setLocalError("");
+ setGpuError("");
+
+ if (snapshot.config.models_dir?.trim()) {
+ setScanning(true);
+ scanRuntimeModels(snapshot.config.models_dir)
+ .then((models) => {
+ setScannedModels(models);
+ setSelectedModel((current) => chooseModel(current || snapshot.config.model_path || "", models, extra));
+ })
+ .catch((error) => setLocalError(String(error)))
+ .finally(() => setScanning(false));
+ }
+
+ queryRuntimeGpu()
+ .then((info) => {
+ setGpuInfo(info);
+ if (info && snapshot.config.gpu_layers === 0) {
+ setGpuLayers(info.recommended_layers);
+ }
+ })
+ .catch((error) => setGpuError(String(error)));
+ }, [open, snapshot]);
+
+ const allModels = useMemo(() => {
+ const merged = dedupeModels([...scannedModels, ...extraModels]);
+ if (selectedModel && !merged.some((model) => model.path === selectedModel)) {
+ return [toModelFile(selectedModel), ...merged];
+ }
+ return merged;
+ }, [extraModels, scannedModels, selectedModel]);
+
+ const savedLocalModel = snapshot.config.model_path?.trim() || "";
+ const hasPendingModeChange = mode !== snapshot.config.connection_mode;
+ const maxLayers = gpuInfo?.recommended_layers ?? 200;
+ const startReason =
+ mode !== "local"
+ ? "Save mode before starting the local runtime."
+ : !snapshot.binary_path
+ ? "Build or bundle the local API binary before starting."
+ : !selectedModel.trim()
+ ? "Choose a model before starting the local runtime."
+ : "";
+
+ if (!open) return null;
+
+ const buildPatch = (): Partial => ({
+ connection_mode: mode,
+ start_policy: startPolicy,
+ server_url: serverUrl.trim(),
+ api_key: apiKey.trim(),
+ models_dir: mode === "local" ? (modelsDir.trim() || null) : snapshot.config.models_dir,
+ model_path: mode === "local" ? (selectedModel.trim() || null) : snapshot.config.model_path,
+ addr: mode === "local" ? addr.trim() || snapshot.config.addr : snapshot.config.addr,
+ gpu_layers: mode === "local" ? Math.max(0, Math.min(gpuLayers, maxLayers)) : snapshot.config.gpu_layers,
+ ctx_size: mode === "local" ? Math.max(512, ctxSize || 4096) : snapshot.config.ctx_size,
+ extra_model_paths: mode === "local" ? extraModels.map((model) => model.path) : snapshot.config.extra_model_paths,
+ });
+
+ const handleSave = async () => {
+ setLocalError("");
+ try {
+ await onSave(buildPatch());
+ } catch (error) {
+ setLocalError(String(error));
+ }
+ };
+
+ const handleSaveAndStart = async () => {
+ setLocalError("");
+
+ if (snapshot.process_running) {
+ try {
+ await onStop();
+ } catch (error) {
+ setLocalError(String(error));
+ }
+ return;
+ }
+
+ try {
+ const next = await onSave(buildPatch());
+ if (next.config.connection_mode !== "local") return;
+ if (!next.config.model_path?.trim()) return;
+ if (next.last_error?.code === "restart_required") return;
+ await onStart();
+ } catch (error) {
+ setLocalError(String(error));
+ }
+ };
+
+ const handleRescan = async (dir = modelsDir) => {
+ if (!dir.trim()) return;
+ setScanning(true);
+ setLocalError("");
+ try {
+ const models = await scanRuntimeModels(dir.trim());
+ setScannedModels(models);
+ setSelectedModel((current) => chooseModel(current, models, extraModels));
+ } catch (error) {
+ setLocalError(String(error));
+ setScannedModels([]);
+ } finally {
+ setScanning(false);
+ }
+ };
+
+ const handlePickDir = async () => {
+ setLocalError("");
+ try {
+ const result = await pickRuntimeModelsDir();
+ if (!result) return;
+ setModelsDir(result.dir);
+ setScannedModels(result.models);
+ setSelectedModel((current) => chooseModel(current, result.models, extraModels));
+ } catch (error) {
+ setLocalError(String(error));
+ }
+ };
+
+ const handlePickFiles = async () => {
+ setLocalError("");
+ try {
+ const picked = await pickRuntimeModelFiles();
+ if (picked.length === 0) return;
+ setExtraModels((current) => {
+ const next = dedupeModels([...current, ...picked]);
+ if (!selectedModel) {
+ setSelectedModel(next[0]?.path || "");
+ }
+ return next;
+ });
+ } catch (error) {
+ setLocalError(String(error));
+ }
+ };
+
+ const handleRemoveExtra = (path: string) => {
+ setExtraModels((current) => {
+ const next = current.filter((model) => model.path !== path);
+ setSelectedModel((selected) => (selected === path ? chooseModel("", scannedModels, next) : selected));
+ return next;
+ });
+ };
+
+ return (
+
+
+ );
+}
diff --git a/tauri-app/src/features/runtime/components/RuntimeSurface.test.tsx b/tauri-app/src/features/runtime/components/RuntimeSurface.test.tsx
new file mode 100644
index 0000000..1be78f7
--- /dev/null
+++ b/tauri-app/src/features/runtime/components/RuntimeSurface.test.tsx
@@ -0,0 +1,379 @@
+/* @vitest-environment jsdom */
+
+import { useState } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { act } from "react-dom/test-utils";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import {
+ bootstrapRuntime,
+ getRuntimeSnapshot,
+ pickRuntimeModelsDir,
+ saveRuntimeConfig,
+ startRuntime,
+ stopRuntime,
+} from "../api";
+import RuntimeSettingsDrawer from "./RuntimeSettingsDrawer";
+import RuntimeStatusCard from "./RuntimeStatusCard";
+import { useRuntimeManager } from "../useRuntimeManager";
+import { createDefaultRuntimeSnapshot } from "../runtime-utils";
+import type { RuntimeConfig, RuntimeSnapshot } from "../types";
+
+type SnapshotOverrides = Partial> & {
+ config?: Partial;
+};
+
+vi.mock("../api", () => ({
+ bootstrapRuntime: vi.fn(async () => createDefaultRuntimeSnapshot()),
+ getRuntimeSnapshot: vi.fn(async () => createDefaultRuntimeSnapshot()),
+ pickRuntimeModelFiles: vi.fn(async () => []),
+ pickRuntimeModelsDir: vi.fn(async () => null),
+ queryRuntimeGpu: vi.fn(async () => null),
+ saveRuntimeConfig: vi.fn(async (config) => ({ ...createDefaultRuntimeSnapshot(), config })),
+ scanRuntimeModels: vi.fn(async () => []),
+ startRuntime: vi.fn(async () => ({ ...createDefaultRuntimeSnapshot(), status: "ready", ready: true, process_running: true })),
+ stopRuntime: vi.fn(async () => createDefaultRuntimeSnapshot()),
+}));
+
+function makeSnapshot(overrides: SnapshotOverrides = {}): RuntimeSnapshot {
+ return {
+ ...createDefaultRuntimeSnapshot(),
+ ...overrides,
+ config: {
+ ...createDefaultRuntimeSnapshot().config,
+ ...overrides.config,
+ },
+ };
+}
+
+function createDeferred() {
+ let resolve!: (value: T) => void;
+ const promise = new Promise((nextResolve) => {
+ resolve = nextResolve;
+ });
+
+ return { promise, resolve };
+}
+
+function RuntimeManagerHarness({ startOpen = false }: { startOpen?: boolean }) {
+ const runtime = useRuntimeManager();
+ const [drawerOpen, setDrawerOpen] = useState(startOpen);
+
+ return (
+ <>
+ setDrawerOpen(true)}
+ onStart={() => {
+ void runtime.startLocal();
+ }}
+ onStop={() => {
+ void runtime.stopLocal();
+ }}
+ />
+ setDrawerOpen(false)}
+ onSave={runtime.saveConfig}
+ onStart={runtime.startLocal}
+ onStop={runtime.stopLocal}
+ />
+
+ );
+}
+
+describe("Runtime app surface", () => {
+ let container: HTMLDivElement;
+ let root: Root;
+
+ beforeEach(() => {
+ // @ts-expect-error React test environment flag
+ globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+ container = document.createElement("div");
+ document.body.appendChild(container);
+ root = createRoot(container);
+ });
+
+ afterEach(() => {
+ act(() => root.unmount());
+ container.remove();
+ vi.clearAllMocks();
+ // @ts-expect-error React test environment flag
+ globalThis.IS_REACT_ACT_ENVIRONMENT = false;
+ });
+
+ it("routes incomplete local runtime setup to the settings drawer instead of trying to start", async () => {
+ const onOpenSettings = vi.fn();
+ const onStart = vi.fn();
+
+ await act(async () => {
+ root.render(
+ makeSnapshot())}
+ onStart={vi.fn(async () => makeSnapshot({ status: "starting" }))}
+ onStop={vi.fn(async () => makeSnapshot({ status: "stopped" }))}
+ />,
+ );
+ });
+
+ const localTab = Array.from(container.querySelectorAll("button")).find((node) => node.textContent?.includes("Local API"));
+ expect(localTab).toBeTruthy();
+
+ await act(async () => {
+ localTab?.click();
+ });
+
+ const action = Array.from(container.querySelectorAll("button")).find((node) => node.textContent?.includes("Save mode before applying"));
+ expect(action).toBeTruthy();
+ expect((action as HTMLButtonElement | undefined)?.disabled).toBe(true);
+ });
+
+ it("covers the saved local startup lifecycle from stopped to starting to ready", async () => {
+ const initialSnapshot = makeSnapshot({
+ binary_path: "D:/bin/localllm.exe",
+ config: {
+ connection_mode: "local",
+ model_path: "D:/models/demo.gguf",
+ start_policy: "on_app_launch",
+ },
+ });
+ const startDeferred = createDeferred();
+
+ vi.mocked(bootstrapRuntime).mockResolvedValue(initialSnapshot);
+ vi.mocked(getRuntimeSnapshot).mockResolvedValue(initialSnapshot);
+ vi.mocked(startRuntime).mockReturnValue(startDeferred.promise);
+
+ await act(async () => {
+ root.render( = {}): RuntimeSnapshot {
+ return {
+ status: "stopped",
+ ready: false,
+ process_running: false,
+ resolved_url: "http://127.0.0.1:8080",
+ binary_path: null,
+ last_error: null,
+ config: {
+ connection_mode: "local",
+ start_policy: "manual",
+ server_url: "",
+ api_key: "",
+ model_path: null,
+ models_dir: null,
+ addr: "127.0.0.1:8080",
+ gpu_layers: 0,
+ ctx_size: 4096,
+ extra_model_paths: [],
+ },
+ ...overrides,
+ };
+}
+
+describe("getRuntimeConnection", () => {
+ it("prefers the resolved local runtime url in local mode", () => {
+ const connection = getRuntimeConnection(createSnapshot({
+ resolved_url: "http://127.0.0.1:9000",
+ config: {
+ connection_mode: "local",
+ start_policy: "manual",
+ server_url: "http://example.com:9999",
+ api_key: "",
+ model_path: null,
+ models_dir: null,
+ addr: "127.0.0.1:9000",
+ gpu_layers: 0,
+ ctx_size: 4096,
+ extra_model_paths: [],
+ },
+ }));
+
+ expect(connection.serverUrl).toBe("http://127.0.0.1:9000");
+ expect(connection.mode).toBe("local");
+ });
+
+ it("uses remote settings in remote mode", () => {
+ const connection = getRuntimeConnection(createSnapshot({
+ config: {
+ connection_mode: "remote",
+ start_policy: "manual",
+ server_url: "https://api.example.com",
+ api_key: "sk-demo",
+ model_path: null,
+ models_dir: null,
+ addr: "127.0.0.1:8080",
+ gpu_layers: 0,
+ ctx_size: 4096,
+ extra_model_paths: [],
+ },
+ }));
+
+ expect(connection.serverUrl).toBe("https://api.example.com");
+ expect(connection.apiKey).toBe("sk-demo");
+ expect(connection.mode).toBe("remote");
+ });
+});
+
+describe("getRuntimeStateLabel", () => {
+ it("reports ready snapshots as ready", () => {
+ expect(getRuntimeStateLabel(createSnapshot({ status: "ready", ready: true, process_running: true }))).toBe("Ready");
+ });
+
+ it("reports local background start progress", () => {
+ expect(getRuntimeStateLabel(createSnapshot({ status: "starting" }))).toBe("Starting local API");
+ });
+
+ it("reports remote mode without runtime ownership", () => {
+ expect(getRuntimeStateLabel(createSnapshot({
+ status: "stopped",
+ config: {
+ connection_mode: "remote",
+ start_policy: "manual",
+ server_url: "https://api.example.com",
+ api_key: "",
+ model_path: null,
+ models_dir: null,
+ addr: "127.0.0.1:8080",
+ gpu_layers: 0,
+ ctx_size: 4096,
+ extra_model_paths: [],
+ },
+ }))).toBe("Remote API");
+ });
+});
+
+describe("getRuntimeStartGuard", () => {
+ it("requires a saved model before starting the local runtime", () => {
+ const guard = getRuntimeStartGuard(createSnapshot({
+ binary_path: "D:/bin/localllm.exe",
+ config: {
+ connection_mode: "local",
+ start_policy: "manual",
+ server_url: "",
+ api_key: "",
+ model_path: null,
+ models_dir: null,
+ addr: "127.0.0.1:8080",
+ gpu_layers: 0,
+ ctx_size: 4096,
+ extra_model_paths: [],
+ },
+ }));
+
+ expect(guard.canStart).toBe(false);
+ expect(guard.reason.toLowerCase()).toContain("model");
+ });
+
+ it("allows starting when the saved local runtime config is complete", () => {
+ const guard = getRuntimeStartGuard(createSnapshot({
+ binary_path: "D:/bin/localllm.exe",
+ config: {
+ connection_mode: "local",
+ start_policy: "manual",
+ server_url: "",
+ api_key: "",
+ model_path: "D:/models/demo.gguf",
+ models_dir: "D:/models",
+ addr: "127.0.0.1:8080",
+ gpu_layers: 24,
+ ctx_size: 8192,
+ extra_model_paths: [],
+ },
+ }));
+
+ expect(guard.canStart).toBe(true);
+ expect(guard.reason).toBe("");
+ });
+
+ it("never offers managed start controls in remote mode", () => {
+ const guard = getRuntimeStartGuard(createSnapshot({
+ binary_path: "D:/bin/localllm.exe",
+ config: {
+ connection_mode: "remote",
+ start_policy: "manual",
+ server_url: "https://api.example.com",
+ api_key: "sk-demo",
+ model_path: null,
+ models_dir: null,
+ addr: "127.0.0.1:8080",
+ gpu_layers: 0,
+ ctx_size: 4096,
+ extra_model_paths: [],
+ },
+ }));
+
+ expect(guard.canStart).toBe(false);
+ expect(guard.reason.toLowerCase()).toContain("remote");
+ });
+});
diff --git a/tauri-app/src/features/runtime/runtime-utils.ts b/tauri-app/src/features/runtime/runtime-utils.ts
new file mode 100644
index 0000000..887c552
--- /dev/null
+++ b/tauri-app/src/features/runtime/runtime-utils.ts
@@ -0,0 +1,119 @@
+import type { RuntimeConnection, RuntimeSnapshot } from "./types";
+
+const DEFAULT_LOCAL_URL = "http://127.0.0.1:8080";
+
+function normalizeUrl(value: string | null | undefined): string {
+ const trimmed = (value || "").trim();
+ return trimmed ? trimmed.replace(/\/+$/, "") : "";
+}
+
+export function getRuntimeConnection(snapshot: RuntimeSnapshot): RuntimeConnection {
+ if (snapshot.config.connection_mode === "remote") {
+ return {
+ mode: "remote",
+ serverUrl: normalizeUrl(snapshot.config.server_url),
+ apiKey: snapshot.config.api_key || "",
+ managed: false,
+ };
+ }
+
+ return {
+ mode: "local",
+ serverUrl: normalizeUrl(snapshot.resolved_url) || DEFAULT_LOCAL_URL,
+ apiKey: snapshot.config.api_key || "",
+ managed: true,
+ };
+}
+
+export function getRuntimeStateLabel(snapshot: RuntimeSnapshot): string {
+ if (snapshot.config.connection_mode === "remote") {
+ return "Remote API";
+ }
+
+ switch (snapshot.status) {
+ case "ready":
+ return "Ready";
+ case "starting":
+ return "Starting local API";
+ case "stopping":
+ return "Stopping local API";
+ case "error":
+ return "Local API error";
+ case "degraded":
+ return "Attention needed";
+ default:
+ return "Local API offline";
+ }
+}
+
+export function getRuntimeStatusTone(snapshot: RuntimeSnapshot): "neutral" | "success" | "warning" | "danger" {
+ if (snapshot.config.connection_mode === "remote") {
+ return "neutral";
+ }
+
+ switch (snapshot.status) {
+ case "ready":
+ return "success";
+ case "starting":
+ case "stopping":
+ case "degraded":
+ return "warning";
+ case "error":
+ return "danger";
+ default:
+ return "neutral";
+ }
+}
+
+export interface RuntimeStartGuard {
+ canStart: boolean;
+ reason: string;
+}
+
+export function getRuntimeStartGuard(snapshot: RuntimeSnapshot): RuntimeStartGuard {
+ if (snapshot.config.connection_mode === "remote") {
+ return {
+ canStart: false,
+ reason: "Remote mode uses an external API and does not launch the local runtime.",
+ };
+ }
+
+ if (!snapshot.binary_path) {
+ return {
+ canStart: false,
+ reason: "Build or bundle the local API binary before starting the managed runtime.",
+ };
+ }
+
+ if (!snapshot.config.model_path?.trim()) {
+ return {
+ canStart: false,
+ reason: "Choose a local model before starting the managed runtime.",
+ };
+ }
+
+ return { canStart: true, reason: "" };
+}
+
+export function createDefaultRuntimeSnapshot(): RuntimeSnapshot {
+ return {
+ status: "stopped",
+ ready: false,
+ process_running: false,
+ resolved_url: DEFAULT_LOCAL_URL,
+ binary_path: null,
+ last_error: null,
+ config: {
+ connection_mode: "local",
+ start_policy: "manual",
+ server_url: "",
+ api_key: "",
+ model_path: null,
+ models_dir: null,
+ addr: "127.0.0.1:8080",
+ gpu_layers: 0,
+ ctx_size: 4096,
+ extra_model_paths: [],
+ },
+ };
+}
diff --git a/tauri-app/src/features/runtime/types.ts b/tauri-app/src/features/runtime/types.ts
new file mode 100644
index 0000000..3e3f39f
--- /dev/null
+++ b/tauri-app/src/features/runtime/types.ts
@@ -0,0 +1,54 @@
+export type ConnectionMode = "local" | "remote";
+export type StartPolicy = "manual" | "on_app_launch";
+export type RuntimeStatus = "stopped" | "starting" | "ready" | "degraded" | "stopping" | "error";
+
+export interface RuntimeConfig {
+ connection_mode: ConnectionMode;
+ start_policy: StartPolicy;
+ server_url: string;
+ api_key: string;
+ model_path: string | null;
+ models_dir: string | null;
+ addr: string;
+ gpu_layers: number;
+ ctx_size: number;
+ extra_model_paths: string[];
+}
+
+export interface RuntimeErrorInfo {
+ code: string;
+ message: string;
+}
+
+export interface RuntimeSnapshot {
+ status: RuntimeStatus;
+ ready: boolean;
+ process_running: boolean;
+ resolved_url: string;
+ binary_path: string | null;
+ last_error: RuntimeErrorInfo | null;
+ config: RuntimeConfig;
+}
+
+export interface RuntimeConnection {
+ mode: ConnectionMode;
+ serverUrl: string;
+ apiKey: string;
+ managed: boolean;
+}
+
+export interface RuntimeModelFile {
+ name: string;
+ path: string;
+}
+
+export interface RuntimePickDirResult {
+ dir: string;
+ models: RuntimeModelFile[];
+}
+
+export interface RuntimeGpuInfo {
+ name: string;
+ vram_mib: number;
+ recommended_layers: number;
+}
diff --git a/tauri-app/src/features/runtime/useRuntimeManager.ts b/tauri-app/src/features/runtime/useRuntimeManager.ts
new file mode 100644
index 0000000..08ccb22
--- /dev/null
+++ b/tauri-app/src/features/runtime/useRuntimeManager.ts
@@ -0,0 +1,101 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { bootstrapRuntime, getRuntimeSnapshot, saveRuntimeConfig, startRuntime, stopRuntime } from "./api";
+import { createDefaultRuntimeSnapshot, getRuntimeConnection } from "./runtime-utils";
+import type { RuntimeConfig, RuntimeSnapshot } from "./types";
+
+export function useRuntimeManager() {
+ const [snapshot, setSnapshot] = useState(createDefaultRuntimeSnapshot());
+ const [loading, setLoading] = useState(true);
+ const [busy, setBusy] = useState(false);
+
+ const refresh = useCallback(async () => {
+ const next = await getRuntimeSnapshot();
+ setSnapshot(next);
+ return next;
+ }, []);
+
+ useEffect(() => {
+ let active = true;
+
+ bootstrapRuntime()
+ .then((next) => {
+ if (active) {
+ setSnapshot(next);
+ setLoading(false);
+ }
+ })
+ .catch(() => {
+ if (active) {
+ setLoading(false);
+ }
+ });
+
+ const id = window.setInterval(() => {
+ refresh().catch(() => undefined);
+ }, 3000);
+
+ return () => {
+ active = false;
+ window.clearInterval(id);
+ };
+ }, [refresh]);
+
+ const saveConfig = useCallback(async (patch: Partial) => {
+ setBusy(true);
+ try {
+ const next = await saveRuntimeConfig({ ...snapshot.config, ...patch });
+ setSnapshot(next);
+ return next;
+ } finally {
+ setBusy(false);
+ }
+ }, [snapshot.config]);
+
+ const startLocal = useCallback(async () => {
+ setBusy(true);
+ setSnapshot((current) => ({
+ ...current,
+ status: "starting",
+ process_running: true,
+ ready: false,
+ last_error: null,
+ }));
+ try {
+ const next = await startRuntime();
+ setSnapshot(next);
+ return next;
+ } finally {
+ setBusy(false);
+ }
+ }, []);
+
+ const stopLocal = useCallback(async () => {
+ setBusy(true);
+ setSnapshot((current) => ({
+ ...current,
+ status: "stopping",
+ ready: false,
+ last_error: null,
+ }));
+ try {
+ const next = await stopRuntime();
+ setSnapshot(next);
+ return next;
+ } finally {
+ setBusy(false);
+ }
+ }, []);
+
+ const connection = useMemo(() => getRuntimeConnection(snapshot), [snapshot]);
+
+ return {
+ snapshot,
+ connection,
+ loading,
+ busy,
+ refresh,
+ saveConfig,
+ startLocal,
+ stopLocal,
+ };
+}
diff --git a/tauri-app/src/hooks/useModels.ts b/tauri-app/src/hooks/useModels.ts
index b5af774..28733b2 100644
--- a/tauri-app/src/hooks/useModels.ts
+++ b/tauri-app/src/hooks/useModels.ts
@@ -1,26 +1,40 @@
import { useState, useEffect, useCallback } from "react";
import type { ModelInfo, ServerStatus } from "../lib/types";
-export function useModels(server: string, apiKey: string) {
+export function useModels(server: string, apiKey: string, enabled = true) {
const [models, setModels] = useState([]);
const [selectedModel, setSelectedModel] = useState("");
const [status, setStatus] = useState("loading");
const refresh = useCallback(async () => {
+ if (!enabled || !server.trim()) {
+ setModels([]);
+ setStatus("error");
+ return;
+ }
+
setStatus("loading");
try {
const headers: Record = {};
if (apiKey) headers["Authorization"] = `Bearer ${apiKey}`;
const res = await fetch(`${server}/v1/models`, { headers });
+ if (!res.ok) {
+ throw new Error(`HTTP ${res.status}`);
+ }
const data = await res.json();
const list: ModelInfo[] = data.data || [];
setModels(list);
- if (list.length > 0 && !selectedModel) setSelectedModel(list[0].id);
+ if (list.length === 0) {
+ setSelectedModel("");
+ } else if (!selectedModel || !list.some((item) => item.id === selectedModel)) {
+ setSelectedModel(list[0].id);
+ }
setStatus("ok");
} catch {
+ setModels([]);
setStatus("error");
}
- }, [server, apiKey, selectedModel]);
+ }, [enabled, server, apiKey, selectedModel]);
useEffect(() => {
refresh();
diff --git a/tauri-app/src/index.css b/tauri-app/src/index.css
index 88a3b7b..d1e7973 100644
--- a/tauri-app/src/index.css
+++ b/tauri-app/src/index.css
@@ -2,23 +2,23 @@
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
- --bg: #0c0c0e;
- --bg2: #141416;
- --bg3: #1c1c1f;
- --bg4: #242428;
- --bg5: #2c2c31;
- --border: #2a2a30;
- --border2: #38383f;
- --text: #e8e8ed;
- --text2: #8e8e99;
- --text3: #5a5a66;
- --accent: #5b6af0;
- --accent2: #4a58e0;
- --accent-glow: rgba(91,106,240,0.15);
- --user-bg: #1a2040;
- --user-border: #2a3560;
- --asst-bg: #141416;
- --asst-border: #2a2a30;
+ --bg: #0a1016;
+ --bg2: #0f1721;
+ --bg3: #14202d;
+ --bg4: #182636;
+ --bg5: #203246;
+ --border: #243241;
+ --border2: #344759;
+ --text: #edf5ff;
+ --text2: #93a8bc;
+ --text3: #5d7288;
+ --accent: #48a6ff;
+ --accent2: #2f8ae3;
+ --accent-glow: rgba(72,166,255,0.16);
+ --user-bg: #10263f;
+ --user-border: #214468;
+ --asst-bg: #101924;
+ --asst-border: #243241;
--danger: #f04040;
--success: #30d158;
--warning: #ffd60a;
@@ -36,7 +36,7 @@ html, body, #root {
overflow: hidden;
background: var(--bg);
color: var(--text);
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+ font-family: "Segoe UI Variable", "SF Pro Display", "IBM Plex Sans", "Inter", system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
}
diff --git a/tauri-app/src/lib/chat.ts b/tauri-app/src/lib/chat.ts
new file mode 100644
index 0000000..f5b74a6
--- /dev/null
+++ b/tauri-app/src/lib/chat.ts
@@ -0,0 +1,59 @@
+export interface ParsedAssistantResponse {
+ rawContent: string;
+ content: string;
+ reasoning: string;
+ thinkingOpen: boolean;
+}
+
+const THINK_OPEN = "";
+const THINK_CLOSE = " ";
+
+export function buildChatTitle(text: string): string {
+ const normalized = text.replace(/\s+/g, " ").trim();
+ if (!normalized) return "New Chat";
+ return normalized.slice(0, 50) + (normalized.length > 50 ? "..." : "");
+}
+
+export function parseAssistantResponse(rawContent: string): ParsedAssistantResponse {
+ let cursor = 0;
+ let thinkingOpen = false;
+ let content = "";
+ let reasoning = "";
+
+ while (cursor < rawContent.length) {
+ if (!thinkingOpen) {
+ const start = rawContent.indexOf(THINK_OPEN, cursor);
+ if (start === -1) {
+ content += rawContent.slice(cursor);
+ break;
+ }
+
+ content += rawContent.slice(cursor, start);
+ cursor = start + THINK_OPEN.length;
+ thinkingOpen = true;
+ continue;
+ }
+
+ const end = rawContent.indexOf(THINK_CLOSE, cursor);
+ if (end === -1) {
+ reasoning += rawContent.slice(cursor);
+ cursor = rawContent.length;
+ break;
+ }
+
+ reasoning += rawContent.slice(cursor, end);
+ cursor = end + THINK_CLOSE.length;
+ thinkingOpen = false;
+ }
+
+ const normalizedContent = reasoning.trim().length > 0
+ ? content.replace(/^\s+/, "")
+ : content;
+
+ return {
+ rawContent,
+ content: normalizedContent.trimEnd(),
+ reasoning: reasoning.trim(),
+ thinkingOpen,
+ };
+}
diff --git a/tauri-app/src/lib/db.ts b/tauri-app/src/lib/db.ts
index ffa865c..f176458 100644
--- a/tauri-app/src/lib/db.ts
+++ b/tauri-app/src/lib/db.ts
@@ -59,6 +59,17 @@ export class DB {
}
}
+function hasColumn(db: DB, table: string, column: string): boolean {
+ const rows = db.query<{ name?: string }>(`PRAGMA table_info(${table})`);
+ return rows.some((row) => row.name === column);
+}
+
+function ensureColumn(db: DB, table: string, column: string, definition: string) {
+ if (!hasColumn(db, table, column)) {
+ db.run(`ALTER TABLE ${table} ADD COLUMN ${definition}`);
+ }
+}
+
export async function initDB(): Promise {
// Inject sql.js script if not already loaded
if (!window.initSqlJs) {
@@ -105,5 +116,11 @@ export async function initDB(): Promise {
`);
db.run(`CREATE INDEX IF NOT EXISTS idx_msg_chat ON messages(chat_id, created_at)`);
+ ensureColumn(db, "messages", "reasoning_content", "reasoning_content TEXT");
+ ensureColumn(db, "messages", "prompt_tokens", "prompt_tokens INTEGER NOT NULL DEFAULT 0");
+ ensureColumn(db, "messages", "completion_tokens", "completion_tokens INTEGER NOT NULL DEFAULT 0");
+ ensureColumn(db, "messages", "total_tokens", "total_tokens INTEGER NOT NULL DEFAULT 0");
+ ensureColumn(db, "messages", "tokens_per_second", "tokens_per_second REAL");
+
return db;
}
diff --git a/tauri-app/src/lib/types.ts b/tauri-app/src/lib/types.ts
index fc7c561..0c6b239 100644
--- a/tauri-app/src/lib/types.ts
+++ b/tauri-app/src/lib/types.ts
@@ -10,9 +10,20 @@ export interface Message {
chat_id: number;
role: "user" | "assistant" | "system";
content: string;
+ reasoning_content?: string | null;
+ prompt_tokens?: number | null;
+ completion_tokens?: number | null;
+ total_tokens?: number | null;
+ tokens_per_second?: number | null;
created_at: number;
}
+export interface ChatTokenTotals {
+ prompt_tokens: number;
+ completion_tokens: number;
+ total_tokens: number;
+}
+
export interface ModelInfo {
id: string;
object: string;
+
+
+
+ );
+}
diff --git a/tauri-app/src/features/runtime/components/RuntimeStatusCard.css b/tauri-app/src/features/runtime/components/RuntimeStatusCard.css
new file mode 100644
index 0000000..49865db
--- /dev/null
+++ b/tauri-app/src/features/runtime/components/RuntimeStatusCard.css
@@ -0,0 +1,159 @@
+.runtime-card {
+ margin: 10px 12px 8px;
+ padding: 15px;
+ border-radius: 18px;
+ border: 1px solid rgba(255, 255, 255, 0.08);
+ background:
+ radial-gradient(circle at top right, rgba(72, 166, 255, 0.18), transparent 40%),
+ linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01));
+ box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
+}
+
+.runtime-card-success {
+ border-color: rgba(48, 209, 88, 0.24);
+}
+
+.runtime-card-warning {
+ border-color: rgba(255, 214, 10, 0.24);
+}
+
+.runtime-card-danger {
+ border-color: rgba(240, 64, 64, 0.24);
+}
+
+.runtime-card-header {
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ gap: 10px;
+}
+
+.runtime-card-kicker {
+ font-size: 10px;
+ font-weight: 700;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+ color: var(--text3);
+ margin-bottom: 4px;
+}
+
+.runtime-card-title {
+ font-size: 16px;
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ color: var(--text);
+}
+
+.runtime-card-mode {
+ flex-shrink: 0;
+ font-size: 10px;
+ font-weight: 700;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+ padding: 5px 8px;
+ border-radius: 999px;
+ border: 1px solid var(--border2);
+ color: var(--text2);
+ background: rgba(255, 255, 255, 0.04);
+}
+
+.runtime-card-mode-local {
+ color: #71c5ff;
+ border-color: rgba(113, 197, 255, 0.28);
+}
+
+.runtime-card-mode-remote {
+ color: #92e5c7;
+ border-color: rgba(146, 229, 199, 0.24);
+}
+
+.runtime-card-copy {
+ margin-top: 10px;
+ color: var(--text2);
+ font-size: 12px;
+ line-height: 1.5;
+}
+
+.runtime-card-meta {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+ margin-top: 12px;
+}
+
+.runtime-card-meta span,
+.runtime-card-note {
+ border-radius: 999px;
+ border: 1px solid rgba(255, 255, 255, 0.08);
+ background: rgba(255, 255, 255, 0.04);
+ color: var(--text2);
+ font-size: 11px;
+ line-height: 1.3;
+ padding: 7px 10px;
+}
+
+.runtime-card-note {
+ display: block;
+ margin-top: 10px;
+ border-radius: 12px;
+ color: #f3d38b;
+ border-color: rgba(243, 211, 139, 0.16);
+ background: rgba(243, 211, 139, 0.08);
+}
+
+.runtime-card-error {
+ margin-top: 10px;
+ padding: 8px 10px;
+ border-radius: 10px;
+ border: 1px solid rgba(240, 64, 64, 0.2);
+ background: rgba(240, 64, 64, 0.08);
+ color: #ffb4b4;
+ font-size: 11px;
+ line-height: 1.5;
+}
+
+.runtime-card-actions {
+ display: flex;
+ gap: 8px;
+ margin-top: 14px;
+}
+
+.runtime-card-btn {
+ flex: 1;
+ border-radius: 10px;
+ border: 1px solid var(--border2);
+ padding: 9px 12px;
+ font-size: 12px;
+ font-weight: 700;
+ cursor: pointer;
+ font-family: inherit;
+ transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
+}
+
+.runtime-card-btn:active:not(:disabled) {
+ transform: scale(0.98);
+}
+
+.runtime-card-btn:disabled {
+ opacity: 0.55;
+ cursor: not-allowed;
+}
+
+.runtime-card-btn-secondary {
+ color: var(--text);
+ background: rgba(255, 255, 255, 0.04);
+}
+
+.runtime-card-btn-secondary:hover:not(:disabled) {
+ border-color: var(--accent);
+}
+
+.runtime-card-btn-primary {
+ color: #fff;
+ border-color: rgba(72, 166, 255, 0.6);
+ background: linear-gradient(135deg, #2b88e6, #46c2ff);
+}
+
+.runtime-card-btn-primary:hover:not(:disabled) {
+ background: linear-gradient(135deg, #3193f5, #55cbff);
+}
diff --git a/tauri-app/src/features/runtime/components/RuntimeStatusCard.tsx b/tauri-app/src/features/runtime/components/RuntimeStatusCard.tsx
new file mode 100644
index 0000000..58dbff8
--- /dev/null
+++ b/tauri-app/src/features/runtime/components/RuntimeStatusCard.tsx
@@ -0,0 +1,72 @@
+import { getRuntimeStartGuard, getRuntimeStateLabel, getRuntimeStatusTone } from "../runtime-utils";
+import type { RuntimeSnapshot } from "../types";
+import "./RuntimeStatusCard.css";
+
+function summarizePath(path: string | null): string {
+ if (!path) return "No model selected";
+ const segments = path.split(/[\\/]/).filter(Boolean);
+ return segments[segments.length - 1] || path;
+}
+
+interface Props {
+ snapshot: RuntimeSnapshot;
+ loading: boolean;
+ busy: boolean;
+ onOpenSettings: () => void;
+ onStart: () => void;
+ onStop: () => void;
+}
+
+export default function RuntimeStatusCard({ snapshot, loading, busy, onOpenSettings, onStart, onStop }: Props) {
+ const tone = getRuntimeStatusTone(snapshot);
+ const isLocal = snapshot.config.connection_mode === "local";
+ const startGuard = getRuntimeStartGuard(snapshot);
+ const needsSetup = isLocal && !snapshot.process_running && !startGuard.canStart;
+ const primaryAction = needsSetup ? onOpenSettings : isLocal && !snapshot.process_running ? onStart : onStop;
+ const primaryLabel = needsSetup ? "Set up" : isLocal && !snapshot.process_running ? "Start" : "Stop";
+ const primaryDisabled = busy || (isLocal && snapshot.process_running && snapshot.status === "stopping");
+
+ return (
+
+
+
+
+
+
+ {snapshot.config.connection_mode === "local" ? "Local" : "Remote"}
+
+ Runtime Manager
+ {loading ? "Loading runtime" : getRuntimeStateLabel(snapshot)}
+ + {snapshot.config.connection_mode === "local" + ? `Managed endpoint ${snapshot.resolved_url}` + : snapshot.config.server_url || "Configure a remote API endpoint"} +
+ +
+ {isLocal ? summarizePath(snapshot.config.model_path) : "External provider"}
+ {snapshot.config.start_policy === "on_app_launch" ? "Auto-start" : "Manual start"}
+
+
+ {needsSetup && {startGuard.reason}
}
+
+ {snapshot.last_error && (
+
+ {snapshot.last_error.message}
+
+ )}
+
+
+
+ {snapshot.config.connection_mode === "local" && (
+
+ )}
+
+