fix: token persistence, context windows, CSS tables/bullets/hr, image attachments

- Fix token count reset on app restart: persist realTokens in conversation.json
- Fix token/context window values: Studio 150K (summarize at 120K), Terminal 100K
- Fix table rendering in terminal tab: correct thead/tbody display model
- Fix copy button always top-right in Studio code blocks
- Add markdown horizontal rule (---) support in Studio and Terminal
- Fix bullet list double dot: remove CSS ::before duplicate bullet point
- Add image attachments support (VLM description, file mentions @file.ext)
- Add sudo detection with cache (sync.Once)
- Fix message content serialization (TextContent wrapper)
- Guide AI to use read_file instead of cat in studio prompt

💘 Generated with Crush

Assisted-by: GLM-5.1 via Crush <crush@charm.land>

web/src/api/client.js

@@ -62,15 +62,15 @@ const api = {
   clearShellChat: () => request('/shell/chat/clear', { method: 'POST' }),
   analyzeSystem: () => request('/shell/analyze', { method: 'POST' }),
   getShellAnalysis: () => request('/shell/analysis'),
-  sendChat: (message, stream = true, onChunk, signal) => {
+  sendChat: (message, stream = true, onChunk, signal, images = []) => {
     if (!stream) {
-      return request('/chat', { method: 'POST', body: JSON.stringify({ message, stream: false }) })
+      return request('/chat', { method: 'POST', body: JSON.stringify({ message, stream: false, images }) })
     }
     return new Promise((resolve, reject) => {
       fetch(`${API_BASE}/chat`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ message, stream: true }),
+        body: JSON.stringify({ message, stream: true, images }),
         signal,
       }).then(async (res) => {
         if (!res.ok) {

web/src/components/App.jsx

@@ -152,7 +152,7 @@ export default function App() {
 
       <footer className="statusbar">
         <div className="statusbar-left">
-          {isSudo && <span className="statusbar-sudo">⚡ ROOT</span>}
+          {isSudo && <span className="statusbar-sudo">⚡ SUDO</span>}
           {activeTab === 'dash' && (
             <span className="statusbar-shortcut">
               <kbd>{layout.keys.ctrl}+R</kbd> refresh

web/src/components/Shell.jsx

@@ -70,14 +70,15 @@ function formatText(text) {
     .replace(/^### (.+)$/gm, '<h4 class="msg-h4">$1</h4>')
     .replace(/^## (.+)$/gm, '<h3 class="msg-h3">$1</h3>')
     .replace(/^# (.+)$/gm, '<h2 class="msg-h2">$1</h2>')
-    .replace(/^\s*[-*] (.+)$/gm, '<div class="msg-bullet">• $1</div>')
+    .replace(/^---+$/gm, '<hr>')
+    .replace(/^\s*[-*] (.+)$/gm, '<div class="msg-bullet">\u2022 $1</div>')
     .replace(/^\s*(\d+)[.)] (.+)$/gm, '<div class="msg-step"><span class="msg-step-num">$1</span> $2</div>')
     .replace(/\n/g, '<br/>')
 
   html = html
     .replace(/<br\/>\s*<br\/>/g, '<br/>')
-    .replace(/<br\/>\s*(<h[234]|<div class="msg-|<table)/g, '$1')
-    .replace(/(<\/h[234]|<\/div>|<\/table>)\s*<br\/>/g, '$1')
+    .replace(/<br\/>\s*(<h[234]|<div class="msg-|<table|<hr)/g, '$1')
+    .replace(/(<\/h[234]|<\/div>|<\/table>|<hr>)\s*<br\/>/g, '$1')
     .replace(/\s+on\w+=["'][^"']*["']/gi, '')
     .replace(/javascript:/gi, '')
     .replace(/data:/gi, '')
@@ -470,6 +471,7 @@ export default function Shell({ api }) {
   const aiMessagesRef = useRef(null)
   const aiLoadedRef = useRef(false)
   const aiLoadingRef = useRef(false)
+  const analysisSavingRef = useRef(false)
 
   useEffect(() => {
     aiMessagesRef.current?.scrollTo(0, aiMessagesRef.current.scrollHeight)
@@ -482,6 +484,8 @@ export default function Shell({ api }) {
       const stored = localStorage.getItem('shell_analysis')
       if (stored) setAnalysisContent(stored)
     })
+    const stored = localStorage.getItem('shell_analysis')
+    if (stored && !analysisContent) setAnalysisContent(stored)
   }, [])
 
   useEffect(() => {
@@ -1138,6 +1142,14 @@ export default function Shell({ api }) {
         const filtered = prev.filter(m => !m._streaming)
         return [...filtered, finalMsg]
       })
+
+      if (analysisSavingRef.current && accumulated) {
+        analysisSavingRef.current = false
+        setAnalysisContent(accumulated)
+        try { localStorage.setItem('shell_analysis', accumulated) } catch {}
+        setAnalyzing(false)
+      }
+
       api.getShellChatHistory().then(d => {
         setAiTokens(d.tokens || 0)
         setAiAtLimit(d.at_limit || false)
@@ -1147,6 +1159,10 @@ export default function Shell({ api }) {
         setAiAtLimit(true)
       }
       setAiMessages(prev => [...prev.filter(m => !m._streaming), { role: 'assistant', content: `Erreur: ${err.message}` }])
+      if (analysisSavingRef.current) {
+        analysisSavingRef.current = false
+        setAnalyzing(false)
+      }
     }
     setAiLoading(false)
     aiLoadingRef.current = false
@@ -1165,7 +1181,25 @@ export default function Shell({ api }) {
     return () => window.removeEventListener('ask-ai-terminal', handler)
   }, [_sendAiMessage])
 
-  const handleAnalyze = () => {
+  const handleClearChat = async () => {
+    try {
+      await api.clearShellChat()
+      setAiMessages([])
+      setAiTokens(0)
+      setAiAtLimit(false)
+    } catch {}
+  }
+
+  const handleAnalyze = async () => {
+    if (analyzing) return
+    setAnalyzing(true)
+    try {
+      await api.clearShellChat()
+      setAiMessages([])
+      setAiTokens(0)
+      setAiAtLimit(false)
+    } catch {}
+    analysisSavingRef.current = true
     _sendAiMessage(`Fais une analyse complète du système. Utilise l'outil terminal pour explorer et rédige un rapport structuré en markdown. Couvre:
 
 1. **OS & Matériel** — distrib, kernel, CPU, RAM, GPU, hostname
@@ -1359,44 +1393,49 @@ Sois concret : cite les vraies versions, les vrais chemins, les vrais nombres. L
           {aiLoading && <div style={{ textAlign: 'center', padding: 8 }}><span className="spinner" /></div>}
         </div>
         <div className="ai-panel-input">
-          <input
-            value={aiInput}
-            onChange={e => setAiInput(e.target.value)}
-            onKeyDown={e => {
-              if (e.key === 'Enter') { e.preventDefault(); e.stopPropagation(); handleAiSend(); return }
-              if (e.key === 'Tab') {
-                e.preventDefault()
-                const val = aiInput
-                const pos = e.target.selectionStart
-                const before = val.slice(0, pos)
-                const afterSlash = before.match(/\/[\w ]*$/)
-                if (afterSlash) {
-                  const partial = afterSlash[0]
-                  const matches = SHELL_AI_COMMANDS.filter(c => c.startsWith(partial) && c !== partial)
-                  if (matches.length >= 1) {
-                    let completed = matches[0]
-                    for (const m of matches) {
-                      while (!m.startsWith(completed)) completed = completed.slice(0, -1)
-                    }
-                    if (completed === partial && matches.length === 1) completed = matches[0]
-                    if (completed.length > partial.length) {
-                      const suffix = completed[completed.length - 1] === ' ' ? '' : (matches.length === 1 ? ' ' : '')
-                      completed += suffix
-                      const newText = val.slice(0, pos - afterSlash[0].length) + completed + val.slice(pos)
-                      setAiInput(newText)
-                      requestAnimationFrame(() => {
-                        e.target.selectionStart = e.target.selectionEnd = pos - afterSlash[0].length + completed.length
-                      })
+          {aiAtLimit ? (
+            <button className="ai-clear-btn" onClick={handleClearChat}>Nettoyer la conversation</button>
+          ) : (
+            <>
+              <input
+                value={aiInput}
+                onChange={e => setAiInput(e.target.value)}
+                onKeyDown={e => {
+                  if (e.key === 'Enter') { e.preventDefault(); e.stopPropagation(); handleAiSend(); return }
+                  if (e.key === 'Tab') {
+                    e.preventDefault()
+                    const val = aiInput
+                    const pos = e.target.selectionStart
+                    const before = val.slice(0, pos)
+                    const afterSlash = before.match(/\/[\w ]*$/)
+                    if (afterSlash) {
+                      const partial = afterSlash[0]
+                      const matches = SHELL_AI_COMMANDS.filter(c => c.startsWith(partial) && c !== partial)
+                      if (matches.length >= 1) {
+                        let completed = matches[0]
+                        for (const m of matches) {
+                          while (!m.startsWith(completed)) completed = completed.slice(0, -1)
+                        }
+                        if (completed === partial && matches.length === 1) completed = matches[0]
+                        if (completed.length > partial.length) {
+                          const suffix = completed[completed.length - 1] === ' ' ? '' : (matches.length === 1 ? ' ' : '')
+                          completed += suffix
+                          const newText = val.slice(0, pos - afterSlash[0].length) + completed + val.slice(pos)
+                          setAiInput(newText)
+                          requestAnimationFrame(() => {
+                            e.target.selectionStart = e.target.selectionEnd = pos - afterSlash[0].length + completed.length
+                          })
+                        }
+                      }
                     }
+                    return
                   }
-                }
-                return
-              }
-            }}
-            placeholder={aiAtLimit ? '/clear pour continuer' : t('shell.askAi')}
-            disabled={aiAtLimit && aiInput !== '/clear'}
-          />
-          <button className="sm" onClick={handleAiSend} disabled={(!aiInput.trim() && !aiAtLimit) || (aiAtLimit && aiInput !== '/clear')}>{t('shell.send')}</button>
+                }}
+                placeholder={t('shell.askAi')}
+              />
+              <button className="sm" onClick={handleAiSend} disabled={!aiInput.trim()}>{t('shell.send')}</button>
+            </>
+          )}
         </div>
       </div>
 

web/src/components/Studio.jsx

@@ -83,14 +83,15 @@ function formatText(text) {
     .replace(/^### (.+)$/gm, '<h4 class="msg-h4">$1</h4>')
     .replace(/^## (.+)$/gm, '<h3 class="msg-h3">$1</h3>')
     .replace(/^# (.+)$/gm, '<h2 class="msg-h2">$1</h2>')
-    .replace(/^\s*[-*] (.+)$/gm, '<div class="msg-bullet">• $1</div>')
+    .replace(/^---+$/gm, '<hr>')
+    .replace(/^\s*[-*] (.+)$/gm, '<div class="msg-bullet">\u2022 $1</div>')
     .replace(/^\s*(\d+)[.)] (.+)$/gm, '<div class="msg-step"><span class="msg-step-num">$1</span> $2</div>')
     .replace(/\n/g, '<br/>')
 
   html = html
     .replace(/<br\/>\s*<br\/>/g, '<br/>')
-    .replace(/<br\/>\s*(<h[234]|<div class="msg-|<table)/g, '$1')
-    .replace(/(<\/h[234]|<\/div>|<\/table>)\s*<br\/>/g, '$1')
+    .replace(/<br\/>\s*(<h[234]|<div class="msg-|<table|<hr)/g, '$1')
+    .replace(/(<\/h[234]|<\/div>|<\/table>|<hr>)\s*<br\/>/g, '$1')
     .replace(/\s+on\w+=["'][^"']*["']/gi, '')
     .replace(/javascript:/gi, '')
     .replace(/data:/gi, '')
@@ -284,6 +285,13 @@ function FeedItem({ msg }) {
           {timeStr && <span className="feed-time">{timeStr}</span>}
         </div>
         {msg.thinking && <ThinkingBlock content={formatText(msg.thinking)} done raw />}
+        {msg.images && msg.images.length > 0 && (
+          <div className="feed-images">
+            {msg.images.map((imgId, i) => (
+              <img key={i} className="feed-image" src={`/api/images/${imgId}`} alt={`Image ${i + 1}`} />
+            ))}
+          </div>
+        )}
         {parsedToolCalls && parsedToolCalls.map((tc, i) => {
           const resultData = parsedToolResults
             ? parsedToolResults.find(r => r.tool_call_id === tc.tool_call_id)
@@ -372,14 +380,16 @@ export default function Studio({ api }) {
   const [streamThinking, setStreamThinking] = useState('')
   const [streamToolCalls, setStreamToolCalls] = useState([])
   const [loaded, setLoaded] = useState(false)
-  const [tokenInfo, setTokenInfo] = useState({ used: 0, max: 100000, summarizeAt: 80000 })
+  const [tokenInfo, setTokenInfo] = useState({ used: 0, max: 150000, summarizeAt: 120000 })
   const [contextCollapsed, setContextCollapsed] = useState(false)
   const [messagesCollapsed, setMessagesCollapsed] = useState(false)
   const [sudoModal, setSudoModal] = useState(null)
+  const [attachedImages, setAttachedImages] = useState([])
   const messagesEnd = useRef(null)
   const feedRef = useRef(null)
   const textareaRef = useRef(null)
   const abortRef = useRef(null)
+  const fileInputRef = useRef(null)
 
   useEffect(() => {
     api.getChatHistory().then(data => {
@@ -392,8 +402,8 @@ export default function Studio({ api }) {
       }
       setTokenInfo({
         used: data.tokens || 0,
-        max: data.max_tokens || 100000,
-        summarizeAt: data.summarize_at || 80000,
+        max: data.max_tokens || 150000,
+        summarizeAt: data.summarize_at || 120000,
       })
       setLoaded(true)
     }).catch(() => {
@@ -434,8 +444,8 @@ export default function Studio({ api }) {
       const data = await api.getChatHistory()
       setTokenInfo({
         used: data.tokens || 0,
-        max: data.max_tokens || 100000,
-        summarizeAt: data.summarize_at || 80000,
+        max: data.max_tokens || 150000,
+        summarizeAt: data.summarize_at || 120000,
       })
     } catch {}
   }, [api])
@@ -466,10 +476,36 @@ export default function Studio({ api }) {
     } catch {}
   }, [api, t])
 
+  const handleImageSelect = useCallback((e) => {
+    const files = Array.from(e.target.files || [])
+    if (files.length === 0) return
+    const remaining = 3 - attachedImages.length
+    const toProcess = files.slice(0, remaining)
+    toProcess.forEach(file => {
+      if (!file.type.match(/^image\/(jpeg|jpg|png|webp)$/)) return
+      if (file.size > 50 * 1024 * 1024) return
+      const reader = new FileReader()
+      reader.onload = (ev) => {
+        setAttachedImages(prev => {
+          if (prev.length >= 3) return prev
+          return [...prev, { data: ev.target.result, filename: file.name, mime_type: file.type }]
+        })
+      }
+      reader.readAsDataURL(file)
+    })
+    e.target.value = ''
+  }, [attachedImages.length])
+
+  const removeImage = useCallback((index) => {
+    setAttachedImages(prev => prev.filter((_, i) => i !== index))
+  }, [])
+
   const handleSend = useCallback(async () => {
     if (!input.trim() || loading) return
     const text = input.trim()
+    const images = [...attachedImages]
     setInput('')
+    setAttachedImages([])
 
     const isSlashCommand = (t) => /^\/(clear|help|summarize|model(?:\s+\S+)?)$/.test(t)
 
@@ -580,7 +616,7 @@ export default function Studio({ api }) {
         }
         accumulated = partial
         setStreaming(partial)
-      }, controller.signal)
+      }, controller.signal, images)
 
       const finalContent = accumulated || t('studio.noResponse')
       const aiMsg = {
@@ -628,7 +664,7 @@ export default function Studio({ api }) {
       abortRef.current = null
       refreshTokens()
     }
-  }, [input, loading, api, t, handleClear, streaming, refreshTokens, handleSummarize])
+  }, [input, loading, api, t, handleClear, streaming, refreshTokens, handleSummarize, attachedImages])
 
   const handleStop = useCallback(() => {
     if (abortRef.current) {
@@ -732,6 +768,16 @@ export default function Studio({ api }) {
       </div>
 
       <div className="studio-input-area">
+        {attachedImages.length > 0 && (
+          <div className="studio-image-previews">
+            {attachedImages.map((img, i) => (
+              <div key={i} className="studio-image-preview">
+                <img src={img.data} alt={img.filename} />
+                <button className="studio-image-remove" onClick={() => removeImage(i)}>×</button>
+              </div>
+            ))}
+          </div>
+        )}
         <div className={`studio-token-bar ${contextCollapsed === true ? 'compressed' : ''}`}>
           <div className={`studio-token-track ${contextCollapsed === true ? 'compressed' : ''}`}>
             <div
@@ -751,6 +797,24 @@ export default function Studio({ api }) {
           )}
         </div>
         <div className="studio-input-row">
+          <input
+            type="file"
+            ref={fileInputRef}
+            accept="image/jpeg,image/png,image/webp"
+            multiple
+            style={{ display: 'none' }}
+            onChange={handleImageSelect}
+          />
+          <button
+            className="studio-attach-btn"
+            onClick={() => fileInputRef.current?.click()}
+            disabled={loading || attachedImages.length >= 3}
+            title="Joindre des images (max 3)"
+          >
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/>
+            </svg>
+          </button>
           <textarea
             ref={textareaRef}
             value={input}
@@ -778,7 +842,7 @@ export default function Studio({ api }) {
           )}
         </div>
         <div className="studio-input-hint">
-          {t('studio.inputHint')} · /clear /summarize /help /model
+          {t('studio.inputHint')} · /clear /summarize /help /model · @fichier.ext pour joindre un fichier{attachedImages.length > 0 && ` · ${attachedImages.length} image${attachedImages.length > 1 ? 's' : ''} attachée${attachedImages.length > 1 ? 's' : ''}`}
         </div>
       </div>
 

web/src/styles/global.css

@@ -459,7 +459,7 @@ input::placeholder { color: var(--text-disabled); }
 .ai-panel-messages { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
 .ai-message { padding: 8px 12px; border-radius: var(--radius); font-size: 13px; line-height: 1.5; word-break: break-word; }
 .ai-message.user { background: var(--bg-elevated); border-left: 3px solid var(--accent-bright); color: var(--text-primary); }
-.ai-message.user.analysis { border-left-color: var(--info); background: color-mix(in srgb, var(--info) 8%, var(--bg-elevated)); }
+.ai-message.user.analysis { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--bg-elevated)); }
 .ai-message.assistant { background: var(--bg-card); border-left: 3px solid var(--accent); }
 .ai-message.system { background: var(--bg-elevated); border-left: 3px solid var(--info); font-style: italic; color: var(--text-tertiary); font-size: 12px; }
 .ai-message.assistant { background: var(--bg-card); border-left: 3px solid var(--accent); }
@@ -469,6 +469,13 @@ input::placeholder { color: var(--text-disabled); }
 .ai-message.tool .tool-args { font-family: var(--font-mono); font-size: 12px; color: var(--text-tertiary); margin-top: 4px; }
 .ai-panel-input { display: flex; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--border); }
 .ai-panel-input input { flex: 1; font-size: 13px; padding: 6px 10px; }
+.ai-panel-input .ai-clear-btn {
+  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
+  padding: 10px 16px; border-radius: var(--radius); border: 1px solid var(--accent);
+  background: var(--accent-bg); color: var(--accent); font-size: 13px; font-weight: 700;
+  cursor: pointer; transition: all 0.15s; font-family: var(--font-sans);
+}
+.ai-panel-input .ai-clear-btn:hover { background: var(--accent); color: #fff; }
 
 .shell-code-block {
   background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
@@ -501,9 +508,11 @@ input::placeholder { color: var(--text-disabled); }
 .shell-mermaid-loading { padding: 16px; text-align: center; color: var(--text-tertiary); font-size: 12px; }
 .shell-mermaid-error { padding: 10px 12px; color: var(--accent-bright); font-family: var(--font-mono); font-size: 12px; white-space: pre-wrap; }
 
-.ai-message table { width: 100%; border-collapse: collapse; margin: 6px 0; font-size: 12px; }
-.ai-message th { background: var(--bg-surface); padding: 6px 10px; text-align: left; font-weight: 600; border: 1px solid var(--border); color: var(--text-secondary); }
-.ai-message td { padding: 5px 10px; border: 1px solid var(--border); color: var(--text-primary); }
+.ai-message table { width: 100%; border-collapse: collapse; margin: 6px 0; font-size: 12px; display: block; overflow-x: auto; }
+.ai-message thead, .ai-message tbody { display: table-row-group; }
+.ai-message th { background: var(--bg-surface); padding: 4px 8px; text-align: left; font-weight: 600; border: 1px solid var(--border); color: var(--text-secondary); white-space: nowrap; }
+.ai-message td { padding: 3px 8px; border: 1px solid var(--border); color: var(--text-primary); white-space: nowrap; }
+.ai-message tr { display: table-row; }
 .ai-message tr:nth-child(even) td { background: var(--bg-surface); }
 
 @keyframes copy-flash {
@@ -526,6 +535,18 @@ input::placeholder { color: var(--text-disabled); }
   flex: 1; overflow-y: auto; padding: 20px; font-size: 14px; line-height: 1.5;
   color: var(--text-primary); word-break: break-word;
 }
+.shell-analysis-modal-body table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 13px; }
+.shell-analysis-modal-body th { background: var(--bg-surface); padding: 4px 10px; text-align: left; font-weight: 600; border: 1px solid var(--border); color: var(--text-secondary); }
+.shell-analysis-modal-body td { padding: 3px 10px; border: 1px solid var(--border); color: var(--text-primary); }
+.shell-analysis-modal-body tr:nth-child(even) td { background: var(--bg-surface); }
+.shell-analysis-modal-body .msg-h3 { font-size: 18px; font-weight: 700; color: var(--text-primary); margin: 16px 0 6px; display: block; }
+.shell-analysis-modal-body .msg-h4 { font-size: 15px; font-weight: 700; color: var(--text-secondary); margin: 12px 0 4px; display: block; }
+.shell-analysis-modal-body .msg-h2 { font-size: 20px; font-weight: 700; color: var(--accent); margin: 20px 0 8px; display: block; }
+.shell-analysis-modal-body .msg-bullet { display: block; padding-left: 4px; margin: 2px 0; color: var(--text-primary); }
+.shell-analysis-modal-body .msg-step { display: flex; gap: 8px; align-items: baseline; margin: 2px 0; }
+.shell-analysis-modal-body .msg-step-num { color: var(--accent); font-weight: 700; font-family: var(--font-mono); flex-shrink: 0; }
+.shell-analysis-modal-body strong { color: var(--accent-light); }
+.shell-analysis-modal-body .inline-code { background: var(--bg-input); padding: 2px 6px; border-radius: 4px; font-family: var(--font-mono); font-size: 13px; color: var(--accent-muted); }
 
 .shell-modal-overlay {
   position: fixed; inset: 0; background: rgba(0,0,0,0.6);
@@ -972,7 +993,7 @@ input::placeholder { color: var(--text-disabled); }
   overflow: hidden; margin: 8px 0;
 }
 .studio-code-header {
-  display: flex; align-items: center; justify-content: space-between;
+  display: flex; align-items: center; justify-content: flex-end;
   background: var(--bg-surface); border-bottom: 1px solid var(--border);
 }
 .studio-code-block pre { padding: 12px 16px; font-family: var(--font-mono); font-size: 13px; line-height: 1.5; overflow-x: auto; color: var(--text-primary); margin: 0; }
@@ -998,11 +1019,11 @@ input::placeholder { color: var(--text-disabled); }
 .feed-content th { background: var(--bg-surface); padding: 6px 12px; text-align: left; font-weight: 600; border: 1px solid var(--border); color: var(--text-secondary); }
 .feed-content td { padding: 5px 12px; border: 1px solid var(--border); color: var(--text-primary); }
 .feed-content tr:nth-child(even) td { background: var(--bg-surface); }
+.feed-content hr, .ai-message hr { border: none; border-top: 1px solid var(--border); margin: 12px 0; }
 .inline-code { background: var(--bg-input); padding: 2px 6px; border-radius: 4px; font-family: var(--font-mono); font-size: 13px; color: var(--accent-muted); }
 .msg-h3 { font-size: 16px; font-weight: 700; color: var(--text-primary); margin: 10px 0 4px; display: block; }
 .msg-h4 { font-size: 14px; font-weight: 700; color: var(--text-secondary); margin: 8px 0 3px; display: block; }
-.msg-bullet { display: block; padding-left: 16px; position: relative; margin: 1px 0; }
-.msg-bullet::before { content: '\2022'; position: absolute; left: 4px; color: var(--accent); }
+.msg-bullet { display: block; padding-left: 4px; margin: 1px 0; color: var(--text-primary); }
 .msg-step { display: flex; gap: 8px; align-items: baseline; margin: 1px 0; }
 .msg-step-num { color: var(--accent); font-weight: 700; font-family: var(--font-mono); font-size: 13px; flex-shrink: 0; min-width: 20px; }
 .studio-cursor { display: inline-block; width: 8px; height: 16px; background: var(--accent); margin-left: 2px; vertical-align: text-bottom; animation: blink 0.8s step-end infinite; }
@@ -1051,6 +1072,47 @@ input::placeholder { color: var(--text-disabled); }
   cursor: pointer; transition: all 0.15s; flex-shrink: 0;
 }
 .studio-stop-btn:hover { opacity: 0.8; }
+
+/* ── Image Attachments ── */
+.studio-attach-btn {
+  width: 42px; height: 42px; padding: 0; display: flex; align-items: center; justify-content: center;
+  border-radius: var(--radius); background: var(--bg-card); color: var(--text-tertiary);
+  border: 1px solid var(--border); cursor: pointer; transition: all 0.15s; flex-shrink: 0;
+}
+.studio-attach-btn:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); }
+.studio-attach-btn:disabled { opacity: 0.3; cursor: not-allowed; }
+.studio-image-previews {
+  display: flex; gap: 10px; padding: 10px 8px; flex-wrap: wrap; justify-content: center;
+}
+.studio-image-preview {
+  position: relative; width: 110px; height: 110px; border-radius: var(--radius-lg);
+  overflow: hidden; border: 2px solid var(--border); background: var(--bg-surface);
+  transition: border-color 0.2s;
+}
+.studio-image-preview:hover { border-color: var(--accent-dim); }
+.studio-image-preview img {
+  width: 100%; height: 100%; object-fit: cover;
+}
+.studio-image-remove {
+  position: absolute; top: 4px; right: 4px; width: 24px; height: 24px;
+  border-radius: 50%; background: rgba(0,0,0,0.75); color: #fff; border: none;
+  font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center;
+  justify-content: center; line-height: 1; transition: background 0.15s;
+  backdrop-filter: blur(4px);
+}
+.studio-image-remove:hover { background: var(--error); }
+
+/* ── Feed Images (in chat messages) ── */
+.feed-images {
+  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px;
+}
+.feed-image {
+  max-width: 240px; max-height: 180px; border-radius: var(--radius);
+  border: 1px solid var(--border); object-fit: cover; cursor: pointer;
+  transition: transform 0.15s, border-color 0.15s;
+}
+.feed-image:hover { transform: scale(1.03); border-color: var(--accent-dim); }
+
 .studio-input-hint { font-size: 11px; color: var(--text-disabled); text-align: center; margin-top: 6px; }
 
 /* ── Collapsed Messages ── */