groove-dev 0.27.74 → 0.27.77

package/packages/gui/src/components/chat/chat-messages.jsx

@@ -1,8 +1,9 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
-import { useRef, useEffect, useState } from 'react';
-import { Copy, Check, ArrowRight } from 'lucide-react';
+import { useRef, useEffect, useState, useCallback } from 'react';
+import { Copy, Check, ArrowRight, Download, Maximize2, X, Image as ImageIcon, RefreshCw } from 'lucide-react';
 import { cn } from '../../lib/cn';
 import { timeAgo } from '../../lib/format';
+import { Avatar } from '../ui/avatar';
 import { ThinkingIndicator } from '../ui/thinking-indicator';
 
 const API_STATUS_MESSAGES = [
@@ -12,7 +13,7 @@ const API_STATUS_MESSAGES = [
   'Almost there...',
 ];
 
-function CopyButton({ text }) {
+function CopyButton({ text, className }) {
   const [copied, setCopied] = useState(false);
   function handleCopy() {
     navigator.clipboard.writeText(text).then(() => {
@@ -23,7 +24,7 @@ function CopyButton({ text }) {
   return (
     <button
       onClick={handleCopy}
-      className="flex items-center gap-1 px-2 py-1 text-2xs font-sans text-text-3 hover:text-text-1 transition-colors cursor-pointer"
+      className={cn('flex items-center gap-1 px-2 py-1 text-2xs font-sans text-text-3 hover:text-text-1 transition-colors cursor-pointer', className)}
     >
       {copied ? <Check size={12} className="text-success" /> : <Copy size={12} />}
       {copied ? 'Copied' : 'Copy'}
@@ -54,7 +55,6 @@ function parseMarkdown(text) {
   while (i < lines.length) {
     const line = lines[i];
 
-    // Fenced code block
     if (line.startsWith('```')) {
       const lang = line.slice(3).trim();
       const codeLines = [];
@@ -63,12 +63,11 @@ function parseMarkdown(text) {
         codeLines.push(lines[i]);
         i++;
       }
-      i++; // skip closing ```
+      i++;
       blocks.push({ type: 'code', language: lang, code: codeLines.join('\n') });
       continue;
     }
 
-    // Heading
     const headingMatch = line.match(/^(#{1,6})\s+(.+)/);
     if (headingMatch) {
       blocks.push({ type: 'heading', level: headingMatch[1].length, text: headingMatch[2] });
@@ -76,14 +75,12 @@ function parseMarkdown(text) {
       continue;
     }
 
-    // Horizontal rule
     if (/^(-{3,}|_{3,}|\*{3,})$/.test(line.trim())) {
       blocks.push({ type: 'hr' });
       i++;
       continue;
     }
 
-    // Blockquote
     if (line.startsWith('> ')) {
       const quoteLines = [line.slice(2)];
       i++;
@@ -95,7 +92,6 @@ function parseMarkdown(text) {
       continue;
     }
 
-    // Unordered list
     if (/^[-*+]\s/.test(line)) {
       const items = [line.replace(/^[-*+]\s/, '')];
       i++;
@@ -107,7 +103,6 @@ function parseMarkdown(text) {
       continue;
     }
 
-    // Ordered list
     if (/^\d+\.\s/.test(line)) {
       const items = [line.replace(/^\d+\.\s/, '')];
       i++;
@@ -119,10 +114,9 @@ function parseMarkdown(text) {
       continue;
     }
 
-    // Table
     if (line.includes('|') && i + 1 < lines.length && /^\|?\s*[-:]+/.test(lines[i + 1])) {
       const headerCells = line.split('|').map((c) => c.trim()).filter(Boolean);
-      i += 2; // skip header + separator
+      i += 2;
       const rows = [];
       while (i < lines.length && lines[i].includes('|')) {
         rows.push(lines[i].split('|').map((c) => c.trim()).filter(Boolean));
@@ -132,13 +126,11 @@ function parseMarkdown(text) {
       continue;
     }
 
-    // Empty line
     if (line.trim() === '') {
       i++;
       continue;
     }
 
-    // Paragraph — collect consecutive non-empty lines
     const paraLines = [line];
     i++;
     while (i < lines.length && lines[i].trim() !== '' && !lines[i].startsWith('```') && !lines[i].startsWith('#') && !/^[-*+]\s/.test(lines[i]) && !/^\d+\.\s/.test(lines[i]) && !lines[i].startsWith('> ') && !/^(-{3,}|_{3,}|\*{3,})$/.test(lines[i].trim())) {
@@ -248,8 +240,8 @@ function RenderedMarkdown({ text }) {
 function UserMessage({ msg }) {
   return (
     <div className="flex justify-end">
-      <div className="max-w-[75%]">
-        <div className="px-4 py-3 rounded-xl bg-surface-3/80 border border-border-subtle">
+      <div className="max-w-[85%]">
+        <div className="px-3.5 py-2.5 rounded-2xl rounded-br-md bg-accent/10 border border-accent/15">
           <p className="text-sm text-text-0 font-sans whitespace-pre-wrap break-words leading-relaxed">{msg.text}</p>
         </div>
         <div className="text-2xs text-text-4 font-sans mt-1 text-right">{timeAgo(msg.timestamp)}</div>
@@ -259,17 +251,143 @@ function UserMessage({ msg }) {
 }
 
 function AssistantMessage({ msg, model }) {
+  return (
+    <div className="flex gap-2.5">
+      <Avatar name={model || 'assistant'} role="assistant" size="sm" className="mt-1 flex-shrink-0" />
+      <div className="max-w-[85%]">
+        {model && <div className="text-2xs text-text-3 font-sans mb-1 font-medium">{model}</div>}
+        <div className="text-sm text-text-1 font-sans whitespace-pre-wrap break-words leading-relaxed">
+          <RenderedMarkdown text={msg.text} />
+        </div>
+        <div className="text-2xs text-text-4 font-sans mt-1">{timeAgo(msg.timestamp)}</div>
+      </div>
+    </div>
+  );
+}
+
+function ImageLoadingMessage({ msg }) {
   return (
     <div className="max-w-[85%]">
-      {model && <div className="text-2xs text-text-3 font-sans mb-1 font-medium">{model}</div>}
-      <div className="border-l-2 border-accent/30 pl-3.5">
-        <RenderedMarkdown text={msg.text} />
+      <div className="rounded-2xl rounded-tl-md bg-surface-1/80 border border-border-subtle overflow-hidden">
+        <div className="w-80 h-80 image-loading-shimmer flex items-center justify-center">
+          <div className="flex flex-col items-center gap-3">
+            <div className="w-10 h-10 rounded-full bg-surface-3/80 flex items-center justify-center">
+              <ImageIcon size={18} className="text-accent animate-pulse" />
+            </div>
+            <span className="text-xs text-text-3 font-sans">Generating image...</span>
+          </div>
+        </div>
+        {msg.prompt && (
+          <div className="px-4 py-2.5 border-t border-border-subtle">
+            <p className="text-2xs text-text-3 font-sans italic truncate">&quot;{msg.prompt}&quot;</p>
+          </div>
+        )}
       </div>
-      <div className="text-2xs text-text-4 font-sans mt-1">{timeAgo(msg.timestamp)}</div>
     </div>
   );
 }
 
+function ImageMessage({ msg, onReply }) {
+  const [expanded, setExpanded] = useState(false);
+  const [hovering, setHovering] = useState(false);
+
+  const handleDownload = useCallback(() => {
+    if (!msg.imageUrl) return;
+    const a = document.createElement('a');
+    a.href = msg.imageUrl;
+    a.download = `groove-${msg.model || 'image'}-${Date.now()}.png`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+  }, [msg.imageUrl, msg.model]);
+
+  return (
+    <>
+      <div className="max-w-[85%]">
+        {msg.model && <div className="text-2xs text-text-3 font-mono mb-1.5 font-medium flex items-center gap-1.5"><ImageIcon size={10} /> {msg.model}</div>}
+        <div className="rounded-2xl rounded-tl-md bg-surface-1/80 border border-border-subtle overflow-hidden">
+          <div
+            className="relative group"
+            onMouseEnter={() => setHovering(true)}
+            onMouseLeave={() => setHovering(false)}
+          >
+            <img
+              src={msg.imageUrl}
+              alt={msg.prompt || 'Generated image'}
+              className="max-w-full max-h-[480px] object-contain cursor-pointer"
+              onClick={() => setExpanded(true)}
+            />
+            {hovering && (
+              <div className="absolute top-2 right-2 flex gap-1.5">
+                <button
+                  onClick={handleDownload}
+                  className="w-8 h-8 rounded-lg bg-surface-0/90 backdrop-blur-sm border border-border-subtle flex items-center justify-center text-text-2 hover:text-accent hover:border-accent/30 transition-colors cursor-pointer"
+                  title="Download"
+                >
+                  <Download size={14} />
+                </button>
+                <button
+                  onClick={() => setExpanded(true)}
+                  className="w-8 h-8 rounded-lg bg-surface-0/90 backdrop-blur-sm border border-border-subtle flex items-center justify-center text-text-2 hover:text-accent hover:border-accent/30 transition-colors cursor-pointer"
+                  title="Fullscreen"
+                >
+                  <Maximize2 size={14} />
+                </button>
+                <CopyButton text={msg.prompt || ''} className="h-8 rounded-lg bg-surface-0/90 backdrop-blur-sm border border-border-subtle text-text-2 hover:text-accent" />
+              </div>
+            )}
+          </div>
+          <div className="px-4 py-2.5 border-t border-border-subtle flex items-center gap-2">
+            <p className="flex-1 text-2xs text-text-3 font-sans italic truncate">&quot;{msg.prompt}&quot;</p>
+            {onReply && (
+              <button
+                onClick={() => onReply(msg)}
+                className="text-2xs text-accent hover:text-accent/80 font-sans font-medium cursor-pointer flex items-center gap-1 flex-shrink-0"
+              >
+                <RefreshCw size={10} /> Iterate
+              </button>
+            )}
+          </div>
+        </div>
+        <div className="text-2xs text-text-4 font-sans mt-1">{timeAgo(msg.timestamp)}</div>
+      </div>
+
+      {expanded && (
+        <div
+          className="fixed inset-0 z-[200] bg-surface-0/95 backdrop-blur-md flex items-center justify-center"
+          onClick={() => setExpanded(false)}
+        >
+          <button
+            onClick={() => setExpanded(false)}
+            className="absolute top-4 right-4 w-10 h-10 rounded-full bg-surface-3 border border-border flex items-center justify-center text-text-2 hover:text-text-0 transition-colors cursor-pointer z-10"
+          >
+            <X size={18} />
+          </button>
+          <div className="absolute bottom-4 right-4 flex gap-2 z-10">
+            <button
+              onClick={(e) => { e.stopPropagation(); handleDownload(); }}
+              className="h-9 px-4 rounded-lg bg-surface-3 border border-border flex items-center gap-2 text-xs font-sans text-text-1 hover:text-accent hover:border-accent/30 transition-colors cursor-pointer"
+            >
+              <Download size={14} /> Download
+            </button>
+          </div>
+          <img
+            src={msg.imageUrl}
+            alt={msg.prompt || 'Generated image'}
+            className="max-w-[90vw] max-h-[90vh] object-contain rounded-lg shadow-2xl"
+            onClick={(e) => e.stopPropagation()}
+          />
+          {msg.prompt && (
+            <div className="absolute bottom-4 left-4 max-w-md px-4 py-2 rounded-lg bg-surface-3/90 backdrop-blur-sm border border-border-subtle z-10">
+              <p className="text-xs text-text-2 font-sans italic">&quot;{msg.prompt}&quot;</p>
+            </div>
+          )}
+        </div>
+      )}
+    </>
+  );
+}
+
 function SystemMessage({ msg }) {
   return (
     <div className="flex justify-center py-1">
@@ -311,12 +429,12 @@ function ApiTypingIndicator() {
   }, []);
 
   return (
-    <div className="border-l-2 border-accent/30 pl-3.5 py-1 flex items-center gap-2.5">
+    <div className="flex items-center gap-2.5 ml-8 py-1">
       <div className="relative w-3.5 h-3.5 flex-shrink-0">
         <span className="absolute inset-0 rounded-full border border-transparent border-t-accent animate-spin" style={{ animationDuration: '0.9s' }} />
       </div>
       <span
-        className="text-[12px] font-sans text-text-3 transition-opacity duration-[250ms]"
+        className="text-2xs font-sans text-text-3 transition-opacity duration-[250ms]"
         style={{ opacity: fade ? 1 : 0 }}
       >
         {API_STATUS_MESSAGES[idx]}
@@ -325,7 +443,7 @@ function ApiTypingIndicator() {
   );
 }
 
-export function ChatMessages({ messages, isStreaming, model, mode }) {
+export function ChatMessages({ messages, isStreaming, model, mode, onImageReply }) {
   const scrollRef = useRef(null);
   const isAtBottomRef = useRef(true);
 
@@ -356,6 +474,8 @@ export function ChatMessages({ messages, isStreaming, model, mode }) {
   return (
     <div ref={scrollRef} className="flex-1 overflow-y-auto px-6 py-5 space-y-5">
       {messages.map((msg, i) => {
+        if (msg.type === 'image-loading') return <ImageLoadingMessage key={i} msg={msg} />;
+        if (msg.type === 'image') return <ImageMessage key={i} msg={msg} onReply={onImageReply} />;
         if (msg.from === 'user') return <UserMessage key={i} msg={msg} />;
         if (msg.from === 'system') return <SystemMessage key={i} msg={msg} />;
         return <AssistantMessage key={i} msg={msg} model={model} />;

package/packages/gui/src/components/chat/chat-view.jsx

@@ -7,6 +7,7 @@ import { ConversationList } from './conversation-list';
 import { ChatHeader } from './chat-header';
 import { ChatMessages } from './chat-messages';
 import { ChatInput } from './chat-input';
+import { isImageModel } from './model-picker';
 
 function EmptyState({ onNewChat }) {
   return (
@@ -35,16 +36,19 @@ export function ChatView() {
   const createConversation = useGrooveStore((s) => s.createConversation);
   const setActiveConversation = useGrooveStore((s) => s.setActiveConversation);
   const sendChatMessage = useGrooveStore((s) => s.sendChatMessage);
+  const sendImageMessage = useGrooveStore((s) => s.sendImageMessage);
   const stopAgent = useGrooveStore((s) => s.stopAgent);
   const stopChatStreaming = useGrooveStore((s) => s.stopChatStreaming);
   const setConversationMode = useGrooveStore((s) => s.setConversationMode);
   const setConversationModel = useGrooveStore((s) => s.setConversationModel);
 
   const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+  const [replyContext, setReplyContext] = useState(null);
 
   const activeConversation = conversations.find((c) => c.id === activeConversationId) || null;
   const messages = activeConversationId ? (conversationMessages[activeConversationId] || []) : [];
   const isStreaming = streamingConversationId === activeConversationId && sendingMessage;
+  const currentModelIsImage = activeConversation ? isImageModel(activeConversation.model) : false;
 
   const handleNewChat = useCallback(async (provider, model) => {
     const p = provider || 'claude-code';
@@ -61,8 +65,17 @@ export function ChatView() {
 
   const handleSend = useCallback((text) => {
     if (!activeConversationId) return;
-    sendChatMessage(activeConversationId, text);
-  }, [activeConversationId, sendChatMessage]);
+
+    if (currentModelIsImage) {
+      const prompt = replyContext
+        ? `${text} (iterating on: "${replyContext.prompt}")`
+        : text;
+      sendImageMessage(activeConversationId, prompt, { model: activeConversation.model });
+      setReplyContext(null);
+    } else {
+      sendChatMessage(activeConversationId, text);
+    }
+  }, [activeConversationId, activeConversation, currentModelIsImage, replyContext, sendChatMessage, sendImageMessage]);
 
   const handleStop = useCallback(() => {
     if (!activeConversation) return;
@@ -81,6 +94,10 @@ export function ChatView() {
     }
   }, [activeConversationId, setConversationModel, handleNewChat]);
 
+  const handleImageReply = useCallback((msg) => {
+    setReplyContext(msg);
+  }, []);
+
   const currentModel = activeConversation
     ? { provider: activeConversation.provider, model: activeConversation.model }
     : null;
@@ -105,6 +122,7 @@ export function ChatView() {
               isStreaming={isStreaming}
               model={activeConversation.model}
               mode={activeConversation.mode || 'api'}
+              onImageReply={handleImageReply}
             />
             <ChatInput
               onSend={handleSend}
@@ -112,6 +130,10 @@ export function ChatView() {
               sending={sendingMessage}
               streaming={isStreaming}
               disabled={false}
+              isImageModel={currentModelIsImage}
+              currentModel={activeConversation.model}
+              replyContext={replyContext}
+              onClearReply={() => setReplyContext(null)}
             />
           </>
         ) : (
@@ -130,6 +152,8 @@ export function ChatView() {
               sending={false}
               streaming={false}
               disabled={false}
+              isImageModel={false}
+              currentModel={null}
             />
           </>
         )}

package/packages/gui/src/components/chat/model-picker.jsx

@@ -1,6 +1,6 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
 import { useState, useEffect, useRef } from 'react';
-import { ChevronDown, Globe, Cpu, Zap, Sparkles } from 'lucide-react';
+import { ChevronDown, Globe, Cpu, Zap, Sparkles, Image as ImageIcon } from 'lucide-react';
 import { useGrooveStore } from '../../stores/groove';
 import { cn } from '../../lib/cn';
 import { Badge } from '../ui/badge';
@@ -38,6 +38,12 @@ function getContextSize(model) {
   return '128k';
 }
 
+export function isImageModel(modelId) {
+  if (!modelId) return false;
+  const id = modelId.toLowerCase();
+  return id.includes('dall-e') || id.includes('imagen') || id.includes('gpt-image') || id.includes('imagine') || id.includes('nano-banana');
+}
+
 export function ModelPicker({ value, onChange, disabled }) {
   const [open, setOpen] = useState(false);
   const [providers, setProviders] = useState([]);
@@ -64,6 +70,99 @@ export function ModelPicker({ value, onChange, disabled }) {
   const currentModelDisplay = currentModel ? formatModelName(currentModel) : 'Select model';
   const currentProvider = value?.provider || '';
   const isNetwork = currentProvider === 'groove-network';
+  const isCurrentImage = isImageModel(currentModel);
+
+  const chatModels = [];
+  const imageModels = [];
+
+  for (const provider of providers) {
+    const models = provider.models || [];
+    const chatGroup = [];
+    const imgGroup = [];
+    for (const model of models) {
+      const modelId = typeof model === 'string' ? model : model.id || model.name;
+      const modelType = typeof model === 'object' ? model.type : undefined;
+      if (modelType === 'image' || isImageModel(modelId)) {
+        imgGroup.push(model);
+      } else {
+        chatGroup.push(model);
+      }
+    }
+    if (chatGroup.length > 0) chatModels.push({ ...provider, models: chatGroup });
+    if (imgGroup.length > 0) imageModels.push({ ...provider, models: imgGroup });
+  }
+
+  function renderModelGroup(providerList, sectionLabel) {
+    if (providerList.length === 0) return null;
+    return (
+      <>
+        {sectionLabel && (
+          <div className="px-3 py-1.5 text-2xs font-semibold text-text-4 uppercase tracking-wider font-sans bg-surface-0 border-b border-border-subtle flex items-center gap-1.5">
+            {sectionLabel === 'Image Generation' && <ImageIcon size={10} className="text-purple" />}
+            {sectionLabel}
+          </div>
+        )}
+        {providerList.map((provider) => {
+          const isNetworkProvider = provider.id === 'groove-network';
+          return (
+            <div key={provider.id}>
+              <div className="px-3 py-1.5 text-2xs font-semibold text-text-3 uppercase tracking-wider font-sans bg-surface-2 border-b border-border-subtle flex items-center gap-1.5">
+                {isNetworkProvider && <Globe size={10} className="text-purple" />}
+                {provider.name || provider.id}
+              </div>
+              {provider.models.map((model) => {
+                const modelId = typeof model === 'string' ? model : model.id || model.name;
+                const modelDisplayName = typeof model === 'string' ? model : model.name || model.id;
+                const modelType = typeof model === 'object' ? model.type : undefined;
+                const isImg = modelType === 'image' || isImageModel(modelId);
+                const tier = isImg ? null : getTier(modelId);
+                const tierConfig = tier ? TIER_CONFIG[tier] : null;
+                const TierIcon = tierConfig?.icon;
+                const isActive = currentModel === modelId && currentProvider === provider.id;
+                return (
+                  <button
+                    key={modelId}
+                    onClick={() => {
+                      onChange({ provider: provider.id, model: modelId });
+                      setOpen(false);
+                    }}
+                    className={cn(
+                      'w-full flex items-center gap-2 px-3 py-2 text-left transition-colors cursor-pointer',
+                      isActive ? 'bg-accent/10 text-text-0' : 'hover:bg-surface-3 text-text-1',
+                    )}
+                  >
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-1.5">
+                        {isImg && <ImageIcon size={11} className="text-purple flex-shrink-0" />}
+                        <span className="text-xs font-medium font-sans truncate">{modelDisplayName}</span>
+                      </div>
+                      {!isImg && <div className="text-2xs text-text-4 font-sans">{getContextSize(modelId)} context</div>}
+                    </div>
+                    <div className="flex items-center gap-1.5 flex-shrink-0">
+                      {isNetworkProvider && (
+                        <Badge variant="purple" className="text-[9px]">
+                          <Globe size={8} /> Decentralized
+                        </Badge>
+                      )}
+                      {isImg ? (
+                        <Badge variant="purple" className="text-[9px]">
+                          <ImageIcon size={8} /> Image
+                        </Badge>
+                      ) : tierConfig && (
+                        <Badge variant={tierConfig.variant} className="text-[9px]">
+                          <TierIcon size={8} /> {tierConfig.label}
+                        </Badge>
+                      )}
+                    </div>
+                  </button>
+                );
+              })}
+            </div>
+          );
+        })}
+      </>
+    );
+  }
 
   return (
     <div ref={ref} className="relative">
@@ -75,10 +174,11 @@ export function ModelPicker({ value, onChange, disabled }) {
           'bg-surface-4 border border-border-subtle hover:bg-surface-5',
           'disabled:opacity-40 disabled:cursor-not-allowed',
           isNetwork && 'border-purple/30 bg-purple/8',
+          isCurrentImage && 'border-purple/30 bg-purple/8',
         )}
       >
-        {isNetwork ? <Globe size={12} className="text-purple" /> : <Cpu size={12} className="text-text-3" />}
-        <span className="text-text-1 max-w-[120px] truncate">{currentModelDisplay}</span>
+        {isCurrentImage ? <ImageIcon size={12} className="text-purple" /> : isNetwork ? <Globe size={12} className="text-purple" /> : <Cpu size={12} className="text-text-3" />}
+        <span className={cn('max-w-[120px] truncate', isCurrentImage ? 'text-purple' : 'text-text-1')}>{currentModelDisplay}</span>
         <ChevronDown size={12} className="text-text-4" />
       </button>
 
@@ -87,55 +187,8 @@ export function ModelPicker({ value, onChange, disabled }) {
           {providers.length === 0 && (
             <div className="px-4 py-6 text-center text-xs text-text-3 font-sans">No providers available</div>
           )}
-          {providers.map((provider) => {
-            const models = provider.models || [];
-            if (models.length === 0) return null;
-            const isNetworkProvider = provider.id === 'groove-network';
-            return (
-              <div key={provider.id}>
-                <div className="px-3 py-1.5 text-2xs font-semibold text-text-3 uppercase tracking-wider font-sans bg-surface-2 border-b border-border-subtle flex items-center gap-1.5">
-                  {isNetworkProvider && <Globe size={10} className="text-purple" />}
-                  {provider.name || provider.id}
-                </div>
-                {models.map((model) => {
-                  const modelId = typeof model === 'string' ? model : model.id || model.name;
-                  const modelDisplayName = typeof model === 'string' ? model : model.name || model.id;
-                  const tier = getTier(modelId);
-                  const tierConfig = TIER_CONFIG[tier];
-                  const TierIcon = tierConfig.icon;
-                  const isActive = currentModel === modelId && currentProvider === provider.id;
-                  return (
-                    <button
-                      key={modelId}
-                      onClick={() => {
-                        onChange({ provider: provider.id, model: modelId });
-                        setOpen(false);
-                      }}
-                      className={cn(
-                        'w-full flex items-center gap-2 px-3 py-2 text-left transition-colors cursor-pointer',
-                        isActive ? 'bg-accent/10 text-text-0' : 'hover:bg-surface-3 text-text-1',
-                      )}
-                    >
-                      <div className="flex-1 min-w-0">
-                        <div className="text-xs font-medium font-sans truncate">{modelDisplayName}</div>
-                        <div className="text-2xs text-text-4 font-sans">{getContextSize(modelId)} context</div>
-                      </div>
-                      <div className="flex items-center gap-1.5 flex-shrink-0">
-                        {isNetworkProvider && (
-                          <Badge variant="purple" className="text-[9px]">
-                            <Globe size={8} /> Decentralized
-                          </Badge>
-                        )}
-                        <Badge variant={tierConfig.variant} className="text-[9px]">
-                          <TierIcon size={8} /> {tierConfig.label}
-                        </Badge>
-                      </div>
-                    </button>
-                  );
-                })}
-              </div>
-            );
-          })}
+          {renderModelGroup(chatModels, null)}
+          {renderModelGroup(imageModels, 'Image Generation')}
         </div>
       )}
     </div>

package/packages/gui/src/components/layout/activity-bar.jsx

@@ -1,5 +1,5 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
-import { Network, Code2, ChartSpline, Puzzle, Gamepad2, Users, Box, Newspaper, Settings, Globe, MessageCircle } from 'lucide-react';
+import { Network, Code2, ChartSpline, Puzzle, Gamepad2, Users, Box, Newspaper, Settings, Globe, MessageCircle, Eye } from 'lucide-react';
 import { cn } from '../../lib/cn';
 import { Tooltip } from '../ui/tooltip';
 import { useGrooveStore } from '../../stores/groove';
@@ -17,6 +17,7 @@ const BASE_NAV_ITEMS = [
 ];
 
 const NETWORK_NAV_ITEM = { id: 'network', icon: Globe, label: 'Network' };
+const PREVIEW_NAV_ITEM = { id: 'preview', icon: Eye, label: 'Preview' };
 
 const UTIL_ITEMS = [
   { id: 'journalist', icon: Newspaper, label: 'Journalist', panel: true },
@@ -26,7 +27,9 @@ const UTIL_ITEMS = [
 export function ActivityBar({ activeView, detailPanel, onNavigate, onTogglePanel }) {
   const darwinTrafficLights = isElectron() && getPlatform() === 'darwin';
   const networkUnlocked = useGrooveStore((s) => s.networkUnlocked);
-  const NAV_ITEMS = networkUnlocked ? [...BASE_NAV_ITEMS, NETWORK_NAV_ITEM] : BASE_NAV_ITEMS;
+  const previewUrl = useGrooveStore((s) => s.previewState.url);
+  let NAV_ITEMS = previewUrl ? [...BASE_NAV_ITEMS, PREVIEW_NAV_ITEM] : BASE_NAV_ITEMS;
+  if (networkUnlocked) NAV_ITEMS = [...NAV_ITEMS, NETWORK_NAV_ITEM];
 
   return (
     <nav className="w-12 flex-shrink-0 flex flex-col bg-surface-3 border-r border-border">