feat(ui): message metadata, brighter text, native webview browser fix

Show model, tokens, and duration on each assistant response. Copy button
always visible. Brighten all text colors and remove antialiasing that
made text appear gray on macOS. Fix browser webview positioning to
account for address bar height. Default browser URL to google.com.

Author: Swofty-Developments

crates/tauri-app/frontend/src/components/browser/BrowserPanel.tsx

@@ -8,7 +8,7 @@ interface BrowserPanelProps {
 
 export function BrowserPanel(props: BrowserPanelProps) {
   const { store, setStore } = appStore;
-  const currentUrl = () => store.threadBrowserUrls[props.threadId] || "https://example.com";
+  const currentUrl = () => store.threadBrowserUrls[props.threadId] || "https://google.com";
   const [urlInput, setUrlInput] = createSignal(currentUrl());
   const [started, setStarted] = createSignal(false);
   let viewportRef: HTMLDivElement | undefined;
@@ -51,9 +51,9 @@ export function BrowserPanel(props: BrowserPanelProps) {
     });
   });
 
-  // Open the native webview on first mount
+  // Open the native webview on first mount — delay to let layout settle
   onMount(() => {
-    requestAnimationFrame(() => {
+    setTimeout(() => {
       if (!viewportRef) return;
       const rect = viewportRef.getBoundingClientRect();
       const url = currentUrl();
@@ -69,7 +69,7 @@ export function BrowserPanel(props: BrowserPanelProps) {
       }).catch((e) => {
         console.error("Failed to open browser:", e);
       });
-    });
+    }, 100);
   });
 
   // When started, keep bounds in sync

crates/tauri-app/frontend/src/components/chat/ChatArea.tsx

@@ -193,16 +193,27 @@ export function ChatArea() {
   );
 }
 
-function MessageBubble(props: { msg: { id: string; role: string; content: string }; isGenerating: boolean; isLast: boolean }) {
+function MessageBubble(props: { msg: any; isGenerating: boolean; isLast: boolean }) {
   const [copied, setCopied] = createSignal(false);
   const isAssistant = () => props.msg.role === "assistant";
+  const meta = () => props.msg.meta;
 
   async function copyContent() {
     await navigator.clipboard.writeText(props.msg.content);
     setCopied(true);
     setTimeout(() => setCopied(false), 1500);
   }
 
+  function formatDuration(ms: number) {
+    if (ms < 1000) return `${ms}ms`;
+    return `${(ms / 1000).toFixed(1)}s`;
+  }
+
+  function formatTokens(n: number) {
+    if (n >= 1000) return `${(n / 1000).toFixed(1)}k`;
+    return String(n);
+  }
+
   return (
     <div class={`message message-${props.msg.role}`}>
       <div class="message-content">
@@ -211,11 +222,26 @@ function MessageBubble(props: { msg: { id: string; role: string; content: string
             <Markdown content={props.msg.content} />
           </Show>
         </div>
-        <Show when={isAssistant() && props.msg.content}>
-          <button class="copy-btn" onClick={copyContent}>
-            {copied() ? "Copied" : "Copy"}
-          </button>
-        </Show>
+        <div class="message-footer">
+          <Show when={isAssistant() && meta()}>
+            <div class="message-meta">
+              <Show when={meta()!.model}>
+                <span class="meta-tag">{meta()!.model}</span>
+              </Show>
+              <Show when={meta()!.inputTokens != null || meta()!.outputTokens != null}>
+                <span class="meta-tag">{formatTokens(meta()!.inputTokens || 0)} in / {formatTokens(meta()!.outputTokens || 0)} out</span>
+              </Show>
+              <Show when={meta()!.durationMs}>
+                <span class="meta-tag">{formatDuration(meta()!.durationMs!)}</span>
+              </Show>
+            </div>
+          </Show>
+          <Show when={isAssistant() && props.msg.content}>
+            <button class="copy-btn" onClick={copyContent}>
+              {copied() ? "Copied" : "Copy"}
+            </button>
+          </Show>
+        </div>
       </div>
     </div>
   );
@@ -380,16 +406,37 @@ if (!document.getElementById("chat-styles")) {
       padding: 4px 12px;
     }
 
+    .message-footer {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      min-height: 18px;
+    }
+    .message-meta {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      flex-wrap: wrap;
+    }
+    .meta-tag {
+      font-size: 10px;
+      font-weight: 500;
+      color: var(--text-tertiary);
+      background: var(--bg-muted);
+      padding: 1px 6px;
+      border-radius: 3px;
+      font-family: var(--font-mono);
+      white-space: nowrap;
+    }
     .copy-btn {
       font-size: 11px;
       font-weight: 500;
       color: var(--text-tertiary);
       padding: 2px 8px;
       border-radius: var(--radius-sm);
       transition: all 0.12s;
-      opacity: 0;
+      margin-left: auto;
     }
-    .message:hover .copy-btn { opacity: 1; }
     .copy-btn:hover { background: var(--bg-accent); color: var(--text-secondary); }
 
     .typing-indicator {

crates/tauri-app/frontend/src/components/sidebar/ProjectGroup.tsx

@@ -39,7 +39,7 @@ export function ProjectGroup(props: { project: Project }) {
     setStore("contextMenu", { type: "project", id: props.project.id, x: e.clientX, y: e.clientY });
   }
 
-  const color = () => props.project.color || "var(--text-tertiary)";
+  const color = () => props.project.color || "var(--text)";
 
   return (
     <div
@@ -85,10 +85,10 @@ if (!document.getElementById("project-group-styles")) {
       transition: background 0.15s; text-align: left;
     }
     .project-toggle:hover { background: var(--bg-muted); }
-    .collapse-icon { font-size: 8px; color: var(--text-tertiary); }
+    .collapse-icon { font-size: 8px; color: var(--text-secondary); }
     .project-name { font-size: 10px; letter-spacing: 0.05em; }
     .project-add {
-      font-size: 13px; color: var(--text-tertiary); padding: 4px 8px;
+      font-size: 13px; color: var(--text-secondary); padding: 4px 8px;
       border-radius: var(--radius-sm); transition: background 0.15s;
     }
     .project-add:hover { background: var(--bg-accent); }

crates/tauri-app/frontend/src/stores/app-store.ts

@@ -217,9 +217,10 @@ function createAppStore() {
     }
   }
 
+  const turnStartTimes: Record<string, number> = {};
+
   function handleAgentEvent(payload: AgentEventPayload) {
     const { thread_id, event_type } = payload;
-    console.log(`[agent-event] ${event_type}`, event_type === "content_delta" ? payload.text?.slice(0, 40) : "");
 
     switch (event_type) {
       case "content_delta": {
@@ -234,6 +235,7 @@ function createAppStore() {
         break;
       }
       case "turn_started":
+        turnStartTimes[thread_id] = Date.now();
         setStore("sessionStatuses", thread_id, "generating");
         break;
       case "turn_completed":
@@ -256,6 +258,27 @@ function createAppStore() {
           { id: crypto.randomUUID(), thread_id, role: "system" as const, content: `Aborted: ${payload.reason}` },
         ]);
         break;
+      case "usage_report": {
+        const durationMs = turnStartTimes[thread_id] ? Date.now() - turnStartTimes[thread_id] : undefined;
+        setStore("threadMessages", thread_id, (msgs) => {
+          if (!msgs) return msgs;
+          const last = msgs[msgs.length - 1];
+          if (last && last.role === "assistant") {
+            return [...msgs.slice(0, -1), {
+              ...last,
+              meta: {
+                model: payload.model,
+                inputTokens: payload.input_tokens,
+                outputTokens: payload.output_tokens,
+                costUsd: payload.cost_usd,
+                durationMs,
+              },
+            }];
+          }
+          return msgs;
+        });
+        break;
+      }
       case "session_ready":
         setStore("sessionStatuses", thread_id, "ready");
         break;

crates/tauri-app/frontend/src/styles/global.css

@@ -11,9 +11,9 @@
   --bg-hover: rgba(255, 255, 255, 0.04);
 
   /* Text with warm undertones */
-  --text: #e8e6f0;
-  --text-secondary: #a8a6b8;
-  --text-tertiary: #5c5a6a;
+  --text: #f0eef8;
+  --text-secondary: #b8b6c8;
+  --text-tertiary: #807e92;
 
   /* Accent palette — molten metals */
   --primary: #6b7cff;
@@ -64,8 +64,6 @@ body {
   user-select: none;
   -webkit-user-select: none;
   font-feature-settings: "ss01", "ss02", "cv01";
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
 }
 
 #app {

crates/tauri-app/frontend/src/types.ts

@@ -14,11 +14,20 @@ export interface Thread {
   color: string | null;
 }
 
+export interface MessageMeta {
+  model?: string;
+  inputTokens?: number;
+  outputTokens?: number;
+  durationMs?: number;
+  costUsd?: number;
+}
+
 export interface ChatMessage {
   id: string;
   thread_id: string;
   role: "user" | "assistant" | "system";
   content: string;
+  meta?: MessageMeta;
 }
 
 export interface AgentEventPayload {
@@ -31,6 +40,10 @@ export interface AgentEventPayload {
   message?: string;
   request_id?: string;
   description?: string;
+  input_tokens?: number;
+  output_tokens?: number;
+  cost_usd?: number;
+  model?: string;
 }
 
 export type SessionStatus = "idle" | "starting" | "ready" | "generating" | "error";

crates/tauri-app/src/streaming.rs

@@ -25,6 +25,14 @@ pub struct AgentEventPayload {
     pub request_id: Option<String>,
     #[serde(skip_serializing_if = "Option::is_none")]
     pub description: Option<String>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub input_tokens: Option<u64>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub output_tokens: Option<u64>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub cost_usd: Option<f64>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub model: Option<String>,
 }
 
 pub fn spawn_event_forwarder(
@@ -143,7 +151,10 @@ pub fn spawn_event_forwarder(
                         session_id: session_id.to_string(),
                         thread_id: thread_id.to_string(),
                         event_type: "usage_report".into(),
-                        text: Some(format!("{cost_usd:.6}")),
+                        input_tokens: Some(*input_tokens),
+                        output_tokens: Some(*output_tokens),
+                        cost_usd: Some(*cost_usd),
+                        model: Some(model.clone()),
                         ..default_payload()
                     }
                 }
@@ -179,5 +190,9 @@ fn default_payload() -> AgentEventPayload {
         message: None,
         request_id: None,
         description: None,
+        input_tokens: None,
+        output_tokens: None,
+        cost_usd: None,
+        model: None,
     }
 }