chore: bump version to 0.3.0

feat(shell): real terminal with xterm.js + PTY over WebSocket

Replace fake shell input with a full PTY-backed terminal using xterm.js.
Apps like btop, vim, htop now work. AI chat panel is always visible.

Backend:
- Add WebSocket handler /api/ws/terminal with creack/pty
- Allocate real pseudo-terminal with TERM=xterm-256color
- Bidirectional I/O + dynamic resize via pty.Setsize
- Skip JSON headers on /api/ws/* paths for WebSocket upgrade

Frontend:
- Integrate xterm.js with FitAddon and WebLinksAddon
- Cyberpunk color theme matching app design
- ResizeObserver for automatic terminal resizing
- AI assistant panel always visible (340px, no toggle)
- Connection status indicator (green/red dot)

Dependencies:
- Go: github.com/gorilla/websocket, github.com/creack/pty/v2
- npm: @xterm/xterm, @xterm/addon-fit, @xterm/addon-web-links

💘 Generated with Crush

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

web/src/components/Studio.jsx

@@ -1,37 +1,320 @@
-import { useState, useRef, useEffect } from 'react'
+import { useState, useRef, useEffect, useCallback } from 'react'
 import { useI18n } from '../i18n'
 
+const MSG_ID = () => Math.random().toString(36).slice(2, 10)
+
+function parsePlanBlocks(text) {
+  const plans = []
+  const regex = /(?:^|\n)(?:###?\s+|(?:\d+\.\s+)?)\[?PLAN[^\]]*\]?:?\s*(.*?)(?=\n(?:###?\s+|(?:\d+\.\s+)?)\[?PLAN|\n## |\n### |\n$)/gis
+  const matches = text.matchAll(regex)
+  for (const m of matches) {
+    plans.push({ id: MSG_ID(), title: m[1].trim(), content: m[0].trim() })
+  }
+  if (plans.length === 0 && /plan|workflow/i.test(text)) {
+    const lines = text.split('\n').filter(l => /^\s*[-*]\s|^\s*\d+\.\s/.test(l))
+    if (lines.length > 0) {
+      plans.push({ id: MSG_ID(), title: text.split('\n')[0].slice(0, 80), content: text.trim() })
+    }
+  }
+  return plans
+}
+
+function parseAgentMentions(text) {
+  const agents = new Set()
+  const names = ['crush', 'claude', 'claude code', 'ollama', 'copilot', 'cursor', 'agent']
+  for (const name of names) {
+    if (new RegExp('\\b' + name + '\\b', 'i').test(text)) {
+      agents.add(name)
+    }
+  }
+  return [...agents]
+}
+
+function parseSteps(text) {
+  const steps = []
+  const lines = text.split('\n')
+  for (const line of lines) {
+    const match = line.match(/^\s*(\d+)[.)]\s+(.+)/)
+    if (match) {
+      steps.push({ num: match[1], text: match[2].trim() })
+    }
+    const bulletMatch = line.match(/^\s*[-*]\s+(.+)/)
+    if (bulletMatch) {
+      steps.push({ num: String(steps.length + 1), text: bulletMatch[1].trim() })
+    }
+  }
+  return steps
+}
+
+function renderContent(text) {
+  const parts = []
+  let i = 0
+  const codeBlockRegex = /(```[\s\S]*?```)/g
+  let match
+  let lastIndex = 0
+  while ((match = codeBlockRegex.exec(text)) !== null) {
+    if (match.index > lastIndex) {
+      parts.push({ type: 'text', content: text.slice(lastIndex, match.index) })
+    }
+    const full = match[1]
+    const firstNewline = full.indexOf('\n')
+    const lang = firstNewline > -1 ? full.slice(3, firstNewline).trim() : ''
+    const code = firstNewline > -1 ? full.slice(firstNewline + 1, -3) : full.slice(3, -3)
+    parts.push({ type: 'code', lang, content: code })
+    lastIndex = match.index + full.length
+  }
+  if (lastIndex < text.length) {
+    parts.push({ type: 'text', content: text.slice(lastIndex) })
+  }
+  return parts
+}
+
+function formatText(text) {
+  let html = text
+    .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+    .replace(/`([^`]+)`/g, '<code class="inline-code">$1</code>')
+    .replace(/^### (.+)$/gm, '<h4 class="msg-h4">$1</h4>')
+    .replace(/^## (.+)$/gm, '<h3 class="msg-h3">$1</h3>')
+    .replace(/^\s*[-*] (.+)$/gm, '<span class="msg-bullet">$1</span>')
+    .replace(/^\s*(\d+)[.)] (.+)$/gm, '<span class="msg-step"><span class="msg-step-num">$1</span>$2</span>')
+  return html
+}
+
+function MessageBubble({ msg }) {
+  const { t } = useI18n()
+  const [expanded, setExpanded] = useState(null)
+  const plans = msg.role === 'ai' ? parsePlanBlocks(msg.content) : []
+  const steps = msg.role === 'ai' ? parseSteps(msg.content) : []
+  const agents = msg.role === 'ai' ? parseAgentMentions(msg.content) : []
+
+  return (
+    <div className={`studio-msg ${msg.role}`}>
+      {msg.role === 'ai' && (
+        <div className="studio-msg-avatar">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
+        </div>
+      )}
+      <div className="studio-msg-body">
+        <div className="studio-msg-content">
+          {renderContent(msg.content).map((part, i) =>
+            part.type === 'code' ? (
+              <div key={i} className="studio-code-block">
+                {part.lang && <div className="studio-code-lang">{part.lang}</div>}
+                <pre><code>{part.content}</code></pre>
+              </div>
+            ) : (
+              <span key={i} dangerouslySetInnerHTML={{ __html: formatText(part.content) }} />
+            )
+          )}
+        </div>
+        {msg.role === 'ai' && (plans.length > 0 || agents.length > 0) && (
+          <div className="studio-msg-meta">
+            {plans.map(plan => (
+              <div key={plan.id} className="studio-plan-chip" onClick={() => setExpanded(expanded === plan.id ? null : plan.id)}>
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
+                {plan.title.slice(0, 60)}
+                <span className="studio-expand-icon">{expanded === plan.id ? '\u25B2' : '\u25BC'}</span>
+              </div>
+            ))}
+            {agents.map(agent => (
+              <span key={agent} className="studio-agent-tag">
+                {agent}
+              </span>
+            ))}
+          </div>
+        )}
+        {expanded && plans.find(p => p.id === expanded) && (
+          <div className="studio-plan-detail">
+            <div className="studio-plan-detail-header">{t('studio.planDetail')}</div>
+            {steps.length > 0 && (
+              <div className="studio-steps">
+                {steps.map(step => (
+                  <div key={step.num} className="studio-step">
+                    <span className="studio-step-num">{step.num}</span>
+                    <span className="studio-step-text">{step.text}</span>
+                  </div>
+                ))}
+              </div>
+            )}
+            <div className="studio-plan-raw">
+              <pre>{plans.find(p => p.id === expanded).content}</pre>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function StreamingMessage({ content }) {
+  return (
+    <div className="studio-msg ai">
+      <div className="studio-msg-avatar">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
+      </div>
+      <div className="studio-msg-body">
+        <div className="studio-msg-content">
+          {renderContent(content).map((part, i) =>
+            part.type === 'code' ? (
+              <div key={i} className="studio-code-block">
+                {part.lang && <div className="studio-code-lang">{part.lang}</div>}
+                <pre><code>{part.content}</code></pre>
+              </div>
+            ) : (
+              <span key={i} dangerouslySetInnerHTML={{ __html: formatText(part.content) }} />
+            )
+          )}
+        </div>
+        <span className="studio-cursor" />
+      </div>
+    </div>
+  )
+}
+
+function ContextPanel({ messages, selectedPlan, onSelectPlan }) {
+  const { t } = useI18n()
+  const [tab, setTab] = useState('plans')
+
+  const allPlans = []
+  const allAgents = new Set()
+  const activities = []
+
+  for (let i = messages.length - 1; i >= 0; i--) {
+    const msg = messages[i]
+    if (msg.role === 'ai') {
+      const plans = parsePlanBlocks(msg.content)
+      for (const plan of plans) {
+        if (!allPlans.find(p => p.title === plan.title)) {
+          allPlans.push({ ...plan, msgIndex: i })
+        }
+      }
+      parseAgentMentions(msg.content).forEach(a => allAgents.add(a))
+    }
+    activities.push({ role: msg.role, content: msg.content.slice(0, 100), time: msg.time })
+  }
+
+  const tabs = [
+    { id: 'plans', label: t('studio.plans'), count: allPlans.length },
+    { id: 'agents', label: t('studio.agents'), count: allAgents.size },
+    { id: 'activity', label: t('studio.activity'), count: activities.length },
+  ]
+
+  return (
+    <div className="studio-context">
+      <div className="studio-context-tabs">
+        {tabs.map(t2 => (
+          <div
+            key={t2.id}
+            className={`studio-context-tab ${tab === t2.id ? 'active' : ''}`}
+            onClick={() => setTab(t2.id)}
+          >
+            {t2.label}
+            {t2.count > 0 && <span className="studio-tab-count">{t2.count}</span>}
+          </div>
+        ))}
+      </div>
+      <div className="studio-context-body">
+        {tab === 'plans' && (
+          allPlans.length > 0 ? (
+            <div className="studio-plan-list">
+              {allPlans.map(plan => (
+                <div
+                  key={plan.id}
+                  className={`studio-plan-item ${selectedPlan === plan.id ? 'active' : ''}`}
+                  onClick={() => onSelectPlan(selectedPlan === plan.id ? null : plan.id)}
+                >
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
+                  <div className="studio-plan-item-text">{plan.title}</div>
+                  <span className="studio-plan-item-badge">{parseSteps(plan.content).length} {t('studio.steps')}</span>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="studio-empty">{t('studio.noPlansYet')}</div>
+          )
+        )}
+        {tab === 'agents' && (
+          allAgents.size > 0 ? (
+            <div className="studio-agent-list">
+              {[...allAgents].map(agent => (
+                <div key={agent} className="studio-agent-item">
+                  <div className="studio-agent-dot" />
+                  <span className="studio-agent-name">{agent}</span>
+                  <span className="badge info">{t('studio.mentioned')}</span>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="studio-empty">{t('studio.noAgentsYet')}</div>
+          )
+        )}
+        {tab === 'activity' && (
+          <div className="studio-activity-list">
+            {activities.map((act, i) => (
+              <div key={i} className="studio-activity-item">
+                <div className={`studio-activity-dot ${act.role}`} />
+                <div className="studio-activity-text">
+                  {act.role === 'user' ? t('studio.you') + ': ' : 'AI: '}
+                  {act.content}{act.content.length >= 100 ? '...' : ''}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
 export default function Studio({ api }) {
-  const { t, layout } = useI18n()
+  const { t } = useI18n()
   const [messages, setMessages] = useState([
-    { role: 'ai', content: t('studio.welcome') },
-    { role: 'ai', content: t('studio.configureHint') },
+    { id: MSG_ID(), role: 'ai', content: t('studio.welcomeNew'), time: new Date() },
   ])
   const [input, setInput] = useState('')
-  const [sidebarPanel, setSidebarPanel] = useState('chat')
   const [loading, setLoading] = useState(false)
+  const [streaming, setStreaming] = useState('')
+  const [selectedPlan, setSelectedPlan] = useState(null)
+  const [showContext, setShowContext] = useState(true)
   const messagesEnd = useRef(null)
+  const textareaRef = useRef(null)
 
   useEffect(() => {
     messagesEnd.current?.scrollIntoView({ behavior: 'smooth' })
-  }, [messages])
+  }, [messages, streaming])
 
-  const handleSend = () => {
+  useEffect(() => {
+    if (textareaRef.current) {
+      textareaRef.current.style.height = 'auto'
+      textareaRef.current.style.height = Math.min(textareaRef.current.scrollHeight, 200) + 'px'
+    }
+  }, [input])
+
+  const handleSend = useCallback(async () => {
     if (!input.trim() || loading) return
     const text = input.trim()
-    setMessages(prev => [...prev, { role: 'user', content: text }])
     setInput('')
+    const userMsg = { id: MSG_ID(), role: 'user', content: text, time: new Date() }
+    setMessages(prev => [...prev, userMsg])
     setLoading(true)
+    setStreaming('')
 
-    api.runCommand(`echo "AI response simulation for: ${text}"`, '')
-      .then(res => {
-        setMessages(prev => [...prev, { role: 'ai', content: res.output || res.error || t('studio.noResponse') }])
-      })
-      .catch(err => {
-        setMessages(prev => [...prev, { role: 'ai', content: `${t('studio.error')}: ${err.message}` }])
-      })
-      .finally(() => setLoading(false))
-  }
+    try {
+      let accumulated = ''
+      await api.sendChat(text, true).then(full => {
+        accumulated = full
+      }).catch(() => {})
+
+      const finalContent = accumulated || t('studio.noResponse')
+      setMessages(prev => [...prev, { id: MSG_ID(), role: 'ai', content: finalContent, time: new Date() }])
+    } catch (err) {
+      setMessages(prev => [...prev, { id: MSG_ID(), role: 'ai', content: `${t('studio.error')}: ${err.message}`, time: new Date() }])
+    } finally {
+      setLoading(false)
+      setStreaming('')
+    }
+  }, [input, loading, api, t])
 
   const handleKeyDown = (e) => {
     if (e.key === 'Enter' && !e.shiftKey) {
@@ -40,99 +323,69 @@ export default function Studio({ api }) {
     }
   }
 
-  const sidebarItems = [
-    { id: 'chat', label: t('studio.chat'), icon: '#' },
-    { id: 'agents', label: t('studio.agents'), icon: '*' },
-    { id: 'workflows', label: t('studio.workflows'), icon: '~' },
-  ]
-
   return (
-    <div className="split-horizontal">
-      <div className="chat-layout" style={{ flex: 1, borderRight: '1px solid var(--border)' }}>
-        <div className="panel-header">
-          <span className="panel-title">
-            {t('studio.chat')}
-            {loading && <span className="spinner" />}
-          </span>
-        </div>
-
-        <div className="chat-messages">
-          {messages.map((msg, i) => (
-            <div key={i} className={`message ${msg.role}`}>
-              {msg.content}
-            </div>
+    <div className="studio-layout">
+      <div className="studio-chat-area">
+        <div className="studio-messages">
+          {messages.map(msg => (
+            <MessageBubble key={msg.id} msg={msg} />
           ))}
+          {streaming && <StreamingMessage content={streaming} />}
+          {loading && !streaming && (
+            <div className="studio-msg ai">
+              <div className="studio-msg-avatar">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
+              </div>
+              <div className="studio-msg-body">
+                <div className="studio-thinking">
+                  <span /><span /><span />
+                </div>
+              </div>
+            </div>
+          )}
           <div ref={messagesEnd} />
         </div>
 
-        <div className="chat-input-bar">
-          <input
-            value={input}
-            onChange={e => setInput(e.target.value)}
-            onKeyDown={handleKeyDown}
-            placeholder={t('studio.placeholder')}
-            disabled={loading}
-          />
-          <button className="primary" onClick={handleSend} disabled={loading || !input.trim()}>
-            {t('studio.send')}
-          </button>
+        <div className="studio-input-area">
+          <div className="studio-input-row">
+            <textarea
+              ref={textareaRef}
+              value={input}
+              onChange={e => setInput(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder={t('studio.placeholderNew')}
+              disabled={loading}
+              rows={1}
+            />
+            <button
+              className="studio-send-btn"
+              onClick={handleSend}
+              disabled={loading || !input.trim()}
+            >
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                <line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>
+              </svg>
+            </button>
+          </div>
+          <div className="studio-input-hint">
+            {t('studio.inputHint')}
+          </div>
         </div>
       </div>
 
-      <div className="split-right">
-        <div className="sidebar-nav">
-          {sidebarItems.map(item => (
-            <div
-              key={item.id}
-              className={`sidebar-tab ${sidebarPanel === item.id ? 'active' : ''}`}
-              onClick={() => setSidebarPanel(item.id)}
-            >
-              <span style={{ fontFamily: 'var(--font-mono)', width: 16 }}>{item.icon}</span>
-              {item.label}
-            </div>
-          ))}
+      <div className={`studio-sidebar ${showContext ? 'open' : ''}`}>
+        <div className="studio-sidebar-header">
+          <span>{t('studio.context')}</span>
+          <button className="ghost sm studio-sidebar-toggle" onClick={() => setShowContext(!showContext)}>
+            {showContext ? '\u203A' : '\u2039'}
+          </button>
         </div>
-
-        {sidebarPanel === 'chat' && (
-          <div>
-            <div className="section-title">{t('studio.commands')}</div>
-            <div style={{ fontSize: 12, fontFamily: 'var(--font-mono)', color: 'var(--text-tertiary)' }}>
-              {t('studio.planGoal')}<br />
-              {t('studio.help')}
-            </div>
-          </div>
-        )}
-
-        {sidebarPanel === 'agents' && (
-          <div>
-            <div className="section-title">{t('studio.activeAgents')}</div>
-            <div className="agent-card">
-              <div className="agent-avatar">C</div>
-              <div>
-                <div className="agent-name">{t('studio.crush')}</div>
-                <div className="agent-status">{t('studio.stopped')}</div>
-              </div>
-              <span className="badge neutral" style={{ marginLeft: 'auto' }}>{t('studio.inactive')}</span>
-            </div>
-            <div className="agent-card">
-              <div className="agent-avatar">CC</div>
-              <div>
-                <div className="agent-name">{t('studio.claudeCode')}</div>
-                <div className="agent-status">{t('studio.stopped')}</div>
-              </div>
-              <span className="badge neutral" style={{ marginLeft: 'auto' }}>{t('studio.inactive')}</span>
-            </div>
-          </div>
-        )}
-
-        {sidebarPanel === 'workflows' && (
-          <div>
-            <div className="section-title">{t('studio.workflows')}</div>
-            <div className="empty-state">
-              {t('studio.noWorkflow')}
-              <span style={{ fontFamily: 'var(--font-mono)' }}>{t('studio.usePlan')}</span>
-            </div>
-          </div>
+        {showContext && (
+          <ContextPanel
+            messages={messages}
+            selectedPlan={selectedPlan}
+            onSelectPlan={setSelectedPlan}
+          />
         )}
       </div>
     </div>