Add WebGPU indicator

Author: andriilazebnyi

src/styles.css

@@ -44,6 +44,17 @@ body {
 .muted { color: var(--muted); }
 .brand::after { content: ' • v0.1'; color: var(--muted); font-weight: 400; margin-left: 6px; }
 
+.badge {
+  display: inline-flex; align-items: center; gap: 8px;
+  padding: 4px 8px; border-radius: 999px; font-size: 12px;
+  background: var(--panel-2); border: 1px solid var(--border);
+}
+.badge.ok { color: var(--ok); }
+.badge.warn { color: var(--danger); }
+.dot { width: 8px; height: 8px; border-radius: 50%; }
+.dot.ok { background: var(--ok); }
+.dot.warn { background: var(--danger); }
+
 .container {
   display: grid;
   grid-template-columns: 280px 1fr;

src/ui/App.tsx

@@ -3,9 +3,11 @@ import { useChatStore } from '../ui/chat/useChatStore';
 import { ChatPanel } from '../ui/chat/ChatPanel';
 import { useEngine } from '../ui/model/useEngine';
 import { usePrebuiltModels } from '../ui/model/usePrebuiltModels';
+import { useWebGPU } from '../ui/model/useWebGPU';
 
 export default function App() {
   const modelList = usePrebuiltModels();
+  const webgpu = useWebGPU();
   const [selectedModel, setSelectedModel] = useState<string>(modelList[0]?.id || '');
   const engine = useEngine();
   const chat = useChatStore(selectedModel);
@@ -28,9 +30,13 @@ export default function App() {
   return (
     <div className="app">
       <header className="topbar">
-        <div className="row">
+        <div className="row" style={{ gap: 12 }}>
           <div className="brand">Web LLM Starter</div>
-          <div className="muted">React + WebGPU</div>
+          <div className={`badge ${webgpu.supported ? 'ok' : 'warn'}`} title={webgpu.supported ? `Adapter: ${webgpu.adapter}` : (webgpu.error || 'WebGPU unsupported')}>
+            <span className={`dot ${webgpu.supported ? 'ok' : 'warn'}`} />
+            WebGPU {webgpu.supported ? 'On' : 'Off'}
+          </div>
+          {webgpu.supported && <div className="muted" title={webgpu.features.join(', ') || undefined}>{webgpu.adapter}</div>}
         </div>
         <div className="row">
           <span className="muted">Tok/s</span>
@@ -54,6 +60,11 @@ export default function App() {
                 <option key={m.id} value={m.id}>{m.label}</option>
               ))}
             </select>
+            {!webgpu.supported && (
+              <div className="muted" style={{ fontSize: 12 }}>
+                WebGPU not detected. You can still try, but performance may be limited.
+              </div>
+            )}
 
             {engine.state !== 'ready' ? (
               <button

src/ui/model/useWebGPU.ts

@@ -0,0 +1,37 @@
+import { useEffect, useState } from 'react';
+
+export type WebGPUInfo = {
+  supported: boolean;
+  adapter: string;
+  features: string[];
+  error?: string;
+};
+
+export function useWebGPU(): WebGPUInfo {
+  const [info, setInfo] = useState<WebGPUInfo>({ supported: false, adapter: '', features: [] });
+
+  useEffect(() => {
+    const supported = typeof navigator !== 'undefined' && 'gpu' in navigator;
+    if (!supported) {
+      setInfo({ supported: false, adapter: '', features: [], error: 'WebGPU not detected' });
+      return;
+    }
+    (async () => {
+      try {
+        const adapter: GPUAdapter | null = await (navigator as any).gpu.requestAdapter();
+        if (!adapter) {
+          setInfo({ supported: false, adapter: '', features: [], error: 'No compatible adapter' });
+          return;
+        }
+        const features = Array.from((adapter.features as any)?.values?.() ?? []);
+        const name = (adapter as any).name || 'GPU';
+        setInfo({ supported: true, adapter: String(name), features: features.map(String) });
+      } catch (e) {
+        setInfo({ supported: false, adapter: '', features: [], error: (e as Error).message });
+      }
+    })();
+  }, []);
+
+  return info;
+}
+