feat(web): add i18n support with FR/EN locales and keyboard layout awareness

Add full internationalization system with React context, French/English
translations, and AZERTY/QWERTY keyboard layout support. Dashboard now
uses a tabbed layout (Tools, Notifications, Workflows). Config page exposes
language and keyboard preferences persisted via new /api/preferences endpoint.

💕 Generated with Crush

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

.gitea/workflows/ci-develop.yml

@@ -35,8 +35,8 @@ jobs:
       - name: Cache Node modules
         uses: actions/cache@v4
         with:
-          path: cmd/muyue-desktop/frontend/node_modules
-          key: ${{ runner.os }}-node-${{ hashFiles('cmd/muyue-desktop/frontend/package-lock.json') }}
+          path: web/node_modules
+          key: ${{ runner.os }}-node-${{ hashFiles('web/package-lock.json') }}
           restore-keys: |
             ${{ runner.os }}-node-
 
@@ -45,7 +45,7 @@ jobs:
 
       - name: Build frontend
         run: |
-          cd cmd/muyue-desktop/frontend
+          cd web
           npm ci
           npm run build
 
@@ -68,7 +68,7 @@ jobs:
           echo "beta_num=${BETA_NUM}" >> $GITHUB_OUTPUT
           echo "Building beta release: ${VERSION}"
 
-      - name: Build CLI (all platforms)
+      - name: Build (all platforms)
         run: |
           mkdir -p dist
           VERSION=${{ steps.version.outputs.version }}
@@ -80,12 +80,6 @@ jobs:
           CGO_ENABLED=0 GOOS=windows GOARCH=amd64 go build -ldflags="$LDFLAGS" -o dist/muyue-windows-amd64.exe ./cmd/muyue/
           CGO_ENABLED=0 GOOS=windows GOARCH=arm64 go build -ldflags="$LDFLAGS" -o dist/muyue-windows-arm64.exe ./cmd/muyue/
 
-      - name: Build Desktop (linux amd64)
-        run: |
-          VERSION=${{ steps.version.outputs.version }}
-          LDFLAGS="-s -w -X github.com/muyue/muyue/internal/version.Prerelease=${VERSION#v}"
-          CGO_ENABLED=0 GOOS=linux GOARCH=amd64 go build -ldflags="$LDFLAGS" -o dist/muyue-desktop-linux-amd64 ./cmd/muyue-desktop/
-
       - name: Package archives
         run: |
           cd dist
@@ -94,10 +88,9 @@ jobs:
           tar czf muyue-linux-arm64.tar.gz muyue-linux-arm64
           tar czf muyue-darwin-amd64.tar.gz muyue-darwin-amd64
           tar czf muyue-darwin-arm64.tar.gz muyue-darwin-arm64
-          tar czf muyue-desktop-linux-amd64.tar.gz muyue-desktop-linux-amd64
           zip muyue-windows-amd64.zip muyue-windows-amd64.exe
           zip muyue-windows-arm64.zip muyue-windows-arm64.exe
-          rm -f muyue-linux-amd64 muyue-linux-arm64 muyue-darwin-amd64 muyue-darwin-arm64 muyue-windows-amd64.exe muyue-windows-arm64.exe muyue-desktop-linux-amd64
+          rm -f muyue-linux-amd64 muyue-linux-arm64 muyue-darwin-amd64 muyue-darwin-arm64 muyue-windows-amd64.exe muyue-windows-arm64.exe
 
       - name: Generate changelog
         id: changelog

.gitea/workflows/ci-main.yml

@@ -35,8 +35,8 @@ jobs:
       - name: Cache Node modules
         uses: actions/cache@v4
         with:
-          path: cmd/muyue-desktop/frontend/node_modules
-          key: ${{ runner.os }}-node-${{ hashFiles('cmd/muyue-desktop/frontend/package-lock.json') }}
+          path: web/node_modules
+          key: ${{ runner.os }}-node-${{ hashFiles('web/package-lock.json') }}
           restore-keys: |
             ${{ runner.os }}-node-
 
@@ -45,7 +45,7 @@ jobs:
 
       - name: Build frontend
         run: |
-          cd cmd/muyue-desktop/frontend
+          cd web
           npm ci
           npm run build
 
@@ -64,7 +64,7 @@ jobs:
           echo "base=${BASE_VERSION}" >> $GITHUB_OUTPUT
           echo "Building stable release: ${VERSION}"
 
-      - name: Build CLI (all platforms)
+      - name: Build (all platforms)
         run: |
           mkdir -p dist
           LDFLAGS="-s -w"
@@ -75,16 +75,6 @@ jobs:
           CGO_ENABLED=0 GOOS=windows GOARCH=amd64 go build -ldflags="$LDFLAGS" -o dist/muyue-windows-amd64.exe ./cmd/muyue/
           CGO_ENABLED=0 GOOS=windows GOARCH=arm64 go build -ldflags="$LDFLAGS" -o dist/muyue-windows-arm64.exe ./cmd/muyue/
 
-      - name: Build Desktop (all platforms)
-        run: |
-          LDFLAGS="-s -w"
-          CGO_ENABLED=0 GOOS=linux GOARCH=amd64 go build -ldflags="$LDFLAGS" -o dist/muyue-desktop-linux-amd64 ./cmd/muyue-desktop/
-          CGO_ENABLED=0 GOOS=linux GOARCH=arm64 go build -ldflags="$LDFLAGS" -o dist/muyue-desktop-linux-arm64 ./cmd/muyue-desktop/
-          CGO_ENABLED=0 GOOS=darwin GOARCH=amd64 go build -ldflags="$LDFLAGS" -o dist/muyue-desktop-darwin-amd64 ./cmd/muyue-desktop/
-          CGO_ENABLED=0 GOOS=darwin GOARCH=arm64 go build -ldflags="$LDFLAGS" -o dist/muyue-desktop-darwin-arm64 ./cmd/muyue-desktop/
-          CGO_ENABLED=0 GOOS=windows GOARCH=amd64 go build -ldflags="$LDFLAGS" -o dist/muyue-desktop-windows-amd64.exe ./cmd/muyue-desktop/
-          CGO_ENABLED=0 GOOS=windows GOARCH=arm64 go build -ldflags="$LDFLAGS" -o dist/muyue-desktop-windows-arm64.exe ./cmd/muyue-desktop/
-
       - name: Package archives
         run: |
           cd dist
@@ -93,15 +83,9 @@ jobs:
           tar czf muyue-linux-arm64.tar.gz muyue-linux-arm64
           tar czf muyue-darwin-amd64.tar.gz muyue-darwin-amd64
           tar czf muyue-darwin-arm64.tar.gz muyue-darwin-arm64
-          tar czf muyue-desktop-linux-amd64.tar.gz muyue-desktop-linux-amd64
-          tar czf muyue-desktop-linux-arm64.tar.gz muyue-desktop-linux-arm64
-          tar czf muyue-desktop-darwin-amd64.tar.gz muyue-desktop-darwin-amd64
-          tar czf muyue-desktop-darwin-arm64.tar.gz muyue-desktop-darwin-arm64
           zip muyue-windows-amd64.zip muyue-windows-amd64.exe
           zip muyue-windows-arm64.zip muyue-windows-arm64.exe
-          zip muyue-desktop-windows-amd64.zip muyue-desktop-windows-amd64.exe
-          zip muyue-desktop-windows-arm64.zip muyue-desktop-windows-arm64.exe
-          rm -f muyue-linux-amd64 muyue-linux-arm64 muyue-darwin-amd64 muyue-darwin-arm64 muyue-windows-amd64.exe muyue-windows-arm64.exe muyue-desktop-linux-amd64 muyue-desktop-linux-arm64 muyue-desktop-darwin-amd64 muyue-desktop-darwin-arm64 muyue-desktop-windows-amd64.exe muyue-desktop-windows-arm64.exe
+          rm -f muyue-linux-amd64 muyue-linux-arm64 muyue-darwin-amd64 muyue-darwin-arm64 muyue-windows-amd64.exe muyue-windows-arm64.exe
 
       - name: Generate changelog
         id: changelog
@@ -135,16 +119,8 @@ jobs:
             echo "| Windows x86_64 | [muyue-windows-amd64.zip](${DL_URL}/muyue-windows-amd64.zip) |"
             echo "| Windows ARM64 | [muyue-windows-arm64.zip](${DL_URL}/muyue-windows-arm64.zip) |"
             echo ""
-            echo "### Downloads (Desktop)"
-            echo ""
-            echo "| Platform | File |"
-            echo "|----------|------|"
-            echo "| Linux x86_64 | [muyue-desktop-linux-amd64.tar.gz](${DL_URL}/muyue-desktop-linux-amd64.tar.gz) |"
-            echo "| Linux ARM64 | [muyue-desktop-linux-arm64.tar.gz](${DL_URL}/muyue-desktop-linux-arm64.tar.gz) |"
-            echo "| macOS Intel | [muyue-desktop-darwin-amd64.tar.gz](${DL_URL}/muyue-desktop-darwin-amd64.tar.gz) |"
-            echo "| macOS Apple Silicon | [muyue-desktop-darwin-arm64.tar.gz](${DL_URL}/muyue-desktop-darwin-arm64.tar.gz) |"
-            echo "| Windows x86_64 | [muyue-desktop-windows-amd64.zip](${DL_URL}/muyue-desktop-windows-amd64.zip) |"
-            echo "| Windows ARM64 | [muyue-desktop-windows-arm64.zip](${DL_URL}/muyue-desktop-windows-arm64.zip) |"
+            echo "The binary includes both CLI and Desktop modes."
+            echo "Run \`muyue\` for TUI, \`muyue desktop\` for web UI."
             echo ""
             echo "### Install"
             echo ""

.gitea/workflows/ci-pr.yml

@@ -33,8 +33,8 @@ jobs:
       - name: Cache Node modules
         uses: actions/cache@v4
         with:
-          path: cmd/muyue-desktop/frontend/node_modules
-          key: ${{ runner.os }}-node-${{ hashFiles('cmd/muyue-desktop/frontend/package-lock.json') }}
+          path: web/node_modules
+          key: ${{ runner.os }}-node-${{ hashFiles('web/package-lock.json') }}
           restore-keys: |
             ${{ runner.os }}-node-
 
@@ -43,7 +43,7 @@ jobs:
 
       - name: Build frontend
         run: |
-          cd cmd/muyue-desktop/frontend
+          cd web
           npm ci
           npm run build
 
@@ -56,5 +56,4 @@ jobs:
       - name: Build
         run: |
           go build -o muyue ./cmd/muyue/
-          go build -o muyue-desktop ./cmd/muyue-desktop/
           ./muyue version

.gitignore

@@ -28,4 +28,6 @@ vendor/
 
 # Config with secrets
 .muyue/
-frontend/node_modules/
+
+# Frontend (web/.gitignore handles specifics)
+web/node_modules/

Makefile

@@ -3,10 +3,16 @@ GOBIN ?= $(GOPATH)/bin
 BINARY = muyue
 BUILD_DIR = .
 GO = go
+NODE ?= node
+NPM ?= npm
+WEB_DIR = web
 
-.PHONY: build install clean test test-short run scan fmt lint build-all deps vet
+.PHONY: build install clean test test-short run scan fmt lint build-all deps vet frontend dev-desktop
 
-build:
+frontend:
+	cd $(WEB_DIR) && $(NPM) ci && $(NPM) run build
+
+build: frontend
 	$(GO) build -o $(BUILD_DIR)/$(BINARY) ./cmd/muyue/
 
 install: build
@@ -18,6 +24,8 @@ install-local: build
 
 clean:
 	rm -f $(BUILD_DIR)/$(BINARY)
+	rm -rf $(WEB_DIR)/dist
+	rm -rf $(WEB_DIR)/node_modules
 
 test:
 	$(GO) test ./... -v -count=1
@@ -31,6 +39,12 @@ vet:
 run: build
 	./$(BINARY)
 
+desktop: build
+	./$(BINARY) desktop
+
+dev-desktop:
+	cd $(WEB_DIR) && $(NPM) run dev
+
 scan: build
 	./$(BINARY) scan
 
@@ -41,7 +55,7 @@ fmt:
 lint:
 	which golangci-lint > /dev/null 2>&1 && golangci-lint run || true
 
-build-all:
+build-all: frontend
 	GOOS=linux GOARCH=amd64 $(GO) build -o dist/$(BINARY)-linux-amd64 ./cmd/muyue/
 	GOOS=linux GOARCH=arm64 $(GO) build -o dist/$(BINARY)-linux-arm64 ./cmd/muyue/
 	GOOS=darwin GOARCH=amd64 $(GO) build -o dist/$(BINARY)-darwin-amd64 ./cmd/muyue/

cmd/muyue-desktop/frontend/package.json

@@ -1,26 +0,0 @@
-{
-  "name": "frontend",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "type": "commonjs",
-  "dependencies": {
-    "@xterm/addon-fit": "^0.11.0",
-    "@xterm/xterm": "^6.0.0",
-    "react": "^19.2.5",
-    "react-dom": "^19.2.5",
-    "xterm": "^5.3.0"
-  },
-  "devDependencies": {
-    "@vitejs/plugin-react": "^6.0.1",
-    "vite": "^8.0.9"
-  }
-}

cmd/muyue-desktop/frontend/src/components/App.jsx

@@ -1,105 +0,0 @@
-import { useState, useEffect, useCallback } from 'react'
-import { useAPI } from '../hooks/useAPI'
-import { getTheme, getThemeNames, applyTheme } from '../themes'
-import Dashboard from './Dashboard'
-import Studio from './Studio'
-import Shell from './Shell'
-import Config from './Config'
-
-const TABS = [
-  { id: 'dash', label: 'DASH', icon: '[■]' },
-  { id: 'studio', label: 'STUDIO', icon: '[<>]' },
-  { id: 'shell', label: 'SHELL', icon: '[$]' },
-  { id: 'config', label: 'CONFIG', icon: '[//]' },
-]
-
-export default function App() {
-  const [activeTab, setActiveTab] = useState('dash')
-  const [info, setInfo] = useState({})
-  const [clock, setClock] = useState(new Date())
-  const [updates, setUpdates] = useState([])
-  const [tools, setTools] = useState([])
-  const [transition, setTransition] = useState(false)
-  const [currentTheme, setCurrentTheme] = useState('cyberpunk-red')
-  const api = useAPI()
-
-  useEffect(() => {
-    api.getInfo().then(setInfo).catch(() => {})
-    api.getTools().then(d => setTools(d.tools || [])).catch(() => {})
-    api.getUpdates().then(d => setUpdates(d.updates || [])).catch(() => {})
-
-    const theme = getTheme(currentTheme)
-    applyTheme(theme)
-  }, [])
-
-  useEffect(() => {
-    const timer = setInterval(() => setClock(new Date()), 1000)
-    return () => clearInterval(timer)
-  }, [])
-
-  const switchTab = useCallback((tabId) => {
-    if (tabId === activeTab) return
-    setTransition(true)
-    setTimeout(() => {
-      setActiveTab(tabId)
-      setTimeout(() => setTransition(false), 150)
-    }, 100)
-  }, [activeTab])
-
-  const hasUpdates = updates.some(u => u.needsUpdate)
-
-  const renderContent = () => {
-    switch (activeTab) {
-      case 'dash': return <Dashboard tools={tools} updates={updates} api={api} onRescan={(t) => setTools(t)} />
-      case 'studio': return <Studio api={api} />
-      case 'shell': return <Shell api={api} />
-      case 'config': return <Config api={api} theme={currentTheme} onThemeChange={setCurrentTheme} />
-      default: return null
-    }
-  }
-
-  return (
-    <div className="app-layout">
-      <header className="header">
-        <span className="header-logo">MUYUE</span>
-        <span className="header-version">v{info.version || '...'}</span>
-
-        <div className="header-tabs">
-          {TABS.map(tab => (
-            <div
-              key={tab.id}
-              className={`header-tab ${activeTab === tab.id ? 'active' : ''}`}
-              onClick={() => switchTab(tab.id)}
-            >
-              {tab.icon} {tab.label}
-            </div>
-          ))}
-        </div>
-
-        <div className="header-spacer" />
-
-        <div className="header-status">
-          <span className={`status-dot ${tools.length > 0 ? 'ok' : 'off'}`} title="System" />
-          <span className={`status-dot ${hasUpdates ? 'warn' : 'ok'}`} title="Updates" />
-        </div>
-
-        <span className="header-date">{clock.toLocaleDateString('fr-FR')}</span>
-        <span className="header-clock">{clock.toLocaleTimeString('fr-FR')}</span>
-      </header>
-
-      <div className={`content ${transition ? 'glitch-text' : 'fade-in tab-transition'}`}>
-        {renderContent()}
-      </div>
-
-      <footer className="footer">
-        <span className="footer-shortcuts">
-          <kbd>1-4</kbd> tabs · <kbd>Ctrl+T</kbd> switcher · <kbd>Ctrl+C</kbd> quit
-        </span>
-        <span className={`footer-update ${hasUpdates ? 'available' : 'uptodate'}`}>
-          {hasUpdates ? '[UPD] Updates available' : '[OK] Up to date'}
-        </span>
-        <span className="footer-version">v{info.version || '...'}</span>
-      </footer>
-    </div>
-  )
-}

cmd/muyue-desktop/frontend/src/components/Config.jsx

@@ -1,98 +0,0 @@
-import { useState, useEffect } from 'react'
-import { getThemeNames, applyTheme, getTheme } from '../themes'
-
-export default function Config({ api, theme, onThemeChange }) {
-  const [config, setConfig] = useState(null)
-  const [providers, setProviders] = useState([])
-  const [skillList, setSkillList] = useState([])
-
-  useEffect(() => {
-    api.getConfig().then(d => setConfig(d)).catch(() => {})
-    api.getProviders().then(d => setProviders(d.providers || [])).catch(() => {})
-    api.getSkills().then(d => setSkillList(d.skills || [])).catch(() => {})
-  }, [])
-
-  const themes = getThemeNames()
-
-  const handleThemeChange = (themeId) => {
-    const t = getTheme(themeId)
-    applyTheme(t)
-    onThemeChange(themeId)
-  }
-
-  return (
-    <div className="config-container">
-      <div className="config-section">
-        <div className="section-header">Profile</div>
-        {config?.profile && (
-          <div>
-            <Field label="Name" value={config.profile.name} />
-            <Field label="Pseudo" value={config.profile.pseudo} />
-            <Field label="Email" value={config.profile.email} />
-            <Field label="Editor" value={config.profile.preferences?.editor} />
-            <Field label="Shell" value={config.profile.preferences?.shell} />
-            <Field label="Default AI" value={config.profile.preferences?.defaultAI} />
-            <Field label="Languages" value={config.profile.languages?.join(', ')} />
-          </div>
-        )}
-      </div>
-
-      <div className="config-section">
-        <div className="section-header">AI Providers</div>
-        {providers.map((p, i) => (
-          <div key={i} className="config-field" style={{ flexDirection: 'column', alignItems: 'flex-start', gap: 4 }}>
-            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-              <span style={{ color: 'var(--text-bright)', fontWeight: 700 }}>{p.name}</span>
-              {p.active && <span style={{ color: 'var(--cyber-red)', fontSize: 11, fontWeight: 700 }}>{'>>'}</span>}
-            </div>
-            <div style={{ display: 'flex', gap: 16, fontSize: 12 }}>
-              <span style={{ color: 'var(--dim-red)' }}>model={p.model}</span>
-              <span style={{ color: p.apiKey ? 'var(--success)' : 'var(--error)' }}>
-                key={p.apiKey ? 'configured' : 'no key'}
-              </span>
-            </div>
-          </div>
-        ))}
-      </div>
-
-      <div className="config-section">
-        <div className="section-header">Theme</div>
-        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
-          {themes.map(t => (
-            <button
-              key={t.id}
-              className={theme === t.id ? 'primary' : ''}
-              onClick={() => handleThemeChange(t.id)}
-            >
-              {t.name}
-            </button>
-          ))}
-        </div>
-      </div>
-
-      <div className="config-section">
-        <div className="section-header">Skills ({skillList.length})</div>
-        {skillList.length === 0 ? (
-          <span style={{ color: 'var(--text-muted)', fontSize: 12 }}>No skills. Run `muyue skills init`.</span>
-        ) : (
-          skillList.map((s, i) => (
-            <div key={i} className="tool-item">
-              <span className="tool-name">{s.name}</span>
-              <span style={{ color: 'var(--cyber-red)', fontSize: 11 }}>[{s.target || 'both'}]</span>
-              <span style={{ color: 'var(--dim-red)', fontSize: 11 }}>{s.description}</span>
-            </div>
-          ))
-        )}
-      </div>
-    </div>
-  )
-}
-
-function Field({ label, value }) {
-  return (
-    <div className="config-field">
-      <span className="config-label">{label}:</span>
-      <span className="config-value">{value || '-'}</span>
-    </div>
-  )
-}

cmd/muyue-desktop/frontend/src/components/Dashboard.jsx

@@ -1,121 +0,0 @@
-import { useState, useEffect } from 'react'
-
-export default function Dashboard({ tools, updates, api, onRescan }) {
-  const [installing, setInstalling] = useState(false)
-  const [installLog, setInstallLog] = useState([])
-
-  const installed = tools.filter(t => t.installed).length
-  const total = tools.length
-  const pct = total > 0 ? (installed / total) * 100 : 0
-  const missing = tools.filter(t => !t.installed).map(t => t.Name || t.name)
-
-  const handleInstall = async () => {
-    if (missing.length === 0) return
-    setInstalling(true)
-    setInstallLog(prev => [...prev, { text: `Installing ${missing.length} tools...`, type: 'info' }])
-    try {
-      await api.installTools(missing)
-      setInstallLog(prev => [...prev, { text: 'Install started. Rescan to see changes.', type: 'ok' }])
-      const data = await api.runScan()
-      const toolData = await api.getTools()
-      onRescan(toolData.tools || [])
-    } catch (err) {
-      setInstallLog(prev => [...prev, { text: err.message, type: 'error' }])
-    }
-    setInstalling(false)
-  }
-
-  const handleScan = async () => {
-    await api.runScan()
-    const data = await api.getTools()
-    onRescan(data.tools || [])
-  }
-
-  return (
-    <div className="grid-2">
-      <div style={{ overflow: 'auto', padding: '4px' }}>
-        <div className="section-header">System</div>
-        <div style={{ marginBottom: 16 }}>
-          <span style={{ color: 'var(--text-main)' }}>{installed}/{total} tools installed</span>
-        </div>
-
-        <div className="section-header">Installed Tools</div>
-        <div style={{ marginBottom: 8 }}>
-          {tools.map((t, i) => (
-            <div key={i} className="tool-item">
-              <span className={`tool-status ${t.installed ? 'ok' : 'missing'}`}>
-                {t.installed ? '[OK]' : '[--]'}
-              </span>
-              <span className="tool-name">{t.Name || t.name}</span>
-              {(t.Version || t.version) && (
-                <span className="tool-version">{extractVersion(t.Version || t.version)}</span>
-              )}
-            </div>
-          ))}
-        </div>
-
-        <div className="progress-bar" style={{ marginBottom: 16 }}>
-          <div className="progress-fill" style={{ width: `${pct}%` }} />
-        </div>
-
-        {installing && (
-          <div style={{ marginBottom: 16 }}>
-            <span className="loading-spinner"> Installing...</span>
-          </div>
-        )}
-
-        {installLog.length > 0 && (
-          <div>
-            <div className="section-header">Install Log</div>
-            {installLog.map((log, i) => (
-              <div key={i} style={{
-                color: log.type === 'error' ? 'var(--error)' :
-                       log.type === 'ok' ? 'var(--success)' : 'var(--text-dim)',
-                fontSize: 12, padding: '2px 0'
-              }}>
-                {log.text}
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-
-      <div style={{ overflow: 'auto', padding: '4px' }}>
-        <div className="section-header">Quick Actions</div>
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginBottom: 16 }}>
-          <button onClick={handleInstall} disabled={installing || missing.length === 0}>
-            [i] Install missing ({missing.length})
-          </button>
-          <button onClick={() => api.getUpdates().then(d => {})}> [u] Check updates</button>
-          <button onClick={handleScan}>[s] Rescan system</button>
-          <button onClick={() => api.configureMCP()}>[m] Configure MCP</button>
-        </div>
-
-        <div className="section-header">Updates</div>
-        <div style={{ marginBottom: 16 }}>
-          {updates.length === 0 ? (
-            <span style={{ color: 'var(--text-muted)' }}>No update data yet</span>
-          ) : updates.map((u, i) => (
-            <div key={i} className="tool-item">
-              <span className={`tool-status ${u.needsUpdate ? 'missing' : 'ok'}`}>
-                {u.needsUpdate ? '[!!]' : '[OK]'}
-              </span>
-              <span className="tool-name">{u.tool}</span>
-              {u.needsUpdate && (
-                <span style={{ color: 'var(--warning)', fontSize: 11 }}>
-                  {u.current} → {u.latest}
-                </span>
-              )}
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-function extractVersion(s) {
-  if (!s) return ''
-  const m = s.match(/\d+\.\d+\.\d+/)
-  return m ? m[0] : s.slice(0, 12)
-}

cmd/muyue-desktop/frontend/src/components/Shell.jsx

@@ -1,150 +0,0 @@
-import { useState, useRef, useEffect } from 'react'
-
-export default function Shell({ api }) {
-  const [history, setHistory] = useState([])
-  const [input, setInput] = useState('')
-  const [cwd, setCwd] = useState('~')
-  const [aiPanel, setAiPanel] = useState(true)
-  const [aiMessages, setAiMessages] = useState([
-    { role: 'ai', content: '>> I know your system inside out. Ask me anything.' }
-  ])
-  const [aiInput, setAiInput] = useState('')
-  const [aiLoading, setAiLoading] = useState(false)
-  const outputRef = useRef(null)
-
-  useEffect(() => {
-    outputRef.current?.scrollTo(0, outputRef.current.scrollHeight)
-  }, [history])
-
-  const handleCommand = async (cmd) => {
-    if (!cmd.trim()) return
-    if (cmd === 'clear') {
-      setHistory([])
-      return
-    }
-    if (cmd === 'exit' || cmd === 'quit') return
-
-    setHistory(prev => [...prev, { type: 'input', text: `${cwd} $ ${cmd}` }])
-
-    try {
-      const res = await api.runCommand(cmd, cwd === '~' ? '' : cwd)
-      if (res.output) {
-        setHistory(prev => [...prev, { type: 'output', text: res.output }])
-      }
-      if (res.error) {
-        setHistory(prev => [...prev, { type: 'error', text: res.error }])
-      }
-      if (cmd.startsWith('cd ')) {
-        const dir = cmd.slice(3).trim()
-        setCwd(dir === '~' ? '~' : dir)
-      }
-    } catch (err) {
-      setHistory(prev => [...prev, { type: 'error', text: err.message }])
-    }
-  }
-
-  const handleKeyDown = (e) => {
-    if (e.key === 'Enter') {
-      e.preventDefault()
-      handleCommand(input)
-      setInput('')
-    }
-  }
-
-  const handleAiSend = async () => {
-    if (!aiInput.trim() || aiLoading) return
-    const text = aiInput.trim()
-    setAiMessages(prev => [...prev, { role: 'user', content: '>> ' + text }])
-    setAiInput('')
-    setAiLoading(true)
-
-    try {
-      const res = await api.runCommand(`echo "AI: ${text}"`, '')
-      setAiMessages(prev => [...prev, { role: 'ai', content: '>> ' + (res.output || 'No response') }])
-    } catch (err) {
-      setAiMessages(prev => [...prev, { role: 'ai', content: '[ERROR] ' + err.message }])
-    }
-    setAiLoading(false)
-  }
-
-  return (
-    <div className="split-horizontal" style={{ height: '100%' }}>
-      <div className="terminal-container" style={{ flex: 1 }}>
-        <div style={{ padding: '8px 12px', borderBottom: '1px solid var(--border-dim)' }}>
-          <div className="section-header" style={{ margin: 0 }}>
-            Terminal
-            <span style={{ color: 'var(--dim-red)', fontWeight: 400, marginLeft: 12, fontSize: 11 }}>{cwd}</span>
-          </div>
-        </div>
-
-        <div className="terminal-output" ref={outputRef}>
-          {history.map((line, i) => (
-            <div key={i} style={{
-              color: line.type === 'input' ? 'var(--dim-red)' :
-                     line.type === 'error' ? 'var(--error)' : 'var(--text-main)',
-              whiteSpace: 'pre-wrap',
-              fontFamily: 'var(--font-mono)',
-              fontSize: 13,
-              lineHeight: 1.4,
-            }}>
-              {line.text}
-            </div>
-          ))}
-        </div>
-
-        <div className="terminal-input-row">
-          <span className="terminal-prompt">{'>'}</span>
-          <input
-            className="terminal-input"
-            value={input}
-            onChange={e => setInput(e.target.value)}
-            onKeyDown={handleKeyDown}
-            autoFocus
-          />
-        </div>
-      </div>
-
-      {aiPanel && (
-        <div style={{
-          width: 320,
-          borderLeft: '1px solid var(--border-dim)',
-          background: 'var(--bg-surface)',
-          display: 'flex',
-          flexDirection: 'column',
-        }}>
-          <div style={{ padding: '8px 12px', borderBottom: '1px solid var(--border-dim)' }}>
-            <div className="section-header" style={{ margin: 0 }}>AI Assistant</div>
-          </div>
-
-          <div style={{ flex: 1, overflow: 'auto', padding: 12 }}>
-            {aiMessages.map((msg, i) => (
-              <div key={i} style={{
-                marginBottom: 8,
-                padding: '6px 8px',
-                borderRadius: 'var(--radius)',
-                background: msg.role === 'ai' ? 'var(--bg-card)' : 'var(--muted-red)',
-                borderLeft: `3px solid ${msg.role === 'ai' ? 'var(--cyber-red)' : 'var(--cyber-rose)'}`,
-                fontSize: 12,
-                lineHeight: 1.4,
-              }}>
-                {msg.content}
-              </div>
-            ))}
-            {aiLoading && <span className="loading-spinner"> thinking...</span>}
-          </div>
-
-          <div style={{ padding: '8px 12px', borderTop: '1px solid var(--border-dim)', display: 'flex', gap: 6 }}>
-            <input
-              style={{ flex: 1, padding: '4px 8px', fontSize: 12 }}
-              value={aiInput}
-              onChange={e => setAiInput(e.target.value)}
-              onKeyDown={e => e.key === 'Enter' && handleAiSend()}
-              placeholder="Ask AI..."
-            />
-            <button style={{ padding: '4px 8px' }} onClick={handleAiSend}>Send</button>
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}

cmd/muyue-desktop/frontend/src/components/Studio.jsx

@@ -1,126 +0,0 @@
-import { useState, useRef, useEffect } from 'react'
-
-export default function Studio({ api }) {
-  const [messages, setMessages] = useState([
-    { role: 'ai', content: '>> Welcome to Studio! Chat with your AI assistant here.' },
-    { role: 'ai', content: '>> Configure agents and workflows from the sidebar.' },
-  ])
-  const [input, setInput] = useState('')
-  const [sidebarPanel, setSidebarPanel] = useState('chat')
-  const [loading, setLoading] = useState(false)
-  const messagesEnd = useRef(null)
-
-  useEffect(() => {
-    messagesEnd.current?.scrollIntoView({ behavior: 'smooth' })
-  }, [messages])
-
-  const handleSend = () => {
-    if (!input.trim() || loading) return
-    const text = input.trim()
-    setMessages(prev => [...prev, { role: 'user', content: '>> ' + text }])
-    setInput('')
-    setLoading(true)
-
-    api.runCommand(`echo "AI response simulation for: ${text}"`, '')
-      .then(res => {
-        setMessages(prev => [...prev, { role: 'ai', content: '>> ' + (res.output || res.error || 'No response') }])
-      })
-      .catch(err => {
-        setMessages(prev => [...prev, { role: 'ai', content: '[ERROR] ' + err.message }])
-      })
-      .finally(() => setLoading(false))
-  }
-
-  const handleKeyDown = (e) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault()
-      handleSend()
-    }
-  }
-
-  return (
-    <div className="split-horizontal">
-      <div className="chat-container" style={{ flex: 1, borderRight: '1px solid var(--border-dim)' }}>
-        <div style={{ padding: '12px 16px', borderBottom: '1px solid var(--border-dim)' }}>
-          <div className="section-header" style={{ margin: 0 }}>
-            Chat
-            {loading && <span className="loading-spinner" style={{ marginLeft: 8 }}> thinking...</span>}
-          </div>
-        </div>
-
-        <div className="chat-messages">
-          {messages.map((msg, i) => (
-            <div key={i} className={`chat-message ${msg.role}`}>
-              {msg.content}
-            </div>
-          ))}
-          <div ref={messagesEnd} />
-        </div>
-
-        <div className="chat-input-container">
-          <input
-            className="chat-input"
-            value={input}
-            onChange={e => setInput(e.target.value)}
-            onKeyDown={handleKeyDown}
-            placeholder="Type a message... (/plan <goal> for workflows)"
-            disabled={loading}
-          />
-          <button className="primary" onClick={handleSend} disabled={loading || !input.trim()}>
-            Send
-          </button>
-        </div>
-      </div>
-
-      <div className="split-right">
-        <div className="sidebar-section">
-          <div className="section-header">Studio</div>
-          {['chat', 'agents', 'workflows'].map(panel => (
-            <div
-              key={panel}
-              className={`sidebar-item ${sidebarPanel === panel ? 'active' : ''}`}
-              onClick={() => setSidebarPanel(panel)}
-            >
-              [{panel === 'chat' ? '#' : panel === 'agents' ? '*' : '~'}] {panel.charAt(0).toUpperCase() + panel.slice(1)}
-            </div>
-          ))}
-        </div>
-
-        <div style={{ borderTop: '1px solid var(--border-dim)', paddingTop: 12 }}>
-          {sidebarPanel === 'chat' && (
-            <div>
-              <div style={{ color: 'var(--text-muted)', fontSize: 12, marginBottom: 8 }}>Commands</div>
-              <div style={{ color: 'var(--dim-red)', fontSize: 12, fontFamily: 'var(--font-mono)' }}>
-                /plan {'<goal>'}<br/>
-                /help
-              </div>
-            </div>
-          )}
-
-          {sidebarPanel === 'agents' && (
-            <div>
-              <div style={{ color: 'var(--text-muted)', fontSize: 12, marginBottom: 8 }}>Active Agents</div>
-              <div style={{ padding: '4px 0' }}>
-                <span style={{ color: 'var(--text-main)', fontWeight: 600 }}>Crush</span>
-                <span style={{ color: 'var(--text-muted)', marginLeft: 8, fontSize: 11 }}>[|| stopped]</span>
-              </div>
-              <div style={{ padding: '4px 0' }}>
-                <span style={{ color: 'var(--text-main)', fontWeight: 600 }}>Claude Code</span>
-                <span style={{ color: 'var(--text-muted)', marginLeft: 8, fontSize: 11 }}>[|| stopped]</span>
-              </div>
-            </div>
-          )}
-
-          {sidebarPanel === 'workflows' && (
-            <div>
-              <div style={{ color: 'var(--text-muted)', fontSize: 12 }}>No active workflow.</div>
-              <div style={{ color: 'var(--dim-red)', fontSize: 12, marginTop: 8 }}>
-                Use /plan {'<goal>'} in chat to start.
-              </div>
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}

cmd/muyue-desktop/frontend/src/hooks/useAPI.js

@@ -1,31 +0,0 @@
-const API_BASE = '/api'
-
-async function request(path, options = {}) {
-  const res = await fetch(`${API_BASE}${path}`, {
-    headers: { 'Content-Type': 'application/json' },
-    ...options,
-  })
-  if (!res.ok) {
-    const err = await res.json().catch(() => ({ error: res.statusText }))
-    throw new Error(err.error || res.statusText)
-  }
-  return res.json()
-}
-
-export function useAPI() {
-  return {
-    getInfo: () => request('/info'),
-    getSystem: () => request('/system'),
-    getTools: () => request('/tools'),
-    getConfig: () => request('/config'),
-    getProviders: () => request('/providers'),
-    getSkills: () => request('/skills'),
-    getLSP: () => request('/lsp'),
-    getMCP: () => request('/mcp'),
-    getUpdates: () => request('/updates'),
-    runScan: () => request('/scan', { method: 'POST' }),
-    installTools: (tools) => request('/install', { method: 'POST', body: JSON.stringify({ tools }) }),
-    configureMCP: () => request('/mcp/configure', { method: 'POST' }),
-    runCommand: (command, cwd) => request('/terminal', { method: 'POST', body: JSON.stringify({ command, cwd }) }),
-  }
-}

cmd/muyue-desktop/frontend/src/styles/global.css

@@ -1,576 +0,0 @@
-:root {
-  --bg-void: #0A0A0C;
-  --bg-base: #0F0D10;
-  --bg-surface: #161218;
-  --bg-panel: #1C1719;
-  --bg-card: #221B1E;
-  --bg-input: #2A2225;
-  --bg-hover: #332528;
-
-  --cyber-red: #FF0033;
-  --cyber-red-dark: #8B0020;
-  --cyber-red-deep: #5C0015;
-  --cyber-pink: #FF1A5E;
-  --cyber-rose: #FF4D6D;
-  --neon-red: #FF1744;
-  --bright-red: #FF5252;
-  --dim-red: #6B2033;
-  --muted-red: #4A1525;
-
-  --text-bright: #EAE0E2;
-  --text-main: #D4C4C8;
-  --text-dim: #8A7A7E;
-  --text-muted: #5A4F52;
-
-  --success: #00E676;
-  --warning: #FFD740;
-  --error: #FF1744;
-
-  --border-dim: #2A1F22;
-  --border-red: #FF003344;
-  --border-red-full: #FF0033;
-
-  --radius: 8px;
-  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', 'Menlo', monospace;
-  --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
-
-  --header-h: 48px;
-  --footer-h: 32px;
-  --tab-h: 40px;
-}
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-html, body, #root {
-  height: 100%;
-  width: 100%;
-  overflow: hidden;
-}
-
-body {
-  background: var(--bg-void);
-  color: var(--text-main);
-  font-family: var(--font-ui);
-  font-size: 13px;
-  -webkit-font-smoothing: antialiased;
-  user-select: none;
-}
-
-::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  background: var(--dim-red);
-  border-radius: 3px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: var(--cyber-red-dark);
-}
-
-::selection {
-  background: var(--cyber-red);
-  color: #fff;
-}
-
-a {
-  color: var(--cyber-red);
-  text-decoration: none;
-}
-
-a:hover {
-  color: var(--cyber-pink);
-}
-
-input, textarea {
-  font-family: var(--font-mono);
-  font-size: 13px;
-  background: var(--bg-input);
-  color: var(--text-main);
-  border: 1px solid var(--border-dim);
-  border-radius: var(--radius);
-  padding: 8px 12px;
-  outline: none;
-  transition: border-color 0.2s;
-}
-
-input:focus, textarea:focus {
-  border-color: var(--cyber-red);
-  box-shadow: 0 0 0 2px var(--border-red);
-}
-
-button {
-  font-family: var(--font-ui);
-  font-size: 12px;
-  font-weight: 600;
-  padding: 6px 14px;
-  border-radius: var(--radius);
-  border: 1px solid var(--border-dim);
-  background: var(--bg-card);
-  color: var(--text-main);
-  cursor: pointer;
-  transition: all 0.15s;
-}
-
-button:hover {
-  background: var(--bg-hover);
-  border-color: var(--cyber-red-dark);
-}
-
-button.primary {
-  background: var(--cyber-red);
-  color: #fff;
-  border-color: var(--cyber-red);
-}
-
-button.primary:hover {
-  background: var(--neon-red);
-}
-
-.app-layout {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  width: 100vw;
-  overflow: hidden;
-}
-
-.header {
-  height: var(--header-h);
-  background: var(--bg-surface);
-  border-bottom: 1px solid var(--border-dim);
-  display: flex;
-  align-items: center;
-  padding: 0 16px;
-  gap: 16px;
-  flex-shrink: 0;
-}
-
-.header-logo {
-  font-family: var(--font-mono);
-  font-weight: 900;
-  font-size: 16px;
-  color: var(--cyber-red);
-  letter-spacing: 2px;
-}
-
-.header-version {
-  font-size: 11px;
-  color: var(--dim-red);
-}
-
-.header-tabs {
-  display: flex;
-  gap: 2px;
-  margin-left: 24px;
-}
-
-.header-tab {
-  padding: 6px 16px;
-  border-radius: var(--radius) var(--radius) 0 0;
-  font-size: 12px;
-  font-weight: 600;
-  letter-spacing: 1px;
-  color: var(--text-dim);
-  cursor: pointer;
-  transition: all 0.15s;
-  border: 1px solid transparent;
-  border-bottom: none;
-  text-transform: uppercase;
-  background: transparent;
-}
-
-.header-tab:hover {
-  color: var(--text-main);
-  background: var(--bg-card);
-}
-
-.header-tab.active {
-  color: #fff;
-  background: var(--cyber-red);
-  border-color: var(--cyber-red);
-}
-
-.header-spacer {
-  flex: 1;
-}
-
-.header-status {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-}
-
-.status-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  display: inline-block;
-}
-
-.status-dot.ok { background: var(--success); }
-.status-dot.warn { background: var(--warning); }
-.status-dot.error { background: var(--error); }
-.status-dot.off { background: var(--text-muted); }
-
-.header-clock {
-  font-family: var(--font-mono);
-  font-size: 12px;
-  color: var(--cyber-red);
-  font-weight: 700;
-}
-
-.header-date {
-  font-size: 11px;
-  color: var(--text-muted);
-}
-
-.content {
-  flex: 1;
-  overflow: hidden;
-}
-
-.footer {
-  height: var(--footer-h);
-  background: var(--bg-surface);
-  border-top: 1px solid var(--border-dim);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 16px;
-  flex-shrink: 0;
-}
-
-.footer-shortcuts {
-  font-size: 11px;
-  color: var(--text-muted);
-}
-
-.footer-shortcuts kbd {
-  background: var(--bg-card);
-  border: 1px solid var(--border-dim);
-  border-radius: 3px;
-  padding: 1px 5px;
-  font-family: var(--font-mono);
-  font-size: 10px;
-  color: var(--text-dim);
-}
-
-.footer-version {
-  font-size: 11px;
-  color: var(--dim-red);
-}
-
-.footer-update {
-  font-size: 11px;
-  font-weight: 600;
-}
-
-.footer-update.available {
-  color: var(--warning);
-}
-
-.footer-update.uptodate {
-  color: var(--success);
-}
-
-.card {
-  background: var(--bg-card);
-  border: 1px solid var(--border-dim);
-  border-radius: var(--radius);
-  padding: 16px;
-  transition: border-color 0.2s;
-}
-
-.card:hover {
-  border-color: var(--dim-red);
-}
-
-.card-title {
-  font-family: var(--font-mono);
-  font-weight: 700;
-  font-size: 13px;
-  color: var(--cyber-red);
-  margin-bottom: 12px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.section-header {
-  font-family: var(--font-mono);
-  font-weight: 700;
-  font-size: 13px;
-  color: var(--cyber-red);
-  margin-bottom: 8px;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.section-header::before {
-  content: '■';
-  font-size: 10px;
-}
-
-.tool-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 4px 0;
-  font-size: 13px;
-}
-
-.tool-status {
-  font-family: var(--font-mono);
-  font-weight: 700;
-  font-size: 11px;
-  width: 36px;
-}
-
-.tool-status.ok { color: var(--success); }
-.tool-status.missing { color: var(--error); }
-
-.tool-name {
-  color: var(--text-main);
-}
-
-.tool-version {
-  color: var(--dim-red);
-  font-size: 11px;
-}
-
-.progress-bar {
-  height: 6px;
-  background: var(--bg-input);
-  border-radius: 3px;
-  overflow: hidden;
-}
-
-.progress-fill {
-  height: 100%;
-  background: linear-gradient(90deg, var(--cyber-red), var(--cyber-pink));
-  border-radius: 3px;
-  transition: width 0.3s;
-}
-
-.grid-2 {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 16px;
-  height: 100%;
-  padding: 16px;
-}
-
-.split-horizontal {
-  display: flex;
-  height: 100%;
-}
-
-.split-left {
-  flex: 1;
-  overflow: auto;
-}
-
-.split-right {
-  width: 320px;
-  border-left: 1px solid var(--border-dim);
-  background: var(--bg-surface);
-  overflow: auto;
-  padding: 16px;
-}
-
-.chat-container {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  padding: 16px;
-}
-
-.chat-messages {
-  flex: 1;
-  overflow-y: auto;
-  padding-bottom: 8px;
-}
-
-.chat-message {
-  margin-bottom: 12px;
-  padding: 8px 12px;
-  border-radius: var(--radius);
-  font-size: 13px;
-  line-height: 1.5;
-}
-
-.chat-message.ai {
-  background: var(--bg-card);
-  border-left: 3px solid var(--cyber-red);
-}
-
-.chat-message.user {
-  background: var(--muted-red);
-  border-left: 3px solid var(--cyber-rose);
-  margin-left: 24px;
-}
-
-.chat-input-container {
-  display: flex;
-  gap: 8px;
-  padding-top: 8px;
-  border-top: 1px solid var(--border-dim);
-}
-
-.chat-input {
-  flex: 1;
-  font-family: var(--font-mono);
-}
-
-.sidebar-section {
-  margin-bottom: 16px;
-}
-
-.sidebar-item {
-  padding: 6px 8px;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 12px;
-  color: var(--text-dim);
-  transition: all 0.15s;
-}
-
-.sidebar-item:hover {
-  background: var(--bg-card);
-  color: var(--text-main);
-}
-
-.sidebar-item.active {
-  background: var(--cyber-red);
-  color: #fff;
-  font-weight: 600;
-}
-
-.terminal-container {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-}
-
-.terminal-output {
-  flex: 1;
-  padding: 12px;
-  font-family: var(--font-mono);
-  font-size: 13px;
-  overflow-y: auto;
-  white-space: pre-wrap;
-  background: var(--bg-void);
-}
-
-.terminal-input-row {
-  display: flex;
-  align-items: center;
-  padding: 8px 12px;
-  background: var(--bg-input);
-  border-top: 1px solid var(--border-dim);
-}
-
-.terminal-prompt {
-  color: var(--success);
-  font-family: var(--font-mono);
-  font-weight: 700;
-  margin-right: 8px;
-}
-
-.terminal-input {
-  flex: 1;
-  background: transparent;
-  border: none;
-  outline: none;
-  color: var(--text-main);
-  font-family: var(--font-mono);
-  font-size: 13px;
-}
-
-.config-container {
-  max-width: 800px;
-  margin: 0 auto;
-  padding: 24px;
-}
-
-.config-section {
-  margin-bottom: 24px;
-}
-
-.config-field {
-  display: flex;
-  align-items: center;
-  padding: 8px 0;
-  border-bottom: 1px solid var(--border-dim);
-}
-
-.config-label {
-  width: 140px;
-  color: var(--text-dim);
-  font-size: 12px;
-}
-
-.config-value {
-  color: var(--text-main);
-  font-size: 13px;
-}
-
-@keyframes glitch {
-  0% { transform: translate(0); }
-  20% { transform: translate(-2px, 2px); }
-  40% { transform: translate(-2px, -2px); }
-  60% { transform: translate(2px, 2px); }
-  80% { transform: translate(2px, -2px); }
-  100% { transform: translate(0); }
-}
-
-@keyframes scanline {
-  0% { top: -10%; }
-  100% { top: 110%; }
-}
-
-@keyframes typewriter {
-  from { width: 0; }
-  to { width: 100%; }
-}
-
-@keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.5; }
-}
-
-@keyframes fadeIn {
-  from { opacity: 0; transform: translateY(4px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-.fade-in {
-  animation: fadeIn 0.3s ease-out;
-}
-
-.tab-transition {
-  animation: fadeIn 0.2s ease-out;
-}
-
-.glitch-text {
-  animation: glitch 0.3s ease-in-out;
-}
-
-.loading-spinner {
-  display: inline-block;
-  animation: pulse 1s infinite;
-  color: var(--cyber-red);
-}

cmd/muyue-desktop/frontend/src/themes/index.js

@@ -1,138 +0,0 @@
-const defaultTheme = {
-  name: 'Cyberpunk Red',
-  colors: {
-    bgVoid: '#0A0A0C',
-    bgBase: '#0F0D10',
-    bgSurface: '#161218',
-    bgPanel: '#1C1719',
-    bgCard: '#221B1E',
-    bgInput: '#2A2225',
-    bgHover: '#332528',
-    cyberRed: '#FF0033',
-    cyberRedDark: '#8B0020',
-    cyberRedDeep: '#5C0015',
-    cyberPink: '#FF1A5E',
-    cyberRose: '#FF4D6D',
-    neonRed: '#FF1744',
-    brightRed: '#FF5252',
-    dimRed: '#6B2033',
-    mutedRed: '#4A1525',
-    textBright: '#EAE0E2',
-    textMain: '#D4C4C8',
-    textDim: '#8A7A7E',
-    textMuted: '#5A4F52',
-    success: '#00E676',
-    warning: '#FFD740',
-    error: '#FF1744',
-    borderDim: '#2A1F22',
-    borderRed: '#FF003344',
-    borderRedFull: '#FF0033',
-  },
-  fonts: {
-    mono: "'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace",
-    ui: "-apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
-  },
-  borderRadius: '8px',
-  animations: {
-    glitch: true,
-    scanline: true,
-    typewriter: true,
-    pulse: true,
-  },
-}
-
-const themes = {
-  'cyberpunk-red': defaultTheme,
-  'cyberpunk-pink': {
-    ...defaultTheme,
-    name: 'Cyberpunk Pink',
-    colors: {
-      ...defaultTheme.colors,
-      cyberRed: '#FF1A8C',
-      cyberRedDark: '#8B1050',
-      cyberRedDeep: '#5C0A35',
-      cyberPink: '#FF4DAE',
-      cyberRose: '#FF6DC2',
-      neonRed: '#FF1A8C',
-      brightRed: '#FF6DC2',
-      dimRed: '#6B2050',
-      mutedRed: '#4A1535',
-    },
-  },
-  'midnight-blue': {
-    ...defaultTheme,
-    name: 'Midnight Blue',
-    colors: {
-      ...defaultTheme.colors,
-      cyberRed: '#0088FF',
-      cyberRedDark: '#004488',
-      cyberRedDeep: '#002255',
-      cyberPink: '#00AAFF',
-      cyberRose: '#44CCFF',
-      neonRed: '#0088FF',
-      brightRed: '#44CCFF',
-      dimRed: '#203366',
-      mutedRed: '#152244',
-    },
-  },
-  'matrix-green': {
-    ...defaultTheme,
-    name: 'Matrix Green',
-    colors: {
-      ...defaultTheme.colors,
-      cyberRed: '#00FF41',
-      cyberRedDark: '#008822',
-      cyberRedDeep: '#005515',
-      cyberPink: '#33FF66',
-      cyberRose: '#66FF99',
-      neonRed: '#00FF41',
-      brightRed: '#66FF99',
-      dimRed: '#206630',
-      mutedRed: '#154420',
-    },
-  },
-}
-
-export function getTheme(name) {
-  return themes[name] || defaultTheme
-}
-
-export function getThemeNames() {
-  return Object.keys(themes).map(k => ({ id: k, name: themes[k].name }))
-}
-
-export function applyTheme(theme) {
-  const root = document.documentElement
-  const c = theme.colors
-  const map = {
-    '--bg-void': c.bgVoid,
-    '--bg-base': c.bgBase,
-    '--bg-surface': c.bgSurface,
-    '--bg-panel': c.bgPanel,
-    '--bg-card': c.bgCard,
-    '--bg-input': c.bgInput,
-    '--bg-hover': c.bgHover,
-    '--cyber-red': c.cyberRed,
-    '--cyber-red-dark': c.cyberRedDark,
-    '--cyber-red-deep': c.cyberRedDeep,
-    '--cyber-pink': c.cyberPink,
-    '--cyber-rose': c.cyberRose,
-    '--neon-red': c.neonRed,
-    '--bright-red': c.brightRed,
-    '--dim-red': c.dimRed,
-    '--muted-red': c.mutedRed,
-    '--text-bright': c.textBright,
-    '--text-main': c.textMain,
-    '--text-dim': c.textDim,
-    '--text-muted': c.textMuted,
-    '--success': c.success,
-    '--warning': c.warning,
-    '--error': c.error,
-    '--border-dim': c.borderDim,
-    '--border-red': c.borderRed,
-    '--border-red-full': c.borderRedFull,
-  }
-  Object.entries(map).forEach(([k, v]) => root.style.setProperty(k, v))
-}
-
-export default defaultTheme

cmd/muyue-desktop/main.go

@@ -1,116 +0,0 @@
-package main
-
-import (
-	"embed"
-	"fmt"
-	"io/fs"
-	"log"
-	"net"
-	"net/http"
-	"os"
-	"os/exec"
-	"os/signal"
-	"syscall"
-
-	"github.com/muyue/muyue/internal/api"
-	"github.com/muyue/muyue/internal/config"
-	"github.com/muyue/muyue/internal/version"
-)
-
-//go:embed frontend/dist/*
-var frontendFS embed.FS
-
-func main() {
-	if len(os.Args) > 1 && os.Args[1] == "--help" {
-		fmt.Printf("%s Desktop v%s\n", version.Name, version.Version)
-		fmt.Println("Usage: muyue-desktop [options]")
-		fmt.Println()
-		fmt.Println("Options:")
-		fmt.Println("  --help      Show this help")
-		fmt.Println("  --port      Specify port (default: auto)")
-		fmt.Println("  --no-open   Don't open browser")
-		return
-	}
-
-	cfg := loadConfig()
-	srv := api.NewServer(cfg)
-
-	listener, err := net.Listen("tcp", "127.0.0.1:0")
-	if err != nil {
-		log.Fatalf("Failed to bind: %v", err)
-	}
-	addr := listener.Addr().(*net.TCPAddr)
-	port := addr.Port
-
-	frontendDist, err := fs.Sub(frontendFS, "frontend/dist")
-	if err != nil {
-		log.Fatalf("Failed to load frontend: %v", err)
-	}
-
-	fileServer := http.FileServer(http.FS(frontendDist))
-
-	mux := http.NewServeMux()
-	mux.Handle("/api/", srv)
-	mux.Handle("/", fileServer)
-
-	go func() {
-		log.Printf("%s Desktop v%s", version.Name, version.Version)
-		log.Printf("Listening on http://127.0.0.1:%d", port)
-
-		if err := http.Serve(listener, mux); err != nil {
-			log.Fatalf("Server error: %v", err)
-		}
-	}()
-
-	noOpen := false
-	for _, arg := range os.Args[1:] {
-		if arg == "--no-open" {
-			noOpen = true
-		}
-	}
-
-	if !noOpen {
-		url := fmt.Sprintf("http://127.0.0.1:%d", port)
-		openBrowser(url)
-		log.Printf("Opened %s in browser", url)
-	}
-
-	quit := make(chan os.Signal, 1)
-	signal.Notify(quit, syscall.SIGINT, syscall.SIGTERM)
-	<-quit
-	log.Println("Shutting down...")
-}
-
-func loadConfig() *config.MuyueConfig {
-	if !config.Exists() {
-		fmt.Println("No config found. Run `muyue setup` first.")
-		os.Exit(1)
-	}
-	cfg, err := config.Load()
-	if err != nil {
-		fmt.Fprintf(os.Stderr, "Config error: %v\n", err)
-		os.Exit(1)
-	}
-	return cfg
-}
-
-func openBrowser(url string) {
-	var cmd *exec.Cmd
-	switch {
-	case commandExists("xdg-open"):
-		cmd = exec.Command("xdg-open", url)
-	case commandExists("open"):
-		cmd = exec.Command("open", url)
-	case commandExists("cmd"):
-		cmd = exec.Command("cmd", "/c", "start", url)
-	default:
-		fmt.Printf("Open manually: %s\n", url)
-		return
-	}
-	cmd.Start()
-}
-
-func commandExists(name string) bool {
-	_, err := exec.LookPath(name)
-	return err == nil
-}

cmd/muyue/main.go

@@ -5,8 +5,8 @@ import (
 	"os"
 	"os/exec"
 
-	tea "github.com/charmbracelet/bubbletea"
 	"github.com/muyue/muyue/internal/config"
+	"github.com/muyue/muyue/internal/desktop"
 	"github.com/muyue/muyue/internal/installer"
 	"github.com/muyue/muyue/internal/lsp"
 	"github.com/muyue/muyue/internal/mcp"
@@ -14,26 +14,33 @@ import (
 	"github.com/muyue/muyue/internal/profiler"
 	"github.com/muyue/muyue/internal/scanner"
 	"github.com/muyue/muyue/internal/skills"
-	"github.com/muyue/muyue/internal/tui"
 	"github.com/muyue/muyue/internal/updater"
 	"github.com/muyue/muyue/internal/version"
 )
 
 func main() {
 	if len(os.Args) > 1 {
-		handleCommand(os.Args[1:])
-		return
+		if isCommand(os.Args[1]) {
+			handleCommand(os.Args[1:])
+			return
+		}
 	}
 
-	runTUI()
+	runDesktop(os.Args[1:])
+}
+
+func isCommand(arg string) bool {
+	switch arg {
+	case "version", "-v", "--version",
+		"scan", "install", "update", "setup",
+		"config", "doctor", "lsp", "mcp", "skills",
+		"help", "-h", "--help":
+		return true
+	}
+	return false
 }
 
 func handleCommand(args []string) {
-	if len(args) == 0 {
-		runTUI()
-		return
-	}
-
 	switch args[0] {
 	case "version", "-v", "--version":
 		fmt.Println(version.FullVersion())
@@ -57,10 +64,6 @@ func handleCommand(args []string) {
 		runSkills(args[1:])
 	case "help", "-h", "--help":
 		printHelp()
-	default:
-		fmt.Printf("Unknown command: %s\n", args[0])
-		printHelp()
-		os.Exit(1)
 	}
 }
 
@@ -68,9 +71,13 @@ func printHelp() {
 	fmt.Printf(`%s - AI-powered development environment assistant
 
 Usage:
-  muyue              Start the interactive TUI
+  muyue              Launch desktop app (opens browser)
   muyue <command>    Run a specific command
 
+Options:
+  --port=PORT        Specify port (default: auto)
+  --no-open          Don't open browser automatically
+
 Commands:
   version            Show version
   scan               Scan your system for tools and runtimes
@@ -84,35 +91,15 @@ Commands:
   skills [list|generate|deploy|init|delete] Manage AI coding skills
   help               Show this help
 
-TUI Controls:
-  Ctrl+T             Open tab switcher (navigate with arrows, select with enter)
-  Tab / Shift+Tab    Cycle tabs
-  Ctrl+C             Show quit confirmation (press twice quickly to force quit)
-
-Chat Commands:
-  /plan <goal>       Start a structured Plan→Execute workflow
-
-Workflow Controls:
-  [a]                Approve plan
-  [r]                Reject plan (type feedback)
-  [g]                Generate plan (after answering questions)
-  [n]                Execute next step
-  [x]                Cancel/reset workflow
-
 Note:
   Some tools (docker, gh, etc.) require elevated privileges.
   Run 'sudo muyue install' or use 'pkexec muyue install' if needed.
 `, version.FullVersion())
 }
 
-func runTUI() {
+func runDesktop(args []string) {
 	cfg := loadOrSetupConfig()
-	result := scanner.ScanSystem()
-
-	model := tui.NewModel(cfg, result)
-	p := tea.NewProgram(model, tea.WithAltScreen())
-
-	if _, err := p.Run(); err != nil {
+	if err := desktop.Run(cfg, args); err != nil {
 		fmt.Fprintf(os.Stderr, "Error: %v\n", err)
 		os.Exit(1)
 	}

go.mod

@@ -3,10 +3,7 @@ module github.com/muyue/muyue
 go 1.24.3
 
 require (
-	github.com/charmbracelet/bubbles v1.0.0
-	github.com/charmbracelet/bubbletea v1.3.10
 	github.com/charmbracelet/huh v1.0.0
-	github.com/charmbracelet/lipgloss v1.1.0
 	gopkg.in/yaml.v3 v3.0.1
 )
 
@@ -14,8 +11,10 @@ require (
 	github.com/atotto/clipboard v0.1.4 // indirect
 	github.com/aymanbagabas/go-osc52/v2 v2.0.1 // indirect
 	github.com/catppuccin/go v0.3.0 // indirect
+	github.com/charmbracelet/bubbles v1.0.0 // indirect
+	github.com/charmbracelet/bubbletea v1.3.10 // indirect
 	github.com/charmbracelet/colorprofile v0.4.1 // indirect
-	github.com/charmbracelet/harmonica v0.2.0 // indirect
+	github.com/charmbracelet/lipgloss v1.1.0 // indirect
 	github.com/charmbracelet/x/ansi v0.11.6 // indirect
 	github.com/charmbracelet/x/cellbuf v0.0.15 // indirect
 	github.com/charmbracelet/x/exp/strings v0.0.0-20240722160745-212f7b056ed0 // indirect

go.sum

@@ -14,8 +14,6 @@ github.com/charmbracelet/bubbletea v1.3.10 h1:otUDHWMMzQSB0Pkc87rm691KZ3SWa4KUlv
 github.com/charmbracelet/bubbletea v1.3.10/go.mod h1:ORQfo0fk8U+po9VaNvnV95UPWA1BitP1E0N6xJPlHr4=
 github.com/charmbracelet/colorprofile v0.4.1 h1:a1lO03qTrSIRaK8c3JRxJDZOvhvIeSco3ej+ngLk1kk=
 github.com/charmbracelet/colorprofile v0.4.1/go.mod h1:U1d9Dljmdf9DLegaJ0nGZNJvoXAhayhmidOdcBwAvKk=
-github.com/charmbracelet/harmonica v0.2.0 h1:8NxJWRWg/bzKqqEaaeFNipOu77YR5t8aSwG4pgaUBiQ=
-github.com/charmbracelet/harmonica v0.2.0/go.mod h1:KSri/1RMQOZLbw7AHqgcBycp8pgJnQMYYT8QZRqZ1Ao=
 github.com/charmbracelet/huh v1.0.0 h1:wOnedH8G4qzJbmhftTqrpppyqHakl/zbbNdXIWJyIxw=
 github.com/charmbracelet/huh v1.0.0/go.mod h1:5YVc+SlZ1IhQALxRPpkGwwEKftN/+OlJlnJYlDRFqN4=
 github.com/charmbracelet/lipgloss v1.1.0 h1:vYXsiLHVkK7fp74RkV7b2kq9+zDLoEU4MZoFqR/noCY=

internal/api/handlers.go

@@ -4,7 +4,6 @@ import (
 	"encoding/json"
 	"net/http"
 	"os/exec"
-	"strings"
 
 	"github.com/muyue/muyue/internal/config"
 	"github.com/muyue/muyue/internal/lsp"
@@ -15,50 +14,6 @@ import (
 	"github.com/muyue/muyue/internal/version"
 )
 
-type Server struct {
-	config     *config.MuyueConfig
-	scanResult *scanner.ScanResult
-	mux        *http.ServeMux
-}
-
-func NewServer(cfg *config.MuyueConfig) *Server {
-	s := &Server{
-		config: cfg,
-		mux:    http.NewServeMux(),
-	}
-	s.scanResult = scanner.ScanSystem()
-	s.routes()
-	return s
-}
-
-func (s *Server) routes() {
-	s.mux.HandleFunc("/api/info", s.handleInfo)
-	s.mux.HandleFunc("/api/system", s.handleSystem)
-	s.mux.HandleFunc("/api/tools", s.handleTools)
-	s.mux.HandleFunc("/api/config", s.handleConfig)
-	s.mux.HandleFunc("/api/providers", s.handleProviders)
-	s.mux.HandleFunc("/api/skills", s.handleSkills)
-	s.mux.HandleFunc("/api/lsp", s.handleLSP)
-	s.mux.HandleFunc("/api/mcp", s.handleMCP)
-	s.mux.HandleFunc("/api/updates", s.handleUpdates)
-	s.mux.HandleFunc("/api/install", s.handleInstall)
-	s.mux.HandleFunc("/api/scan", s.handleScan)
-	s.mux.HandleFunc("/api/terminal", s.handleTerminal)
-	s.mux.HandleFunc("/api/mcp/configure", s.handleMCPConfigure)
-}
-
-func (s *Server) ServeHTTP(w http.ResponseWriter, r *http.Request) {
-	w.Header().Set("Content-Type", "application/json")
-	w.Header().Set("Access-Control-Allow-Origin", "*")
-	w.Header().Set("Access-Control-Allow-Methods", "GET, POST, OPTIONS")
-	w.Header().Set("Access-Control-Allow-Headers", "Content-Type")
-	if r.Method == "OPTIONS" {
-		w.WriteHeader(http.StatusOK)
-		return
-	}
-	s.mux.ServeHTTP(w, r)
-}
-
 func writeJSON(w http.ResponseWriter, data interface{}) {
 	json.NewEncoder(w).Encode(data)
 }
@@ -85,20 +40,19 @@ func (s *Server) handleSystem(w http.ResponseWriter, r *http.Request) {
 	})
 }
 
-type ToolInfo struct {
-	Name      string `json:"name"`
-	Installed bool   `json:"installed"`
-	Version   string `json:"version"`
-	Path      string `json:"path"`
-}
-
 func (s *Server) handleTools(w http.ResponseWriter, r *http.Request) {
 	if s.scanResult == nil {
 		s.scanResult = scanner.ScanSystem()
 	}
-	tools := make([]ToolInfo, len(s.scanResult.Tools))
+	type toolInfo struct {
+		Name      string `json:"name"`
+		Installed bool   `json:"installed"`
+		Version   string `json:"version"`
+		Path      string `json:"path"`
+	}
+	tools := make([]toolInfo, len(s.scanResult.Tools))
 	for i, t := range s.scanResult.Tools {
-		tools[i] = ToolInfo{
+		tools[i] = toolInfo{
 			Name:      t.Name,
 			Installed: t.Installed,
 			Version:   t.Version,
@@ -117,9 +71,9 @@ func (s *Server) handleConfig(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 	writeJSON(w, map[string]interface{}{
-		"profile":   s.config.Profile,
-		"terminal":  s.config.Terminal,
-		"bmad":      s.config.BMAD,
+		"profile":  s.config.Profile,
+		"terminal": s.config.Terminal,
+		"bmad":     s.config.BMAD,
 	})
 }
 
@@ -155,7 +109,7 @@ func (s *Server) handleLSP(w http.ResponseWriter, r *http.Request) {
 func (s *Server) handleMCP(w http.ResponseWriter, r *http.Request) {
 	servers := mcp.ScanServers()
 	writeJSON(w, map[string]interface{}{
-		"servers":   servers,
+		"servers":    servers,
 		"configured": true,
 	})
 }
@@ -165,8 +119,7 @@ func (s *Server) handleMCPConfigure(w http.ResponseWriter, r *http.Request) {
 		writeError(w, "POST only", http.StatusMethodNotAllowed)
 		return
 	}
-	err := mcp.ConfigureAll(s.config)
-	if err != nil {
+	if err := mcp.ConfigureAll(s.config); err != nil {
 		writeError(w, err.Error(), http.StatusInternalServerError)
 		return
 	}
@@ -222,9 +175,34 @@ func (s *Server) handleScan(w http.ResponseWriter, r *http.Request) {
 	writeJSON(w, map[string]string{"status": "ok"})
 }
 
-type TermResult struct {
-	Output string `json:"output"`
-	Error  string `json:"error,omitempty"`
+func (s *Server) handleUpdatePreferences(w http.ResponseWriter, r *http.Request) {
+	if r.Method != "PUT" {
+		writeError(w, "PUT only", http.StatusMethodNotAllowed)
+		return
+	}
+	if s.config == nil {
+		writeError(w, "no config", http.StatusNotFound)
+		return
+	}
+	var body struct {
+		Language       string `json:"language"`
+		KeyboardLayout string `json:"keyboard_layout"`
+	}
+	if err := json.NewDecoder(r.Body).Decode(&body); err != nil {
+		writeError(w, err.Error(), http.StatusBadRequest)
+		return
+	}
+	if body.Language != "" {
+		s.config.Profile.Preferences.Language = body.Language
+	}
+	if body.KeyboardLayout != "" {
+		s.config.Profile.Preferences.KeyboardLayout = body.KeyboardLayout
+	}
+	if err := config.Save(s.config); err != nil {
+		writeError(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+	writeJSON(w, map[string]string{"status": "ok"})
 }
 
 func (s *Server) handleTerminal(w http.ResponseWriter, r *http.Request) {
@@ -240,17 +218,14 @@ func (s *Server) handleTerminal(w http.ResponseWriter, r *http.Request) {
 		writeError(w, err.Error(), http.StatusBadRequest)
 		return
 	}
-
 	if body.Command == "" {
 		writeError(w, "no command", http.StatusBadRequest)
 		return
 	}
 
 	shell := "/bin/sh"
-	if sh := strings.TrimSpace(body.Command); sh != "" {
-		if s, err := exec.LookPath("bash"); err == nil {
-			shell = s
-		}
+	if s, err := exec.LookPath("bash"); err == nil {
+		shell = s
 	}
 
 	cmd := exec.Command(shell, "-c", body.Command)
@@ -258,7 +233,12 @@ func (s *Server) handleTerminal(w http.ResponseWriter, r *http.Request) {
 		cmd.Dir = body.Cwd
 	}
 	out, err := cmd.CombinedOutput()
-	result := TermResult{Output: string(out)}
+
+	type termResult struct {
+		Output string `json:"output"`
+		Error  string `json:"error,omitempty"`
+	}
+	result := termResult{Output: string(out)}
 	if err != nil {
 		result.Error = err.Error()
 	}

internal/api/server.go

@@ -0,0 +1,53 @@
+package api
+
+import (
+	"net/http"
+
+	"github.com/muyue/muyue/internal/config"
+	"github.com/muyue/muyue/internal/scanner"
+)
+
+type Server struct {
+	config     *config.MuyueConfig
+	scanResult *scanner.ScanResult
+	mux        *http.ServeMux
+}
+
+func NewServer(cfg *config.MuyueConfig) *Server {
+	s := &Server{
+		config: cfg,
+		mux:    http.NewServeMux(),
+	}
+	s.scanResult = scanner.ScanSystem()
+	s.routes()
+	return s
+}
+
+func (s *Server) routes() {
+	s.mux.HandleFunc("/api/info", s.handleInfo)
+	s.mux.HandleFunc("/api/system", s.handleSystem)
+	s.mux.HandleFunc("/api/tools", s.handleTools)
+	s.mux.HandleFunc("/api/config", s.handleConfig)
+	s.mux.HandleFunc("/api/providers", s.handleProviders)
+	s.mux.HandleFunc("/api/skills", s.handleSkills)
+	s.mux.HandleFunc("/api/lsp", s.handleLSP)
+	s.mux.HandleFunc("/api/mcp", s.handleMCP)
+	s.mux.HandleFunc("/api/updates", s.handleUpdates)
+	s.mux.HandleFunc("/api/install", s.handleInstall)
+	s.mux.HandleFunc("/api/scan", s.handleScan)
+	s.mux.HandleFunc("/api/preferences", s.handleUpdatePreferences)
+	s.mux.HandleFunc("/api/terminal", s.handleTerminal)
+	s.mux.HandleFunc("/api/mcp/configure", s.handleMCPConfigure)
+}
+
+func (s *Server) ServeHTTP(w http.ResponseWriter, r *http.Request) {
+	w.Header().Set("Content-Type", "application/json")
+	w.Header().Set("Access-Control-Allow-Origin", "*")
+	w.Header().Set("Access-Control-Allow-Methods", "GET, POST, PUT, OPTIONS")
+	w.Header().Set("Access-Control-Allow-Headers", "Content-Type")
+	if r.Method == "OPTIONS" {
+		w.WriteHeader(http.StatusOK)
+		return
+	}
+	s.mux.ServeHTTP(w, r)
+}

internal/config/config.go

@@ -15,12 +15,14 @@ type Profile struct {
 	Email       string   `yaml:"email"`
 	Languages   []string `yaml:"languages"`
 	Preferences struct {
-		Editor        string `yaml:"editor"`
-		Shell         string `yaml:"shell"`
-		Theme         string `yaml:"theme"`
-		DefaultAI     string `yaml:"default_ai"`
-		AutoUpdate    bool   `yaml:"auto_update"`
-		CheckOnStart  bool   `yaml:"check_on_start"`
+		Editor         string `yaml:"editor"`
+		Shell          string `yaml:"shell"`
+		Theme          string `yaml:"theme"`
+		DefaultAI      string `yaml:"default_ai"`
+		AutoUpdate     bool   `yaml:"auto_update"`
+		CheckOnStart   bool   `yaml:"check_on_start"`
+		Language       string `yaml:"language"`
+		KeyboardLayout string `yaml:"keyboard_layout"`
 	} `yaml:"preferences"`
 }
 
@@ -179,6 +181,8 @@ func Default() *MuyueConfig {
 	cfg.Profile.Preferences.AutoUpdate = true
 	cfg.Profile.Preferences.CheckOnStart = true
 	cfg.Profile.Preferences.Theme = "charm"
+	cfg.Profile.Preferences.Language = "fr"
+	cfg.Profile.Preferences.KeyboardLayout = "azerty"
 
 	cfg.AI.Providers = []AIProvider{
 		{

internal/desktop/desktop.go

@@ -0,0 +1,131 @@
+package desktop
+
+import (
+	"fmt"
+	"io/fs"
+	"log"
+	"net"
+	"net/http"
+	"os"
+	"os/exec"
+	"os/signal"
+	"strconv"
+	"strings"
+	"syscall"
+
+	"github.com/muyue/muyue/internal/api"
+	"github.com/muyue/muyue/internal/config"
+	"github.com/muyue/muyue/internal/version"
+	"github.com/muyue/muyue/web"
+)
+
+type options struct {
+	port   int
+	noOpen bool
+}
+
+type option func(*options)
+
+func WithPort(port int) option {
+	return func(o *options) { o.port = port }
+}
+
+func WithNoOpen(noOpen bool) option {
+	return func(o *options) { o.noOpen = noOpen }
+}
+
+func parseFlags(args []string) []option {
+	var opts []option
+	for _, arg := range args {
+		switch {
+		case arg == "--no-open":
+			opts = append(opts, WithNoOpen(true))
+		case strings.HasPrefix(arg, "--port="):
+			if p, err := strconv.Atoi(strings.TrimPrefix(arg, "--port=")); err == nil {
+				opts = append(opts, WithPort(p))
+			}
+		case arg == "--port":
+			// handled as prefix case
+		}
+	}
+	return opts
+}
+
+func Run(cfg *config.MuyueConfig, args []string) error {
+	o := options{}
+	for _, opt := range parseFlags(args) {
+		opt(&o)
+	}
+
+	log.Printf("%s Desktop v%s", version.Name, version.Version)
+
+	srv := api.NewServer(cfg)
+
+	frontendFS, err := fs.Sub(web.Assets, "dist")
+	if err != nil {
+		return fmt.Errorf("frontend assets: %w", err)
+	}
+
+	mux := http.NewServeMux()
+	mux.Handle("/api/", srv)
+	mux.Handle("/", spaHandler(http.FileServer(http.FS(frontendFS))))
+
+	addr := fmt.Sprintf("127.0.0.1:%d", o.port)
+	listener, err := net.Listen("tcp", addr)
+	if err != nil {
+		return fmt.Errorf("bind %s: %w", addr, err)
+	}
+	port := listener.Addr().(*net.TCPAddr).Port
+
+	go func() {
+		if err := http.Serve(listener, mux); err != nil {
+			log.Fatalf("Server error: %v", err)
+		}
+	}()
+
+	url := fmt.Sprintf("http://127.0.0.1:%d", port)
+	log.Printf("Listening on %s", url)
+
+	if !o.noOpen {
+		openBrowser(url)
+		log.Printf("Opened browser")
+	}
+
+	quit := make(chan os.Signal, 1)
+	signal.Notify(quit, syscall.SIGINT, syscall.SIGTERM)
+	<-quit
+
+	log.Println("Shutting down...")
+	return nil
+}
+
+func spaHandler(next http.Handler) http.Handler {
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		path := r.URL.Path
+		if path != "/" && !strings.Contains(path, ".") {
+			r.URL.Path = "/"
+		}
+		next.ServeHTTP(w, r)
+	})
+}
+
+func openBrowser(url string) {
+	var cmd *exec.Cmd
+	switch {
+	case exists("xdg-open"):
+		cmd = exec.Command("xdg-open", url)
+	case exists("open"):
+		cmd = exec.Command("open", url)
+	case exists("cmd"):
+		cmd = exec.Command("cmd", "/c", "start", url)
+	default:
+		fmt.Printf("Open manually: %s\n", url)
+		return
+	}
+	_ = cmd.Start()
+}
+
+func exists(name string) bool {
+	_, err := exec.LookPath(name)
+	return err == nil
+}

internal/tui/animations.go

@@ -1,115 +0,0 @@
-package tui
-
-import (
-	"fmt"
-	"math/rand"
-	"strings"
-	"time"
-
-	"github.com/charmbracelet/lipgloss"
-)
-
-var glitchChars = "!@#$%^&*()_+-=[]{}|;':,./<>?~`"
-
-func init() {
-	rand.Seed(time.Now().UnixNano())
-}
-
-func randomGlitchChar() string {
-	return string(glitchChars[rand.Intn(len(glitchChars))])
-}
-
-func glitchText(text string, intensity int) string {
-	runes := []rune(text)
-	for i := 0; i < intensity; i++ {
-		pos := rand.Intn(len(runes))
-		if runes[pos] != ' ' && runes[pos] != '\n' {
-			runes[pos] = []rune(randomGlitchChar())[0]
-		}
-	}
-	return string(runes)
-}
-
-func generateScanLine(width int, frame int) string {
-	pos := frame % width
-	line := strings.Repeat(" ", pos) +
-		lipgloss.NewStyle().Foreground(cyberRed).Bold(true).Render(strings.Repeat("━", min(20, width-pos)))
-	if pos+20 < width {
-		line += strings.Repeat(" ", width-pos-20)
-	}
-	return line[:min(width, len(line))]
-}
-
-func typewriterRender(text string, pos int) string {
-	if pos >= len(text) {
-		return text
-	}
-	if pos <= 0 {
-		return ""
-	}
-	shown := text[:pos]
-	cursor := lipgloss.NewStyle().Foreground(cyberRed).Bold(true).Render("█")
-	return shown + cursor
-}
-
-func renderGlitchEffect(width, height, frame int) string {
-	var b strings.Builder
-	for y := 0; y < height; y++ {
-		line := ""
-		for x := 0; x < width; x++ {
-			if rand.Float64() < 0.15 {
-				c := randomGlitchChar()
-				style := lipgloss.NewStyle()
-				r := rand.Float64()
-				if r < 0.4 {
-					style = style.Foreground(cyberRed)
-				} else if r < 0.7 {
-					style = style.Foreground(cyberPink)
-				} else {
-					style = style.Foreground(textMuted)
-				}
-				line += style.Render(c)
-			} else {
-				line += " "
-			}
-		}
-		b.WriteString(line)
-		if y < height-1 {
-			b.WriteString("\n")
-		}
-	}
-	return b.String()
-}
-
-func renderScanEffect(width, height, frame int) string {
-	var b strings.Builder
-	scanY := frame % (height + 10)
-	for y := 0; y < height; y++ {
-		if y == scanY || y == scanY+1 {
-			b.WriteString(lipgloss.NewStyle().Foreground(cyberRed).Render(strings.Repeat("━", width)))
-		} else if y == scanY-1 || y == scanY+2 {
-			b.WriteString(lipgloss.NewStyle().Foreground(dimRed).Render(strings.Repeat("─", width)))
-		} else if y < scanY {
-			b.WriteString(lipgloss.NewStyle().Foreground(dimRed).Render(fmt.Sprintf("%*s", width, "")))
-		} else {
-			b.WriteString(strings.Repeat(" ", width))
-		}
-		if y < height-1 {
-			b.WriteString("\n")
-		}
-	}
-	return b.String()
-}
-
-func generateHexStream(width, lines int) string {
-	var b strings.Builder
-	for y := 0; y < lines; y++ {
-		for x := 0; x < width/3; x++ {
-			b.WriteString(fmt.Sprintf("%02X", rand.Intn(256)))
-		}
-		if y < lines-1 {
-			b.WriteString("\n")
-		}
-	}
-	return lipgloss.NewStyle().Foreground(dimRed).Render(b.String())
-}

internal/tui/commands.go

@@ -1,108 +0,0 @@
-package tui
-
-import (
-	"fmt"
-
-	tea "github.com/charmbracelet/bubbletea"
-	"github.com/muyue/muyue/internal/config"
-	"github.com/muyue/muyue/internal/installer"
-	"github.com/muyue/muyue/internal/orchestrator"
-	"github.com/muyue/muyue/internal/workflow"
-)
-
-func startInstallCmd(cfg *config.MuyueConfig, tools []string, index int) tea.Cmd {
-	return tea.Cmd(func() tea.Msg {
-		inst := installer.New(cfg)
-		result := inst.InstallTool(tools[index])
-
-		if index+1 < len(tools) {
-			return installBatchMsg{
-				result: result,
-				tools:  tools,
-				index:  index,
-				config: cfg,
-			}
-		}
-		return installCompleteMsg{results: []installer.InstallResult{result}}
-	})
-}
-
-func sendAIMessage(orch *orchestrator.Orchestrator, input string) tea.Cmd {
-	return tea.Cmd(func() tea.Msg {
-		if orch == nil {
-			return aiErrMsg{err: fmt.Errorf("orchestrator not configured")}
-		}
-		resp, err := orch.Send(input)
-		if err != nil {
-			return aiErrMsg{err: err}
-		}
-		return aiResponseMsg{content: resp}
-	})
-}
-
-func startWorkflowCmd(orch *orchestrator.Orchestrator, goal string) tea.Cmd {
-	return tea.Cmd(func() tea.Msg {
-		resp, err := orch.StartWorkflow(goal)
-		if err != nil {
-			return aiErrMsg{err: err}
-		}
-		return aiResponseMsg{content: resp}
-	})
-}
-
-func workflowChatCmd(orch *orchestrator.Orchestrator, input string) tea.Cmd {
-	return tea.Cmd(func() tea.Msg {
-		wf := orch.Workflow
-		switch wf.Phase {
-		case workflow.PhaseGathering:
-			resp, err := orch.AnswerQuestion(input)
-			if err != nil {
-				return aiErrMsg{err: err}
-			}
-			return aiResponseMsg{content: resp}
-		case workflow.PhaseReviewing:
-			approved, feedback := workflow.ParseApproval(input)
-			resp, err := orch.ReviewPlan(approved, feedback)
-			if err != nil {
-				return aiErrMsg{err: err}
-			}
-			return aiResponseMsg{content: resp}
-		default:
-			resp, err := orch.Send(input)
-			if err != nil {
-				return aiErrMsg{err: err}
-			}
-			return aiResponseMsg{content: resp}
-		}
-	})
-}
-
-func generatePlanCmd(orch *orchestrator.Orchestrator) tea.Cmd {
-	return tea.Cmd(func() tea.Msg {
-		resp, err := orch.GeneratePlan()
-		if err != nil {
-			return aiErrMsg{err: err}
-		}
-		return aiResponseMsg{content: resp}
-	})
-}
-
-func reviewPlanCmd(orch *orchestrator.Orchestrator, approved bool, feedback string) tea.Cmd {
-	return tea.Cmd(func() tea.Msg {
-		resp, err := orch.ReviewPlan(approved, feedback)
-		if err != nil {
-			return aiErrMsg{err: err}
-		}
-		return aiResponseMsg{content: resp}
-	})
-}
-
-func continueWorkflowCmd(orch *orchestrator.Orchestrator, output string) tea.Cmd {
-	return tea.Cmd(func() tea.Msg {
-		resp, err := orch.ContinueExecution(output)
-		if err != nil {
-			return aiErrMsg{err: err}
-		}
-		return aiResponseMsg{content: resp}
-	})
-}

internal/tui/config_tab.go

@@ -1,114 +0,0 @@
-package tui
-
-import (
-	"fmt"
-	"strings"
-
-	"github.com/charmbracelet/lipgloss"
-)
-
-func (m Model) renderConfig() string {
-	colWidth := m.width / 2
-	if colWidth < 30 {
-		colWidth = 30
-	}
-
-	var left, right strings.Builder
-
-	left.WriteString(renderSectionHeader("PROFILE", "[@]"))
-	left.WriteString("\n")
-	if m.config != nil {
-		fields := []struct {
-			label string
-			value string
-		}{
-			{"Name", m.config.Profile.Name},
-			{"Pseudo", m.config.Profile.Pseudo},
-			{"Email", m.config.Profile.Email},
-			{"Editor", m.config.Profile.Preferences.Editor},
-			{"Shell", m.config.Profile.Preferences.Shell},
-			{"Theme", m.config.Profile.Preferences.Theme},
-			{"Default AI", m.config.Profile.Preferences.DefaultAI},
-		}
-		for _, f := range fields {
-			left.WriteString(fmt.Sprintf("  %s %s\n",
-				labelStyle.Render(f.label+":"),
-				valueStyle.Render(f.value)))
-		}
-		if len(m.config.Profile.Languages) > 0 {
-			left.WriteString(fmt.Sprintf("  %s %s\n",
-				labelStyle.Render("Languages:"),
-				valueStyle.Render(strings.Join(m.config.Profile.Languages, ", "))))
-		}
-	}
-	left.WriteString("\n")
-
-	left.WriteString(renderSectionHeader("AI PROVIDERS", "[AI]"))
-	left.WriteString("\n")
-	if m.config != nil {
-		for _, p := range m.config.AI.Providers {
-			active := ""
-			if p.Active {
-				active = lipgloss.NewStyle().Foreground(cyberRed).Bold(true).Render(" >>")
-			}
-			keyStatus := itemMissingStyle.Render("no key")
-			if p.APIKey != "" {
-				keyStatus = itemOKStyle.Render("configured")
-			}
-			nameStyle := lipgloss.NewStyle().Foreground(textBright).Bold(true)
-			left.WriteString(fmt.Sprintf("  %s  %s  key=%s%s\n",
-				nameStyle.Render(p.Name),
-				lipgloss.NewStyle().Foreground(dimRed).Render("model="+p.Model),
-				keyStatus, active))
-		}
-	}
-	left.WriteString("\n")
-
-	right.WriteString(renderSectionHeader("TERMINAL", "[$]"))
-	right.WriteString("\n")
-	if m.config != nil {
-		right.WriteString(fmt.Sprintf("  %s %v\n", labelStyle.Render("Custom Prompt:"), valueStyle.Render(fmt.Sprintf("%v", m.config.Terminal.CustomPrompt))))
-		right.WriteString(fmt.Sprintf("  %s %s\n", labelStyle.Render("Prompt Theme:"), valueStyle.Render(m.config.Terminal.PromptTheme)))
-		right.WriteString(fmt.Sprintf("  %s %v\n", labelStyle.Render("Auto Update:"), valueStyle.Render(fmt.Sprintf("%v", m.config.Profile.Preferences.AutoUpdate))))
-		right.WriteString(fmt.Sprintf("  %s %v\n", labelStyle.Render("Check on Start:"), valueStyle.Render(fmt.Sprintf("%v", m.config.Profile.Preferences.CheckOnStart))))
-	}
-	right.WriteString("\n")
-
-	right.WriteString(renderSectionHeader("BMAD METHOD", "[B]"))
-	right.WriteString("\n")
-	if m.config != nil {
-		installed := itemMissingStyle.Render("[--] no")
-		if m.config.BMAD.Installed {
-			installed = itemOKStyle.Render("[OK] yes")
-		}
-		right.WriteString(fmt.Sprintf("  %s %s\n", labelStyle.Render("Installed:"), installed))
-		right.WriteString(fmt.Sprintf("  %s %v\n", labelStyle.Render("Global:"), valueStyle.Render(fmt.Sprintf("%v", m.config.BMAD.Global))))
-		if m.config.BMAD.Version != "" {
-			right.WriteString(fmt.Sprintf("  %s %s\n", labelStyle.Render("Version:"), valueStyle.Render(m.config.BMAD.Version)))
-		}
-	}
-	right.WriteString("\n")
-
-	right.WriteString(renderSectionHeader(fmt.Sprintf("SKILLS (%d)", len(m.skillList)), "[!]"))
-	right.WriteString("\n")
-	if len(m.skillList) > 0 {
-		for _, s := range m.skillList {
-			target := s.Target
-			if target == "" {
-				target = "both"
-			}
-			right.WriteString(fmt.Sprintf("  %s %s %s\n",
-				lipgloss.NewStyle().Foreground(textMain).Render(s.Name),
-				lipgloss.NewStyle().Foreground(cyberRed).Render("["+target+"]"),
-				lipgloss.NewStyle().Foreground(dimRed).Render(s.Description)))
-		}
-	} else {
-		right.WriteString(lipgloss.NewStyle().Foreground(textMuted).Render("  No skills. Run `muyue skills init`."))
-		right.WriteString("\n")
-	}
-
-	leftCol := lipgloss.NewStyle().Width(colWidth).Render(left.String())
-	rightCol := lipgloss.NewStyle().Width(colWidth).Render(right.String())
-
-	return lipgloss.JoinHorizontal(lipgloss.Top, leftCol, rightCol)
-}

internal/tui/dashboard.go

@@ -1,176 +0,0 @@
-package tui
-
-import (
-	"fmt"
-	"strings"
-
-	"github.com/charmbracelet/lipgloss"
-)
-
-func (m Model) renderDashboard() string {
-	colWidth := m.width / 2
-	if colWidth < 30 {
-		colWidth = 30
-	}
-
-	var left, right strings.Builder
-
-	left.WriteString(renderSectionHeader("SYSTEM", "[*]"))
-	left.WriteString("\n")
-	if m.scanResult != nil {
-		sysInfo := m.scanResult.System.String()
-		left.WriteString("  ")
-		left.WriteString(lipgloss.NewStyle().Foreground(textMain).Render(sysInfo))
-	}
-	left.WriteString("\n\n")
-
-	left.WriteString(renderSectionHeader("INSTALLED TOOLS", "[+]"))
-	left.WriteString("\n")
-	if m.scanResult != nil {
-		installed := 0
-		total := len(m.scanResult.Tools)
-		for _, t := range m.scanResult.Tools {
-			if t.Installed {
-				installed++
-				left.WriteString("  ")
-				left.WriteString(itemOKStyle.Render("[OK] "))
-				left.WriteString(lipgloss.NewStyle().Foreground(textMain).Render(t.Name))
-				left.WriteString(lipgloss.NewStyle().Foreground(dimRed).Render(fmt.Sprintf(" %s", extractVersion(t.Version))))
-				left.WriteString("\n")
-			} else {
-				left.WriteString("  ")
-				left.WriteString(itemMissingStyle.Render("[--] "))
-				left.WriteString(lipgloss.NewStyle().Foreground(textMuted).Render(t.Name))
-				left.WriteString(itemPendingStyle.Render(" (missing)"))
-				left.WriteString("\n")
-			}
-		}
-
-		barWidth := 20
-		pct := 0
-		if total > 0 {
-			pct = (installed * barWidth) / total
-		}
-		bar := lipgloss.NewStyle().Foreground(cyberRed).Bold(true).Render(strings.Repeat("█", pct)) +
-			lipgloss.NewStyle().Foreground(dimRed).Render(strings.Repeat("░", barWidth-pct))
-		left.WriteString(fmt.Sprintf("\n  %s %d/%d\n", bar, installed, total))
-	}
-	left.WriteString("\n")
-
-	if m.installing {
-		left.WriteString(renderSectionHeader("INSTALLING", "[~]"))
-		left.WriteString("\n")
-		progBar := m.progressBar.View()
-		label := ""
-		if m.installTool != "" {
-			label = fmt.Sprintf(" %d/%d - %s", m.installCurrent+1, m.installTotal, m.installTool)
-		} else {
-			label = fmt.Sprintf(" %d/%d", m.installCurrent, m.installTotal)
-		}
-		left.WriteString(fmt.Sprintf("  %s%s\n", progBar, label))
-		left.WriteString("\n")
-	}
-
-	if len(m.installLog) > 0 {
-		left.WriteString(renderSectionHeader("INSTALL LOG", "[#]"))
-		left.WriteString("\n")
-		for _, l := range m.installLog {
-			left.WriteString(l + "\n")
-		}
-		left.WriteString("\n")
-	}
-
-	right.WriteString(renderSectionHeader("QUICK ACTIONS", "[!]"))
-	right.WriteString("\n")
-	actions := []struct {
-		key   string
-		desc  string
-		color lipgloss.Color
-	}{
-		{"i", "Install missing tools", cyberRed},
-		{"u", "Check for updates", neonRed},
-		{"s", "Rescan system", cyberPink},
-		{"l", "Scan LSP servers", cyberRose},
-		{"m", "Configure MCP servers", brightRed},
-	}
-	for _, a := range actions {
-		right.WriteString(fmt.Sprintf("  %s %s\n",
-			lipgloss.NewStyle().Foreground(a.color).Bold(true).Render("["+a.key+"]"),
-			lipgloss.NewStyle().Foreground(textMain).Render(a.desc)))
-	}
-	right.WriteString("\n")
-
-	right.WriteString(renderSectionHeader("ACTIVE AGENTS", "[*]"))
-	right.WriteString("\n")
-
-	agents := []struct {
-		name string
-	}{
-		{"Crush"},
-		{"Claude Code"},
-	}
-	for _, a := range agents {
-		right.WriteString("  ")
-		right.WriteString(lipgloss.NewStyle().Foreground(dimRed).Render(">> "))
-		right.WriteString(lipgloss.NewStyle().Foreground(textMuted).Render(a.name + " "))
-		right.WriteString(itemPendingStyle.Render("[stopped]"))
-		right.WriteString("\n")
-	}
-	right.WriteString("\n")
-
-	if len(m.updateStatus) > 0 {
-		right.WriteString(renderSectionHeader("UPDATES", "[^]"))
-		right.WriteString("\n")
-		for _, s := range m.updateStatus {
-			if s.NeedsUpdate {
-				right.WriteString("  ")
-				right.WriteString(itemWarnStyle.Render("[!!] "))
-				right.WriteString(fmt.Sprintf("%s: %s -> %s\n", s.Tool, s.Current, s.Latest))
-			} else if s.Error == "" {
-				right.WriteString("  ")
-				right.WriteString(itemOKStyle.Render("[OK] "))
-				right.WriteString(fmt.Sprintf("%s: up to date\n", s.Tool))
-			}
-		}
-		right.WriteString("\n")
-	}
-
-	if len(m.lspServers) > 0 {
-		right.WriteString(renderSectionHeader("LSP SERVERS", "[L]"))
-		right.WriteString("\n")
-		lspInstalled := 0
-		for _, s := range m.lspServers {
-			if s.Installed {
-				lspInstalled++
-				right.WriteString("  ")
-				right.WriteString(itemOKStyle.Render("[OK] "))
-				right.WriteString(fmt.Sprintf("%-22s (%s)\n", s.Name, s.Language))
-			} else {
-				right.WriteString("  ")
-				right.WriteString(itemPendingStyle.Render("[  ] "))
-				right.WriteString(fmt.Sprintf("%-22s (%s)\n", s.Name, s.Language))
-			}
-		}
-		right.WriteString(fmt.Sprintf("\n  %d/%d available\n", lspInstalled, len(m.lspServers)))
-		right.WriteString("\n")
-	}
-
-	mcpStatus := itemPendingStyle.Render("[  ] not configured")
-	if m.mcpConfigured {
-		mcpStatus = itemOKStyle.Render("[OK] configured")
-	}
-	right.WriteString(fmt.Sprintf("  MCP: %s\n", mcpStatus))
-
-	if m.daemon != nil {
-		daemonStatus := itemPendingStyle.Render("[  ] stopped")
-		if m.daemon.IsRunning() {
-			daemonStatus = itemOKStyle.Render("[OK] running")
-		}
-		right.WriteString(fmt.Sprintf("  Daemon: %s\n", daemonStatus))
-	}
-
-	leftCol := lipgloss.NewStyle().Width(colWidth).Render(left.String())
-	rightCol := lipgloss.NewStyle().Width(colWidth).Render(right.String())
-
-	return lipgloss.JoinHorizontal(lipgloss.Top, leftCol, rightCol)
-}

internal/tui/footer.go

@@ -1,74 +0,0 @@
-package tui
-
-import (
-	"fmt"
-	"strings"
-
-	"github.com/charmbracelet/lipgloss"
-	"github.com/muyue/muyue/internal/version"
-)
-
-func (m Model) renderFooter() string {
-	profile := "unknown"
-	if m.config != nil && m.config.Profile.Pseudo != "" {
-		profile = m.config.Profile.Pseudo
-	}
-
-	left := fmt.Sprintf(" %s@%s",
-		lipgloss.NewStyle().Foreground(cyberRed).Bold(true).Render(profile),
-		lipgloss.NewStyle().Foreground(dimRed).Render(version.Name))
-	leftR := statusBarStyle.Render(left)
-
-	var helpText string
-	switch m.activeTab {
-	case tabDashboard:
-		helpText = "[i] install  [u] update  [s] scan  [ctrl+t] tabs"
-	case tabStudio:
-		helpText = "[enter] send  [ctrl+s] sidebar  [ctrl+t] tabs"
-	case tabShell:
-		helpText = "[enter] run  [ctrl+a] AI panel  [ctrl+c] kill"
-	case tabConfig:
-		helpText = "[up/down] sections  [ctrl+t] tabs"
-	default:
-		helpText = "[ctrl+t] tabs  [ctrl+c] quit"
-	}
-	rightR := statusBarStyle.Render(helpText)
-
-	updateIndicator := ""
-	if len(m.updateStatus) > 0 {
-		needsUpdate := false
-		for _, s := range m.updateStatus {
-			if s.NeedsUpdate {
-				needsUpdate = true
-				break
-			}
-		}
-		if needsUpdate {
-			updateIndicator = lipgloss.NewStyle().Foreground(warnAmber).Render(" [UPD] ")
-		} else {
-			updateIndicator = lipgloss.NewStyle().Foreground(successGreen).Render(" [OK] ")
-		}
-	}
-
-	verStr := lipgloss.NewStyle().Foreground(dimRed).Render("v" + version.Version)
-	midContent := lipgloss.NewStyle().Background(bgSurface).Padding(0, 1).Render(
-		updateIndicator + verStr,
-	)
-
-	gap := m.width - lipgloss.Width(leftR) - lipgloss.Width(rightR) - lipgloss.Width(midContent)
-	if gap < 0 {
-		gap = 0
-	}
-
-	statusLine := lipgloss.JoinHorizontal(lipgloss.Bottom,
-		leftR,
-		strings.Repeat(" ", gap),
-		midContent,
-		rightR,
-	)
-
-	helpLine := lipgloss.NewStyle().Background(bgSurface).Foreground(textMuted).Render(
-		lipgloss.NewStyle().Padding(0, 1).Render(m.helpModel.View(keys)))
-
-	return lipgloss.JoinVertical(lipgloss.Left, statusLine, helpLine)
-}

internal/tui/handlers.go

@@ -1,360 +0,0 @@
-package tui
-
-import (
-	"fmt"
-	"os"
-	"os/exec"
-	"strings"
-	"time"
-
-	tea "github.com/charmbracelet/bubbletea"
-	"github.com/muyue/muyue/internal/lsp"
-	"github.com/muyue/muyue/internal/mcp"
-	"github.com/muyue/muyue/internal/proxy"
-	"github.com/muyue/muyue/internal/scanner"
-	"github.com/muyue/muyue/internal/updater"
-	"github.com/muyue/muyue/internal/workflow"
-)
-
-func (m Model) handleKey(msg tea.KeyMsg) (tea.Model, tea.Cmd) {
-	if m.showingQuit {
-		return m.handleQuitConfirm(msg)
-	}
-	if m.showingTabMenu {
-		return m.handleTabMenu(msg)
-	}
-
-	if m.activeTab == tabShell {
-		return m.handleShellKey(msg)
-	}
-
-	switch msg.String() {
-	case "ctrl+c":
-		now := time.Now()
-		if m.ctrlCCount > 0 && now.Sub(m.lastCtrlC) < 2*time.Second {
-			return m, tea.Quit
-		}
-		m.ctrlCCount++
-		m.lastCtrlC = now
-		m.showingQuit = true
-		m.confirmCursor = 1
-		m.viewport.SetContent(m.renderContent())
-		return m, nil
-	case "ctrl+t":
-		m.showingTabMenu = true
-		m.tabMenuCursor = int(m.activeTab)
-		m.viewport.SetContent(m.renderContent())
-		return m, nil
-	case "ctrl+s":
-		if m.activeTab == tabStudio {
-			m.studioSidebarOpen = !m.studioSidebarOpen
-			m.viewport.SetContent(m.renderContent())
-		}
-	case "enter":
-		if m.activeTab == tabStudio && m.chatInput != "" && !m.chatLoading {
-			return m.handleChatSubmit()
-		}
-	case "backspace":
-		if m.activeTab == tabStudio && len(m.chatInput) > 0 {
-			m.chatInput = m.chatInput[:len(m.chatInput)-1]
-			m.viewport.SetContent(m.renderContent())
-		}
-	default:
-		if m.activeTab == tabStudio && len(msg.String()) == 1 && !m.chatLoading {
-			m.chatInput += msg.String()
-			m.viewport.SetContent(m.renderContent())
-		}
-	}
-
-	if m.activeTab == tabDashboard {
-		return m.handleDashboardKey(msg)
-	}
-	if m.activeTab == tabStudio {
-		return m.handleStudioKey(msg)
-	}
-
-	return m, nil
-}
-
-func cleanup(m Model) {
-	if m.daemon != nil {
-		m.daemon.Stop()
-	}
-	if m.previewSrv != nil {
-		m.previewSrv.Stop()
-	}
-	for _, agentType := range []proxy.AgentType{proxy.AgentCrush, proxy.AgentClaude} {
-		m.proxyMgr.Stop(agentType)
-	}
-}
-
-func (m Model) handleQuitConfirm(msg tea.KeyMsg) (tea.Model, tea.Cmd) {
-	switch msg.String() {
-	case "y", "Y", "o", "O":
-		m.showingQuit = false
-		cleanup(m)
-		return m, tea.Quit
-	case "n", "N", "esc":
-		m.showingQuit = false
-		m.ctrlCCount = 0
-		m.viewport.SetContent(m.renderContent())
-		return m, nil
-	case "left", "h":
-		m.confirmCursor = 0
-		m.viewport.SetContent(m.renderContent())
-		return m, nil
-	case "right", "l":
-		m.confirmCursor = 1
-		m.viewport.SetContent(m.renderContent())
-		return m, nil
-	case "enter":
-		if m.confirmCursor == 0 {
-			m.showingQuit = false
-			cleanup(m)
-			return m, tea.Quit
-		}
-		m.showingQuit = false
-		m.ctrlCCount = 0
-		m.viewport.SetContent(m.renderContent())
-		return m, nil
-	case "ctrl+c":
-		m.showingQuit = false
-		cleanup(m)
-		return m, tea.Quit
-	}
-	return m, nil
-}
-
-func (m Model) handleTabMenu(msg tea.KeyMsg) (tea.Model, tea.Cmd) {
-	switch msg.String() {
-	case "ctrl+c", "esc":
-		m.showingTabMenu = false
-		m.viewport.SetContent(m.renderContent())
-		return m, nil
-	case "up", "k":
-		if m.tabMenuCursor > 0 {
-			m.tabMenuCursor--
-		}
-		return m, nil
-	case "down", "j":
-		if m.tabMenuCursor < int(tabCount)-1 {
-			m.tabMenuCursor++
-		}
-		return m, nil
-	case "enter":
-		m.switchTab(tab(m.tabMenuCursor))
-		m.showingTabMenu = false
-		return m, nil
-	default:
-		for i := 0; i < int(tabCount); i++ {
-			if msg.String() == fmt.Sprintf("%d", i+1) {
-				m.switchTab(tab(i))
-				m.showingTabMenu = false
-				return m, nil
-			}
-		}
-	}
-	return m, nil
-}
-
-func (m *Model) switchTab(t tab) {
-	if t == m.activeTab {
-		return
-	}
-	m.prevTab = m.activeTab
-	m.activeTab = t
-	m.transition = transitionGlitch
-	m.transitionTick = 0
-	m.resizeViewport()
-}
-
-func (m Model) handleDashboardKey(msg tea.KeyMsg) (tea.Model, tea.Cmd) {
-	switch msg.String() {
-	case "i":
-		if m.installing {
-			return m, nil
-		}
-		var missing []string
-		if m.scanResult != nil {
-			for _, t := range m.scanResult.Tools {
-				if !t.Installed {
-					missing = append(missing, t.Name)
-				}
-			}
-		}
-		if len(missing) == 0 {
-			m.installLog = append(m.installLog, itemOKStyle.Render("[OK] All tools already installed!"))
-			m.viewport.SetContent(m.renderContent())
-			return m, nil
-		}
-		needsSudo := checkNeedsSudo(m.scanResult)
-		if needsSudo && !hasSudo() {
-			m.installLog = append(m.installLog, errMsgStyle.Render("[!!] Some tools require sudo. Run: sudo muyue install"))
-			m.viewport.SetContent(m.renderContent())
-			return m, nil
-		}
-		m.installing = true
-		m.installCurrent = 0
-		m.installTotal = len(missing)
-		m.installTool = missing[0]
-		m.progressBar.SetPercent(0)
-		m.viewport.SetContent(m.renderContent())
-		return m, startInstallCmd(m.config, missing, 0)
-	case "u":
-		return m, tea.Cmd(func() tea.Msg {
-			result := scanner.ScanSystem()
-			return updateCheckMsg{statuses: updater.CheckUpdates(result)}
-		})
-	case "s":
-		return m, tea.Cmd(func() tea.Msg {
-			return scanCompleteMsg{result: scanner.ScanSystem()}
-		})
-	case "l":
-		return m, tea.Cmd(func() tea.Msg {
-			servers := lsp.ScanServers()
-			return lspScanMsg{servers: servers}
-		})
-	case "m":
-		return m, tea.Cmd(func() tea.Msg {
-			err := mcp.ConfigureAll(m.config)
-			return mcpConfigMsg{err: err}
-		})
-	}
-	return m, nil
-}
-
-func (m Model) handleStudioKey(msg tea.KeyMsg) (tea.Model, tea.Cmd) {
-	if !m.studioSidebarOpen {
-		return m, nil
-	}
-
-	switch msg.String() {
-	case "1":
-		m.studioPanel = panelChat
-		m.viewport.SetContent(m.renderContent())
-	case "2":
-		m.studioPanel = panelAgents
-		m.viewport.SetContent(m.renderContent())
-	case "3":
-		m.studioPanel = panelWorkflows
-		m.viewport.SetContent(m.renderContent())
-	}
-
-	if m.studioPanel == panelAgents {
-		return m.handleAgentsKey(msg)
-	}
-	if m.studioPanel == panelWorkflows {
-		return m.handleWorkflowKey(msg)
-	}
-
-	return m, nil
-}
-
-func (m Model) handleAgentsKey(msg tea.KeyMsg) (tea.Model, tea.Cmd) {
-	switch msg.String() {
-	case "c":
-		if m.proxyMgr.IsAvailable(proxy.AgentCrush) {
-			m.proxyMgr.Start(proxy.AgentCrush)
-		}
-		m.viewport.SetContent(m.renderContent())
-	case "l":
-		if m.proxyMgr.IsAvailable(proxy.AgentClaude) {
-			m.proxyMgr.Start(proxy.AgentClaude)
-		}
-		m.viewport.SetContent(m.renderContent())
-	}
-	return m, nil
-}
-
-func (m Model) handleWorkflowKey(msg tea.KeyMsg) (tea.Model, tea.Cmd) {
-	if m.orch == nil || m.orch.Workflow == nil {
-		return m, nil
-	}
-
-	wf := m.orch.Workflow
-
-	switch msg.String() {
-	case "a":
-		if wf.Phase == workflow.PhaseReviewing {
-			m.chatLog = append(m.chatLog, userMsgStyle.Render(">> [Plan approved]"))
-			m.chatLoading = true
-			m.viewport.SetContent(m.renderContent())
-			return m, reviewPlanCmd(m.orch, true, "")
-		}
-	case "r":
-		if wf.Phase == workflow.PhaseReviewing {
-			m.chatInput = ""
-			m.chatLog = append(m.chatLog, itemWarnStyle.Render("Type your rejection feedback below:"))
-			m.viewport.SetContent(m.renderContent())
-		}
-	case "g":
-		if wf.Phase == workflow.PhaseGathering && len(wf.Plan.Questions) > 0 && len(wf.Plan.Answers) >= len(wf.Plan.Questions) {
-			m.chatLog = append(m.chatLog, userMsgStyle.Render(">> [Generate plan]"))
-			m.chatLoading = true
-			m.viewport.SetContent(m.renderContent())
-			return m, generatePlanCmd(m.orch)
-		}
-	case "n":
-		if wf.Phase == workflow.PhaseExecuting {
-			current := wf.CurrentStep()
-			if current != nil {
-				m.chatLoading = true
-				m.viewport.SetContent(m.renderContent())
-				return m, continueWorkflowCmd(m.orch, "proceeding")
-			}
-		}
-	case "x":
-		wf.Reset()
-		m.chatLog = append(m.chatLog, itemWarnStyle.Render("Workflow reset."))
-		m.viewport.SetContent(m.renderContent())
-	}
-	return m, nil
-}
-
-func checkNeedsSudo(scan *scanner.ScanResult) bool {
-	if scan == nil {
-		return false
-	}
-	sudoTools := map[string]bool{
-		"docker": true, "git": true, "gh": true, "node": true, "python3": true,
-	}
-	for _, t := range scan.Tools {
-		if !t.Installed && sudoTools[t.Name] {
-			return true
-		}
-	}
-	return false
-}
-
-func hasSudo() bool {
-	if os.Geteuid() == 0 {
-		return true
-	}
-	if _, err := exec.LookPath("sudo"); err == nil {
-		return true
-	}
-	if _, err := exec.LookPath("pkexec"); err == nil {
-		return true
-	}
-	return false
-}
-
-func (m Model) handleChatSubmit() (tea.Model, tea.Cmd) {
-	input := m.chatInput
-	m.chatLog = append(m.chatLog, userMsgStyle.Render(">> "+input))
-	m.chatInput = ""
-	m.chatLoading = true
-	m.viewport.SetContent(m.renderContent())
-	m.viewport.GotoBottom()
-
-	if strings.HasPrefix(input, "/plan ") {
-		goal := strings.TrimPrefix(input, "/plan ")
-		return m, startWorkflowCmd(m.orch, goal)
-	}
-
-	if m.orch != nil && m.orch.Workflow != nil && m.orch.Workflow.Phase != workflow.PhaseIdle {
-		return m, workflowChatCmd(m.orch, input)
-	}
-
-	return m, sendAIMessage(m.orch, input)
-}

internal/tui/header.go

@@ -1,178 +0,0 @@
-package tui
-
-import (
-	"fmt"
-	"strings"
-
-	"github.com/charmbracelet/lipgloss"
-	"github.com/muyue/muyue/internal/version"
-)
-
-func (m Model) renderHeader() string {
-	var tabs []string
-	for i, name := range tabNames {
-		icon := tabIcons[i]
-		if tab(i) == m.activeTab {
-			tabStyle := lipgloss.NewStyle().
-				Background(cyberRed).
-				Foreground(lipgloss.Color("#FFFFFF")).
-				Bold(true).
-				Padding(0, 2)
-			tabs = append(tabs, tabStyle.Render(icon+" "+name))
-		} else {
-			tabStyle := lipgloss.NewStyle().
-				Background(bgSurface).
-				Foreground(textDim).
-				Padding(0, 2)
-			tabs = append(tabs, tabStyle.Render(icon+" "+name))
-		}
-	}
-
-	tabLine := tabBarStyle.Render(lipgloss.JoinHorizontal(lipgloss.Bottom, tabs...))
-
-	timeStr := ""
-	if !m.currentTime.IsZero() {
-		timeStr = m.currentTime.Format("15:04:05")
-	}
-
-	dateStr := ""
-	if !m.currentTime.IsZero() {
-		dateStr = m.currentTime.Format("02/01/2006")
-	}
-
-	rightInfo := lipgloss.NewStyle().Background(bgSurface).Padding(0, 1).Render(
-		lipgloss.JoinHorizontal(lipgloss.Center,
-			lipgloss.NewStyle().Foreground(textDim).Render(dateStr+" "),
-			lipgloss.NewStyle().Foreground(cyberRed).Bold(true).Render(timeStr),
-			lipgloss.NewStyle().Foreground(textMuted).Render("  "+getAnimFrame(m.animationFrame)),
-		),
-	)
-
-	statusDots := ""
-	if m.config != nil {
-		hasAI := false
-		for _, p := range m.config.AI.Providers {
-			if p.Active && p.APIKey != "" {
-				hasAI = true
-				break
-			}
-		}
-		if hasAI {
-			statusDots += lipgloss.NewStyle().Foreground(successGreen).Render("●")
-		} else {
-			statusDots += lipgloss.NewStyle().Foreground(errorRed).Render("●")
-		}
-	} else {
-		statusDots += lipgloss.NewStyle().Foreground(warnAmber).Render("●")
-	}
-
-	statusDots += lipgloss.NewStyle().Foreground(textMuted).Render(" ")
-
-	if m.mcpConfigured {
-		statusDots += lipgloss.NewStyle().Foreground(successGreen).Render("●")
-	} else {
-		statusDots += lipgloss.NewStyle().Foreground(warnAmber).Render("●")
-	}
-
-	statusInfo := lipgloss.NewStyle().Background(bgSurface).Padding(0, 1).Render(
-		lipgloss.JoinHorizontal(lipgloss.Center,
-			lipgloss.NewStyle().Foreground(textDim).Render("SYS "),
-			statusDots,
-		),
-	)
-
-	badge := lipgloss.NewStyle().Foreground(cyberRed).Bold(true).Render("MUYUE")
-	versionBadge := lipgloss.NewStyle().Foreground(dimRed).Render("v" + version.Version)
-
-	logoLine := lipgloss.NewStyle().Background(bgVoid).Padding(0, 1).Render(
-		lipgloss.JoinHorizontal(lipgloss.Center, badge, " ", versionBadge),
-	)
-
-	topLine := lipgloss.JoinHorizontal(lipgloss.Bottom,
-		logoLine,
-		strings.Repeat(" ", max(0, m.width-lipgloss.Width(logoLine)-lipgloss.Width(rightInfo)-lipgloss.Width(statusInfo))),
-		statusInfo,
-		rightInfo,
-	)
-
-	return lipgloss.JoinVertical(lipgloss.Left, topLine, tabLine)
-}
-
-func (m Model) renderTabMenuOverlay() string {
-	menuStyle := lipgloss.NewStyle().
-		Border(lipgloss.RoundedBorder()).
-		BorderForeground(cyberRed).
-		Background(bgCard).
-		Padding(1, 3)
-
-	tabItemStyle := lipgloss.NewStyle().
-		Foreground(textDim).
-		Padding(0, 2)
-
-	tabItemActiveStyle := lipgloss.NewStyle().
-		Foreground(lipgloss.Color("#FFFFFF")).
-		Background(cyberRed).
-		Bold(true).
-		Padding(0, 2)
-
-	descs := []string{
-		"tools, updates & system status",
-		"chat, agents & workflows",
-		"terminal + AI assistant",
-		"profile, API keys & settings",
-	}
-
-	var items []string
-	for i, name := range tabNames {
-		num := lipgloss.NewStyle().Foreground(dimRed).Render(fmt.Sprintf(" %d.", i+1))
-		icon := tabIcons[i] + " "
-		if i == m.tabMenuCursor {
-			item := fmt.Sprintf("%s %s%-10s %s", num, icon, name, lipgloss.NewStyle().Foreground(cyberRose).Render(descs[i]))
-			items = append(items, tabItemActiveStyle.Render(">"+item))
-		} else {
-			item := fmt.Sprintf("%s %s%-10s %s", num, icon, name, lipgloss.NewStyle().Foreground(textMuted).Render(descs[i]))
-			items = append(items, tabItemStyle.Render(" "+item))
-		}
-	}
-
-	header := lipgloss.NewStyle().Foreground(cyberRed).Bold(true).Render("SWITCH TAB")
-	content := header + "\n\n" +
-		strings.Join(items, "\n") +
-		"\n\n" +
-		lipgloss.NewStyle().Foreground(textMuted).Render("up/down navigate | enter select | esc cancel")
-
-	box := menuStyle.Render(content)
-
-	return lipgloss.Place(m.width, m.height,
-		0.5, 0.5,
-		box,
-		lipgloss.WithWhitespaceBackground(bgVoid),
-		lipgloss.WithWhitespaceForeground(textMuted),
-	)
-}
-
-func (m Model) renderQuitOverlay() string {
-	yesStyle := confirmNoStyle
-	noStyle := confirmYesStyle
-	if m.confirmCursor == 0 {
-		yesStyle = confirmYesStyle
-		noStyle = confirmNoStyle
-	}
-
-	frame := lipgloss.NewStyle().Foreground(cyberRed).Render(getAnimFrame(m.animationFrame))
-
-	box := fmt.Sprintf("\n\n  %s Quit muyue?\n\n  %s    %s",
-		frame,
-		yesStyle.Render("[ Yes ]"),
-		noStyle.Render("[ No ]"),
-	)
-
-	content := confirmBoxStyle.Render(box)
-
-	return lipgloss.Place(m.width, m.height,
-		0.5, 0.5,
-		content,
-		lipgloss.WithWhitespaceBackground(bgVoid),
-		lipgloss.WithWhitespaceForeground(textMuted),
-	)
-}

internal/tui/helpers.go

@@ -1,19 +0,0 @@
-package tui
-
-import (
-	"regexp"
-
-	"github.com/muyue/muyue/internal/workflow"
-)
-
-var versionRegex = regexp.MustCompile(`\d+\.\d+\.\d+`)
-
-func extractVersion(s string) string {
-	return versionRegex.FindString(s)
-}
-
-type previewFile = workflow.PreviewFile
-
-func parsePreviewFiles(response string) []previewFile {
-	return workflow.ParsePreviewFiles(response)
-}

internal/tui/model.go

@@ -1,395 +0,0 @@
-package tui
-
-import (
-	"fmt"
-	"os"
-	"path/filepath"
-	"strings"
-	"time"
-
-	"github.com/charmbracelet/bubbles/help"
-	"github.com/charmbracelet/bubbles/progress"
-	"github.com/charmbracelet/bubbles/spinner"
-	"github.com/charmbracelet/bubbles/viewport"
-	tea "github.com/charmbracelet/bubbletea"
-	"github.com/charmbracelet/lipgloss"
-	"github.com/muyue/muyue/internal/config"
-	"github.com/muyue/muyue/internal/daemon"
-	"github.com/muyue/muyue/internal/lsp"
-	"github.com/muyue/muyue/internal/mcp"
-	"github.com/muyue/muyue/internal/orchestrator"
-	"github.com/muyue/muyue/internal/preview"
-	"github.com/muyue/muyue/internal/proxy"
-	"github.com/muyue/muyue/internal/scanner"
-	"github.com/muyue/muyue/internal/skills"
-)
-
-func NewModel(cfg *config.MuyueConfig, scan *scanner.ScanResult) Model {
-	orch, _ := orchestrator.New(cfg)
-	proxyMgr := proxy.NewManager()
-	d := daemon.NewDaemon(cfg, 1*time.Hour)
-
-	lspServers := lsp.ScanServers()
-	skillList, _ := skills.List()
-
-	mcpConfigured := false
-	if err := mcp.ConfigureAll(cfg); err == nil {
-		mcpConfigured = true
-	}
-
-	if cfg.Profile.Preferences.AutoUpdate {
-		d.Start()
-	}
-
-	sp := spinner.New()
-	sp.Spinner = spinner.Dot
-	sp.Style = lipgloss.NewStyle().Foreground(cyberRed)
-
-	prog := progress.New(progress.WithGradient("#FF0033", "#FF1A5E"))
-
-	cwd, _ := os.Getwd()
-
-	return Model{
-		config:     cfg,
-		scanResult: scan,
-		activeTab:  tabDashboard,
-		chatLog: []string{
-			aiMsgStyle.Render(" >> Welcome to Studio! Chat with your AI assistant here."),
-			aiMsgStyle.Render(" >> Configure agents and workflows from the sidebar. Type /plan <goal> to start."),
-		},
-		orch:           orch,
-		proxyMgr:       proxyMgr,
-		chatInput:      "",
-		chatLoading:    false,
-		daemon:         d,
-		lspServers:     lspServers,
-		mcpConfigured:  mcpConfigured,
-		skillList:      skillList,
-		helpModel:      help.New(),
-		progressBar:    prog,
-		spinner:        sp,
-		showingQuit:    false,
-		confirmCursor:  1,
-		showingTabMenu: false,
-		tabMenuCursor:  0,
-		termCwd:        cwd,
-		studioPanel:    panelChat,
-		studioSidebarOpen: true,
-		termAIChat: []string{
-			aiMsgStyle.Render(" >> I know your system inside out. Ask me anything."),
-		},
-		termAIShow:      true,
-		configSection:   configProfile,
-		configField:     0,
-		animationFrame:  0,
-		currentTime:     time.Now(),
-		transition:      transitionNone,
-	}
-}
-
-func animTick() tea.Cmd {
-	return tea.Tick(100*time.Millisecond, func(t time.Time) tea.Msg {
-		return animTickMsg{time: t}
-	})
-}
-
-func clockTick() tea.Cmd {
-	return tea.Tick(1*time.Second, func(t time.Time) tea.Msg {
-		return clockTickMsg{time: t}
-	})
-}
-
-func (m Model) Init() tea.Cmd {
-	return tea.Batch(spinner.Tick, animTick(), clockTick(), tea.EnterAltScreen)
-}
-
-func (m Model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
-	switch msg := msg.(type) {
-	case tea.KeyMsg:
-		return m.handleKey(msg)
-	case spinner.TickMsg:
-		var cmd tea.Cmd
-		m.spinner, cmd = m.spinner.Update(msg)
-		return m, cmd
-	case animTickMsg:
-		m.animationFrame++
-
-		if m.transition == transitionGlitch {
-			m.transitionTick++
-			if m.transitionTick > 5 {
-				m.transition = transitionScan
-				m.transitionTick = 0
-			}
-		} else if m.transition == transitionScan {
-			m.transitionTick++
-			if m.transitionTick > 8 {
-				m.transition = transitionTypewriter
-				m.transitionTick = 0
-				m.typewriterBuf = m.renderContent()
-				m.typewriterPos = 0
-			}
-		} else if m.transition == transitionTypewriter {
-			m.typewriterPos += 3
-			if m.typewriterPos >= len(m.typewriterBuf) {
-				m.transition = transitionNone
-			}
-		}
-
-		return m, animTick()
-	case clockTickMsg:
-		m.currentTime = msg.time
-		return m, clockTick()
-	case progress.FrameMsg:
-		pm, cmd := m.progressBar.Update(msg)
-		m.progressBar = pm.(progress.Model)
-		return m, cmd
-	case termOutputMsg:
-		m.termLog = append(m.termLog, msg.line)
-		if m.activeTab == tabShell {
-			m.viewport.SetContent(m.renderContent())
-			m.viewport.GotoBottom()
-		}
-		return m, nil
-	case termExitMsg:
-		m.termRunning = false
-		m.termLog = append(m.termLog, lipgloss.NewStyle().Foreground(dimRed).Render("(process exited)"))
-		m.termCmd = nil
-		if m.activeTab == tabShell {
-			m.viewport.SetContent(m.renderContent())
-		}
-		return m, nil
-	case aiResponseMsg:
-		m.chatLoading = false
-		m.termAILoading = false
-		content := msg.content
-
-		if m.activeTab == tabShell && m.termAIShow {
-			m.termAIChat = append(m.termAIChat, aiMsgStyle.Render(" "+content))
-			if m.activeTab == tabShell {
-				m.viewport.SetContent(m.renderContent())
-				m.viewport.GotoBottom()
-			}
-		} else {
-			m.chatLog = append(m.chatLog, aiMsgStyle.Render(" "+content))
-			if m.orch != nil && m.orch.Workflow != nil {
-				previewFiles := parsePreviewFiles(content)
-				if len(previewFiles) > 0 {
-					m.handlePreview(previewFiles)
-				}
-			}
-			m.viewport.SetContent(m.renderContent())
-			m.viewport.GotoBottom()
-		}
-		return m, nil
-	case aiErrMsg:
-		m.chatLoading = false
-		m.termAILoading = false
-		errText := errMsgStyle.Render(" [ERROR] " + msg.err.Error())
-		if m.activeTab == tabShell && m.termAIShow {
-			m.termAIChat = append(m.termAIChat, errText)
-		} else {
-			m.chatLog = append(m.chatLog, errText)
-		}
-		m.viewport.SetContent(m.renderContent())
-		m.viewport.GotoBottom()
-		return m, nil
-	case scanCompleteMsg:
-		m.scanResult = msg.result
-		m.viewport.SetContent(m.renderContent())
-		return m, nil
-	case installCompleteMsg:
-		m.installing = false
-		for _, r := range msg.results {
-			status := itemOKStyle.Render("[OK]")
-			if !r.Success {
-				status = itemMissingStyle.Render("[--]")
-			}
-			m.installLog = append(m.installLog, fmt.Sprintf("  %s %s: %s", status, r.Tool, r.Message))
-		}
-		m.scanResult = scanner.ScanSystem()
-		m.progressBar.SetPercent(1)
-		m.viewport.SetContent(m.renderContent())
-		return m, nil
-	case installProgressMsg:
-		status := itemOKStyle.Render("[OK]")
-		m.installLog = append(m.installLog, fmt.Sprintf("  %s %s installed", status, msg.tool))
-		m.installCurrent = msg.current
-		m.installTool = ""
-		pct := float64(msg.current) / float64(max(msg.total, 1))
-		m.progressBar.SetPercent(pct)
-		m.viewport.SetContent(m.renderContent())
-		return m, nil
-	case installBatchMsg:
-		status := itemOKStyle.Render("[OK]")
-		if !msg.result.Success {
-			status = itemMissingStyle.Render("[--]")
-		}
-		m.installLog = append(m.installLog, fmt.Sprintf("  %s %s: %s", status, msg.result.Tool, msg.result.Message))
-		m.installCurrent = msg.index + 1
-		m.installTotal = len(msg.tools)
-		pct := float64(m.installCurrent) / float64(max(m.installTotal, 1))
-		m.progressBar.SetPercent(pct)
-		if msg.index+1 < len(msg.tools) {
-			m.installTool = msg.tools[msg.index+1]
-			m.viewport.SetContent(m.renderContent())
-			return m, startInstallCmd(msg.config, msg.tools, msg.index+1)
-		}
-		m.installing = false
-		m.scanResult = scanner.ScanSystem()
-		m.viewport.SetContent(m.renderContent())
-		return m, nil
-	case updateCheckMsg:
-		m.updateStatus = msg.statuses
-		m.viewport.SetContent(m.renderContent())
-		return m, nil
-	case previewReadyMsg:
-		m.previewURL = msg.url
-		m.viewport.SetContent(m.renderContent())
-		return m, nil
-	case lspScanMsg:
-		m.lspServers = msg.servers
-		m.viewport.SetContent(m.renderContent())
-		return m, nil
-	case mcpConfigMsg:
-		if msg.err == nil {
-			m.mcpConfigured = true
-		}
-		m.viewport.SetContent(m.renderContent())
-		return m, nil
-	case daemonLogMsg:
-		m.viewport.SetContent(m.renderContent())
-		return m, nil
-	case tea.WindowSizeMsg:
-		m.width = msg.Width
-		m.height = msg.Height
-		m.helpModel.Width = msg.Width
-		headerH := 2
-		footerH := 2
-		inputH := 0
-		if m.activeTab == tabStudio || m.activeTab == tabShell {
-			inputH = 2
-		}
-		contentH := msg.Height - headerH - footerH - inputH
-		if contentH < 1 {
-			contentH = 1
-		}
-		m.viewport = viewport.New(msg.Width, contentH)
-		m.viewport.Width = msg.Width
-		m.viewport.Height = contentH
-		m.progressBar.Width = msg.Width - 20
-		m.ready = true
-		m.viewport.SetContent(m.renderContent())
-		return m, nil
-	}
-	return m, nil
-}
-
-func (m Model) View() string {
-	if !m.ready {
-		return lipgloss.NewStyle().Foreground(cyberRed).Bold(true).Render("Initializing muyue...")
-	}
-
-	if m.showingQuit {
-		return m.renderQuitOverlay()
-	}
-
-	if m.showingTabMenu {
-		return m.renderTabMenuOverlay()
-	}
-
-	if m.transition == transitionGlitch {
-		return renderGlitchEffect(m.width, m.height, m.transitionTick)
-	}
-
-	if m.transition == transitionScan {
-		return renderScanEffect(m.width, m.height, m.transitionTick)
-	}
-
-	if m.transition == transitionTypewriter {
-		var b strings.Builder
-		b.WriteString(m.renderHeader())
-		b.WriteString("\n")
-		b.WriteString(typewriterRender(m.typewriterBuf, m.typewriterPos))
-		if m.activeTab == tabStudio {
-			b.WriteString("\n")
-			b.WriteString(m.renderStudioInput())
-		}
-		if m.activeTab == tabShell {
-			b.WriteString("\n")
-			b.WriteString(m.renderShellInput())
-		}
-		b.WriteString("\n")
-		b.WriteString(m.renderFooter())
-		return b.String()
-	}
-
-	var b strings.Builder
-	b.WriteString(m.renderHeader())
-	b.WriteString("\n")
-	b.WriteString(m.viewport.View())
-	if m.activeTab == tabStudio {
-		b.WriteString("\n")
-		b.WriteString(m.renderStudioInput())
-	}
-	if m.activeTab == tabShell {
-		b.WriteString("\n")
-		b.WriteString(m.renderShellInput())
-	}
-	b.WriteString("\n")
-	b.WriteString(m.renderFooter())
-
-	return b.String()
-}
-
-func (m Model) renderContent() string {
-	switch m.activeTab {
-	case tabDashboard:
-		return m.renderDashboard()
-	case tabStudio:
-		return m.renderStudio()
-	case tabShell:
-		return m.renderShell()
-	case tabConfig:
-		return m.renderConfig()
-	default:
-		return ""
-	}
-}
-
-func (m *Model) resizeViewport() {
-	headerH := 2
-	footerH := 2
-	inputH := 0
-	if m.activeTab == tabStudio || m.activeTab == tabShell {
-		inputH = 2
-	}
-	contentH := m.height - headerH - footerH - inputH
-	if contentH < 1 {
-		contentH = 1
-	}
-	m.viewport = viewport.New(m.width, contentH)
-	m.viewport.Width = m.width
-	m.viewport.Height = contentH
-	m.viewport.SetContent(m.renderContent())
-}
-
-func (m *Model) handlePreview(files []previewFile) {
-	dir := filepath.Join(os.TempDir(), "muyue-preview")
-	os.RemoveAll(dir)
-	os.MkdirAll(dir, 0755)
-
-	for _, f := range files {
-		preview.CreatePreviewFile(dir, f.Filename, f.Content)
-	}
-
-	if m.previewSrv != nil {
-		m.previewSrv.Stop()
-	}
-	m.previewSrv = preview.NewPreviewServer(dir)
-	if err := m.previewSrv.Start(8765); err != nil {
-		m.chatLog = append(m.chatLog, errMsgStyle.Render(" preview error: "+err.Error()))
-	} else {
-		m.previewURL = "http://127.0.0.1:8765"
-		m.chatLog = append(m.chatLog, itemOKStyle.Render(" Preview: http://127.0.0.1:8765"))
-	}
-}

internal/tui/studio.go

@@ -1,253 +0,0 @@
-package tui
-
-import (
-	"fmt"
-	"strings"
-
-	"github.com/charmbracelet/lipgloss"
-	"github.com/muyue/muyue/internal/proxy"
-	"github.com/muyue/muyue/internal/workflow"
-)
-
-func (m Model) renderStudio() string {
-	if m.studioSidebarOpen {
-		sidebarWidth := 28
-		chatWidth := m.width - sidebarWidth - 2
-		if chatWidth < 20 {
-			chatWidth = 20
-			sidebarWidth = m.width - chatWidth - 2
-		}
-
-		sidebar := m.renderStudioSidebar(sidebarWidth)
-		chat := m.renderStudioChat(chatWidth)
-
-		return lipgloss.JoinHorizontal(lipgloss.Top, sidebar, chat)
-	}
-
-	return m.renderStudioChat(m.width)
-}
-
-func (m Model) renderStudioSidebar(width int) string {
-	var b strings.Builder
-
-	b.WriteString(renderSectionHeader("STUDIO", "[<>]"))
-	b.WriteString("\n\n")
-
-	panels := []struct {
-		name  string
-		panel studioPanel
-		icon  string
-	}{
-		{"Chat", panelChat, "[#]"},
-		{"Agents", panelAgents, "[*]"},
-		{"Workflows", panelWorkflows, "[~]"},
-	}
-
-	for _, p := range panels {
-		if m.studioPanel == p.panel {
-			activeStyle := lipgloss.NewStyle().
-				Foreground(lipgloss.Color("#FFFFFF")).
-				Background(cyberRed).
-				Bold(true).
-				Padding(0, 1)
-			b.WriteString(activeStyle.Render(p.icon + " " + p.name))
-			b.WriteString("\n")
-		} else {
-			inactiveStyle := lipgloss.NewStyle().
-				Foreground(textDim).
-				Padding(0, 1)
-			b.WriteString(inactiveStyle.Render(p.icon + " " + p.name))
-			b.WriteString("\n")
-		}
-	}
-
-	b.WriteString("\n")
-	b.WriteString(lipgloss.NewStyle().Foreground(borderDim).Render(strings.Repeat("─", width-4)))
-	b.WriteString("\n\n")
-
-	switch m.studioPanel {
-	case panelAgents:
-		m.renderAgentsSidebar(&b, width)
-	case panelWorkflows:
-		m.renderWorkflowSidebar(&b, width)
-	default:
-		m.renderChatSidebar(&b, width)
-	}
-
-	return sidebarStyle.Width(width).Render(b.String())
-}
-
-func (m Model) renderChatSidebar(b *strings.Builder, width int) {
-	b.WriteString(lipgloss.NewStyle().Foreground(textMuted).Render("Active Provider"))
-	b.WriteString("\n")
-	provider := "none"
-	if m.config != nil {
-		provider = m.config.Profile.Preferences.DefaultAI
-	}
-	b.WriteString(lipgloss.NewStyle().Foreground(cyberRed).Bold(true).Render("  " + provider))
-	b.WriteString("\n\n")
-
-	b.WriteString(lipgloss.NewStyle().Foreground(textMuted).Render("Commands"))
-	b.WriteString("\n")
-	cmds := []string{"/plan <goal>", "/help"}
-	for _, c := range cmds {
-		b.WriteString(lipgloss.NewStyle().Foreground(dimRed).Render("  " + c))
-		b.WriteString("\n")
-	}
-
-	if m.previewURL != "" {
-		b.WriteString("\n")
-		b.WriteString(lipgloss.NewStyle().Foreground(textMuted).Render("Preview"))
-		b.WriteString("\n")
-		b.WriteString(itemOKStyle.Render("  " + m.previewURL))
-		b.WriteString("\n")
-	}
-}
-
-func (m Model) renderAgentsSidebar(b *strings.Builder, width int) {
-	agents := []struct {
-		name      string
-		agentType proxy.AgentType
-		tool      string
-	}{
-		{"Crush", proxy.AgentCrush, "GLM"},
-		{"Claude Code", proxy.AgentClaude, "Anthropic"},
-	}
-
-	for _, a := range agents {
-		status, _ := m.proxyMgr.Status(a.agentType)
-		available := m.proxyMgr.IsAvailable(a.agentType)
-
-		var statusIcon string
-		switch status {
-		case proxy.StatusRunning:
-			statusIcon = lipgloss.NewStyle().Foreground(neonRed).Render("[>> running]")
-		case proxy.StatusStopped:
-			statusIcon = lipgloss.NewStyle().Foreground(textMuted).Render("[|| stopped]")
-		case proxy.StatusError:
-			statusIcon = lipgloss.NewStyle().Foreground(errorRed).Render("[!! error]")
-		default:
-			if available {
-				statusIcon = lipgloss.NewStyle().Foreground(successGreen).Render("[OK available]")
-			} else {
-				statusIcon = lipgloss.NewStyle().Foreground(textMuted).Render("[-- not installed]")
-			}
-		}
-
-		b.WriteString(lipgloss.NewStyle().Foreground(textBright).Bold(true).Render(a.name))
-		b.WriteString("\n")
-		b.WriteString(fmt.Sprintf("  %s\n", statusIcon))
-		b.WriteString(lipgloss.NewStyle().Foreground(dimRed).Render(fmt.Sprintf("  %s\n", a.tool)))
-		b.WriteString("\n")
-	}
-
-	b.WriteString(lipgloss.NewStyle().Foreground(textMuted).Render("Actions"))
-	b.WriteString("\n")
-	b.WriteString(lipgloss.NewStyle().Foreground(cyberRed).Bold(true).Render("  [c]"))
-	b.WriteString(lipgloss.NewStyle().Foreground(textMain).Render(" Start Crush"))
-	b.WriteString("\n")
-	b.WriteString(lipgloss.NewStyle().Foreground(cyberRed).Bold(true).Render("  [l]"))
-	b.WriteString(lipgloss.NewStyle().Foreground(textMain).Render(" Start Claude"))
-	b.WriteString("\n")
-}
-
-func (m Model) renderWorkflowSidebar(b *strings.Builder, width int) {
-	if m.orch == nil || m.orch.Workflow == nil {
-		b.WriteString(lipgloss.NewStyle().Foreground(textMuted).Render("No active workflow."))
-		b.WriteString("\n\n")
-		b.WriteString(lipgloss.NewStyle().Foreground(dimRed).Render("Use /plan <goal> in chat"))
-		b.WriteString("\n")
-		b.WriteString(lipgloss.NewStyle().Foreground(dimRed).Render("to start a workflow."))
-		b.WriteString("\n")
-		return
-	}
-
-	wf := m.orch.Workflow
-
-	phaseColors := map[workflow.Phase]lipgloss.Style{
-		workflow.PhaseIdle:      lipgloss.NewStyle().Foreground(textMuted),
-		workflow.PhaseGathering: lipgloss.NewStyle().Foreground(warnAmber).Bold(true),
-		workflow.PhasePlanning:  lipgloss.NewStyle().Foreground(cyberPink).Bold(true),
-		workflow.PhaseReviewing: lipgloss.NewStyle().Foreground(cyberRose).Bold(true),
-		workflow.PhaseExecuting: lipgloss.NewStyle().Foreground(cyberRed).Bold(true),
-		workflow.PhaseDone:      lipgloss.NewStyle().Foreground(successGreen).Bold(true),
-		workflow.PhaseError:     lipgloss.NewStyle().Foreground(errorRed).Bold(true),
-	}
-
-	if style, ok := phaseColors[wf.Phase]; ok {
-		b.WriteString(style.Render(string(wf.Phase)))
-	}
-	b.WriteString("\n\n")
-
-	if wf.Plan.Goal != "" {
-		b.WriteString(lipgloss.NewStyle().Foreground(textMuted).Render("Goal"))
-		b.WriteString("\n")
-		b.WriteString(lipgloss.NewStyle().Foreground(textMain).Render(wf.Plan.Goal))
-		b.WriteString("\n\n")
-	}
-
-	if wf.Phase == workflow.PhaseExecuting {
-		done, total := wf.Progress()
-		m.progressBar.SetPercent(float64(done) / float64(max(total, 1)))
-		b.WriteString(m.progressBar.View())
-		b.WriteString(fmt.Sprintf(" %d/%d", done, total))
-		b.WriteString("\n\n")
-	}
-
-	b.WriteString(lipgloss.NewStyle().Foreground(textMuted).Render("Controls"))
-	b.WriteString("\n")
-	controls := []struct {
-		key  string
-		desc string
-	}{
-		{"[a]", "Approve plan"},
-		{"[r]", "Reject plan"},
-		{"[g]", "Generate plan"},
-		{"[n]", "Next step"},
-		{"[x]", "Cancel"},
-	}
-	for _, c := range controls {
-		b.WriteString(lipgloss.NewStyle().Foreground(cyberRed).Bold(true).Render("  "+c.key))
-		b.WriteString(lipgloss.NewStyle().Foreground(textDim).Render(" "+c.desc))
-		b.WriteString("\n")
-	}
-}
-
-func (m Model) renderStudioChat(width int) string {
-	var b strings.Builder
-
-	chatHeader := renderSectionHeader("CHAT", "[#]")
-	if m.chatLoading {
-		chatHeader += "  " + m.spinner.View() + lipgloss.NewStyle().Foreground(warnAmber).Render("thinking...")
-	}
-	b.WriteString(chatHeader)
-	b.WriteString("\n\n")
-
-	sep := lipgloss.NewStyle().Foreground(borderDim).Render(strings.Repeat("─", max(width-4, 10)))
-	b.WriteString(" " + sep)
-	b.WriteString("\n\n")
-
-	for _, msg := range m.chatLog {
-		b.WriteString(msg)
-		b.WriteString("\n\n")
-	}
-
-	return b.String()
-}
-
-func (m Model) renderStudioInput() string {
-	if m.chatLoading {
-		return lipgloss.NewStyle().Background(bgInput).Padding(0, 1).Render(
-			inputStyle.Render(">> ") + m.spinner.View() + lipgloss.NewStyle().Foreground(textMuted).Render(" thinking..."),
-		)
-	}
-	cursor := lipgloss.NewStyle().Foreground(cyberRed).Render("▎")
-	return lipgloss.NewStyle().Background(bgInput).Padding(0, 1).Render(
-		inputStyle.Render(">> ") + m.chatInput + cursor,
-	)
-}
-
-func (m Model) handleStudioPanelSwitch(panel studioPanel) {
-	m.studioPanel = panel
-	m.viewport.SetContent(m.renderContent())
-}

internal/tui/styles.go

@@ -1,196 +0,0 @@
-package tui
-
-import (
-	"github.com/charmbracelet/lipgloss"
-)
-
-var (
-	cyberRed       = lipgloss.Color("#FF0033")
-	cyberRedDark   = lipgloss.Color("#8B0020")
-	cyberRedDeep   = lipgloss.Color("#5C0015")
-	cyberPink      = lipgloss.Color("#FF1A5E")
-	cyberRose      = lipgloss.Color("#FF4D6D")
-	neonRed        = lipgloss.Color("#FF1744")
-	brightRed      = lipgloss.Color("#FF5252")
-	dimRed         = lipgloss.Color("#6B2033")
-	mutedRed       = lipgloss.Color("#4A1525")
-
-	textBright     = lipgloss.Color("#EAE0E2")
-	textMain       = lipgloss.Color("#D4C4C8")
-	textDim        = lipgloss.Color("#8A7A7E")
-	textMuted      = lipgloss.Color("#5A4F52")
-
-	successGreen   = lipgloss.Color("#00E676")
-	warnAmber      = lipgloss.Color("#FFD740")
-	errorRed       = lipgloss.Color("#FF1744")
-
-	bgVoid         = lipgloss.Color("#0A0A0C")
-	bgBase         = lipgloss.Color("#0F0D10")
-	bgSurface      = lipgloss.Color("#161218")
-	bgPanel        = lipgloss.Color("#1C1719")
-	bgCard         = lipgloss.Color("#221B1E")
-	bgInput        = lipgloss.Color("#2A2225")
-
-	borderDim      = lipgloss.Color("#2A1F22")
-	borderRed      = lipgloss.Color("#FF003344")
-	borderRedFull  = lipgloss.Color("#FF0033")
-)
-
-var (
-	baseStyle = lipgloss.NewStyle()
-
-	titleBlockStyle = lipgloss.NewStyle().
-			Foreground(cyberRed).
-			Bold(true)
-
-	sectionTitleStyle = lipgloss.NewStyle().
-				Foreground(cyberRed).
-				Bold(true)
-
-	labelStyle = lipgloss.NewStyle().
-			Foreground(textDim).
-			Width(14)
-
-	valueStyle = lipgloss.NewStyle().
-			Foreground(textMain)
-
-	cardStyle = lipgloss.NewStyle().
-			Background(bgCard).
-			Border(lipgloss.RoundedBorder()).
-			BorderForeground(borderDim).
-			Padding(0, 1)
-
-	cardActiveStyle = lipgloss.NewStyle().
-			Background(bgCard).
-			Border(lipgloss.RoundedBorder()).
-			BorderForeground(cyberRed).
-			Padding(0, 1)
-
-	sidebarStyle = lipgloss.NewStyle().
-			Background(bgSurface).
-			Border(lipgloss.Border{Right: "│"}).
-			BorderForeground(borderDim).
-			Padding(0, 1)
-
-	statusBarStyle = lipgloss.NewStyle().
-			Background(bgSurface).
-			Foreground(textDim).
-			Padding(0, 1)
-
-	inputStyle = lipgloss.NewStyle().
-			Foreground(cyberRed)
-
-	userMsgStyle = lipgloss.NewStyle().
-			Foreground(cyberRose)
-
-	aiMsgStyle = lipgloss.NewStyle().
-			Foreground(textMain)
-
-	errMsgStyle = lipgloss.NewStyle().
-			Foreground(errorRed)
-
-	itemOKStyle = lipgloss.NewStyle().Foreground(successGreen)
-	itemMissingStyle = lipgloss.NewStyle().Foreground(errorRed)
-	itemWarnStyle = lipgloss.NewStyle().Foreground(warnAmber)
-	itemPendingStyle = lipgloss.NewStyle().Foreground(textMuted)
-
-	confirmBoxStyle = lipgloss.NewStyle().
-				Border(lipgloss.RoundedBorder()).
-				BorderForeground(cyberRed).
-				Background(bgCard).
-				Foreground(textBright).
-				Padding(1, 3).
-				Bold(true)
-
-	confirmYesStyle = lipgloss.NewStyle().Foreground(successGreen).Bold(true)
-	confirmNoStyle = lipgloss.NewStyle().Foreground(textMuted)
-
-	badgeStyle = lipgloss.NewStyle().
-			Background(cyberRed).
-			Foreground(lipgloss.Color("#FFFFFF")).
-			Padding(0, 1).
-			Bold(true)
-
-	tabBarStyle = lipgloss.NewStyle().Background(bgSurface)
-
-	stepDoneStyle = lipgloss.NewStyle().Foreground(successGreen)
-	stepPendingStyle = lipgloss.NewStyle().Foreground(textMuted)
-	stepCurrentStyle = lipgloss.NewStyle().Foreground(cyberRed).Bold(true)
-	stepErrorStyle = lipgloss.NewStyle().Foreground(errorRed)
-)
-
-var logoLines = []string{
-	"███╗   ███╗██╗   ██╗ █████╗ ███╗   ██╗███████╗",
-	"████╗ ████║╚██╗ ██╔╝██╔══██╗████╗  ██║██╔════╝",
-	"██╔████╔██║ ╚████╔╝ ███████║██╔██╗ ██║███████╗",
-	"██║╚██╔╝██║  ╚██╔╝  ██╔══██║██║╚██╗██║╚════██║",
-	"██║ ╚═╝ ██║   ██║   ██║  ██║██║ ╚████║███████║",
-	"╚═╝     ╚═╝   ╚═╝   ╚═╝  ╚═╝╚═╝  ╚═══╝╚══════╝",
-}
-
-var scanFrames = []string{
-	"───────────────────────────     ───",
-	"   ─────────────────────────── ─── ",
-	"── ────────────────────────────    ",
-	"─  ─── ────────────────────────────",
-	"───   ─────────────────────────── ─",
-	" ──── ─────────────────────────────",
-}
-
-func getAnimFrame(frame int) string {
-	frames := []string{
-		"⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏",
-	}
-	return frames[frame%len(frames)]
-}
-
-func getScanFrame(frame int) string {
-	return scanFrames[frame%len(scanFrames)]
-}
-
-func renderLogo() string {
-	styled := make([]string, len(logoLines))
-	for i, line := range logoLines {
-		styled[i] = lipgloss.NewStyle().Foreground(cyberRed).Bold(true).Render(line)
-	}
-	return lipgloss.JoinVertical(lipgloss.Left, styled...)
-}
-
-func renderBlockTitle(text string) string {
-	width := len(text) + 6
-	top := lipgloss.NewStyle().Foreground(dimRed).Render(
-		"╭" + repeatStr("─", width) + "╮",
-	)
-	content := lipgloss.NewStyle().Foreground(cyberRed).Bold(true).Render(
-		"│ ■ " + text + " ■ │",
-	)
-	bottom := lipgloss.NewStyle().Foreground(dimRed).Render(
-		"╰" + repeatStr("─", width) + "╯",
-	)
-	return lipgloss.JoinVertical(lipgloss.Left, top, content, bottom)
-}
-
-func renderSectionHeader(title string, icon string) string {
-	return lipgloss.NewStyle().Foreground(cyberRed).Bold(true).Render(
-		"■ "+icon+" "+title+" ■",
-	)
-}
-
-func renderProgressBar(pct float64, width int) string {
-	filled := int(float64(width) * pct)
-	empty := width - filled
-	bar := lipgloss.NewStyle().Foreground(cyberRed).Bold(true).Render(
-		repeatStr("█", filled),
-	) + lipgloss.NewStyle().Foreground(dimRed).Render(
-		repeatStr("░", empty),
-	)
-	return bar
-}
-
-func repeatStr(s string, n int) string {
-	result := ""
-	for i := 0; i < n; i++ {
-		result += s
-	}
-	return result
-}

internal/tui/terminal.go

@@ -1,216 +0,0 @@
-package tui
-
-import (
-	"os"
-	"os/exec"
-	"regexp"
-	"strings"
-	"time"
-
-	tea "github.com/charmbracelet/bubbletea"
-	"github.com/charmbracelet/lipgloss"
-)
-
-var dangerousPatterns = []*regexp.Regexp{
-	regexp.MustCompile(`(?i)\brm\s+(-[a-zA-Z]*f[a-zA-Z]*\s+|/)`),
-	regexp.MustCompile(`(?i)\bmkfs\b`),
-	regexp.MustCompile(`(?i)\bdd\s+if=`),
-	regexp.MustCompile(`(?i)\b(format\s+[A-Za-z]:)\b`),
-	regexp.MustCompile(`(?i):\(\)\{.*\}`),
-	regexp.MustCompile(`(?i)>(/dev/|/etc/|/boot/)`),
-	regexp.MustCompile(`(?i)\bshutdown\b`),
-	regexp.MustCompile(`(?i)\breboot\b`),
-	regexp.MustCompile(`(?i)\bhalt\b`),
-	regexp.MustCompile(`(?i)\bpoweroff\b`),
-}
-
-func isDangerousCommand(input string) bool {
-	for _, pat := range dangerousPatterns {
-		if pat.MatchString(input) {
-			return true
-		}
-	}
-	return false
-}
-
-func (m Model) renderShell() string {
-	if m.termAIShow {
-		aiWidth := 36
-		termWidth := m.width - aiWidth - 2
-		if termWidth < 20 {
-			termWidth = 20
-			aiWidth = m.width - termWidth - 2
-		}
-
-		termPanel := m.renderTermPanel(termWidth)
-		aiPanel := m.renderAIPanel(aiWidth)
-
-		return lipgloss.JoinHorizontal(lipgloss.Top, termPanel, aiPanel)
-	}
-
-	return m.renderTermPanel(m.width)
-}
-
-func (m Model) renderTermPanel(width int) string {
-	var b strings.Builder
-
-	cwdStyle := lipgloss.NewStyle().Foreground(dimRed).Render(m.termCwd)
-	b.WriteString(renderSectionHeader("TERMINAL", "[$]"))
-	b.WriteString("  ")
-	b.WriteString(cwdStyle)
-	b.WriteString("\n\n")
-
-	sep := lipgloss.NewStyle().Foreground(borderDim).Render(strings.Repeat("─", max(width-4, 10)))
-	b.WriteString(" " + sep)
-	b.WriteString("\n")
-
-	for _, line := range m.termLog {
-		b.WriteString(line + "\n")
-	}
-
-	return b.String()
-}
-
-func (m Model) renderAIPanel(width int) string {
-	var b strings.Builder
-
-	b.WriteString(renderSectionHeader("AI ASSISTANT", "[?]"))
-	b.WriteString("\n\n")
-
-	sep := lipgloss.NewStyle().Foreground(borderDim).Render(strings.Repeat("─", max(width-4, 10)))
-	b.WriteString(" " + sep)
-	b.WriteString("\n\n")
-
-	for _, msg := range m.termAIChat {
-		b.WriteString(msg)
-		b.WriteString("\n\n")
-	}
-
-	if m.termAILoading {
-		b.WriteString(lipgloss.NewStyle().Foreground(neonRed).Render(" " + getAnimFrame(m.animationFrame) + " thinking..."))
-		b.WriteString("\n")
-	}
-
-	inputLabel := lipgloss.NewStyle().Foreground(cyberRed).Render(">> ")
-	b.WriteString(inputLabel)
-	b.WriteString(m.termAIInput)
-
-	return lipgloss.NewStyle().
-		Background(bgSurface).
-		Border(lipgloss.Border{Left: "│"}).
-		BorderForeground(borderDim).
-		Width(width).
-		Padding(0, 1).
-		Render(b.String())
-}
-
-func (m Model) renderShellInput() string {
-	prompt := lipgloss.NewStyle().Foreground(successGreen).Render("> ")
-	return lipgloss.NewStyle().Background(bgInput).Padding(0, 1).Render(
-		prompt + m.termInput + lipgloss.NewStyle().Foreground(cyberRed).Render("▎"),
-	)
-}
-
-func (m Model) handleShellKey(msg tea.KeyMsg) (tea.Model, tea.Cmd) {
-	switch msg.String() {
-	case "ctrl+c":
-		if m.termCmd != nil && m.termCmd.Process != nil {
-			m.termCmd.Process.Kill()
-			m.termRunning = false
-			m.termLog = append(m.termLog, lipgloss.NewStyle().Foreground(errorRed).Render("^C"))
-			m.termCmd = nil
-			m.viewport.SetContent(m.renderContent())
-			return m, nil
-		}
-		now := time.Now()
-		if m.ctrlCCount > 0 && now.Sub(m.lastCtrlC) < 2*time.Second {
-			return m, tea.Quit
-		}
-		m.ctrlCCount++
-		m.lastCtrlC = now
-		m.showingQuit = true
-		m.confirmCursor = 1
-		m.viewport.SetContent(m.renderContent())
-		return m, nil
-	case "ctrl+t":
-		m.showingTabMenu = true
-		m.tabMenuCursor = int(m.activeTab)
-		return m, nil
-	case "ctrl+a":
-		m.termAIShow = !m.termAIShow
-		m.viewport.SetContent(m.renderContent())
-		return m, nil
-	case "enter":
-		if m.termRunning {
-			return m, nil
-		}
-		input := strings.TrimSpace(m.termInput)
-		m.termInput = ""
-		if input == "" {
-			return m, nil
-		}
-		if input == "exit" || input == "quit" {
-			return m, nil
-		}
-		if input == "clear" {
-			m.termLog = nil
-			m.viewport.SetContent(m.renderContent())
-			return m, nil
-		}
-		if isDangerousCommand(input) {
-			m.termLog = append(m.termLog, errMsgStyle.Render(" [BLOCKED] potentially dangerous command"))
-			m.viewport.SetContent(m.renderContent())
-			m.viewport.GotoBottom()
-			return m, nil
-		}
-		if strings.HasPrefix(input, "cd ") {
-			dir := strings.TrimPrefix(input, "cd ")
-			dir = strings.TrimSpace(dir)
-			if dir == "~" {
-				home, _ := os.UserHomeDir()
-				dir = home
-			}
-			if err := os.Chdir(dir); err == nil {
-				m.termCwd, _ = os.Getwd()
-				m.termLog = append(m.termLog, lipgloss.NewStyle().Foreground(dimRed).Render(m.termCwd+" $ ")+input)
-			} else {
-				m.termLog = append(m.termLog, errMsgStyle.Render(" cd: "+err.Error()))
-			}
-			m.viewport.SetContent(m.renderContent())
-			m.viewport.GotoBottom()
-			return m, nil
-		}
-		m.termLog = append(m.termLog, lipgloss.NewStyle().Foreground(dimRed).Render(m.termCwd+" $ ")+input)
-		m.viewport.SetContent(m.renderContent())
-		m.viewport.GotoBottom()
-		return m, m.runTermCommand(input)
-	case "backspace":
-		if len(m.termInput) > 0 {
-			m.termInput = m.termInput[:len(m.termInput)-1]
-			m.viewport.SetContent(m.renderContent())
-		}
-		return m, nil
-	default:
-		if len(msg.String()) == 1 {
-			m.termInput += msg.String()
-			m.viewport.SetContent(m.renderContent())
-		}
-	}
-	return m, nil
-}
-
-func (m Model) runTermCommand(input string) tea.Cmd {
-	return tea.Cmd(func() tea.Msg {
-		shell := os.Getenv("SHELL")
-		if shell == "" {
-			shell = "/bin/sh"
-		}
-		cmd := exec.Command(shell, "-c", input)
-		cmd.Dir = m.termCwd
-		out, err := cmd.CombinedOutput()
-		if err != nil {
-			return termOutputMsg{line: string(out) + errMsgStyle.Render(err.Error())}
-		}
-		return termOutputMsg{line: string(out)}
-	})
-}

internal/tui/types.go

@@ -1,207 +0,0 @@
-package tui
-
-import (
-	"os/exec"
-	"time"
-
-	"github.com/charmbracelet/bubbles/help"
-	"github.com/charmbracelet/bubbles/key"
-	"github.com/charmbracelet/bubbles/progress"
-	"github.com/charmbracelet/bubbles/spinner"
-	"github.com/charmbracelet/bubbles/viewport"
-	"github.com/muyue/muyue/internal/config"
-	"github.com/muyue/muyue/internal/daemon"
-	"github.com/muyue/muyue/internal/installer"
-	"github.com/muyue/muyue/internal/lsp"
-	"github.com/muyue/muyue/internal/orchestrator"
-	"github.com/muyue/muyue/internal/preview"
-	"github.com/muyue/muyue/internal/proxy"
-	"github.com/muyue/muyue/internal/scanner"
-	"github.com/muyue/muyue/internal/skills"
-	"github.com/muyue/muyue/internal/updater"
-	"github.com/muyue/muyue/internal/workflow"
-)
-
-type tab int
-
-const (
-	tabDashboard tab = iota
-	tabStudio
-	tabShell
-	tabConfig
-	tabCount
-)
-
-var tabNames = []string{"DASH", "STUDIO", "SHELL", "CONFIG"}
-var tabIcons = []string{"[■]", "[<>]", "[>$]", "[//]"}
-
-type aiResponseMsg struct{ content string }
-type aiErrMsg struct{ err error }
-type scanCompleteMsg struct{ result *scanner.ScanResult }
-type installCompleteMsg struct{ results []installer.InstallResult }
-type installProgressMsg struct {
-	tool    string
-	current int
-	total   int
-}
-type installBatchMsg struct {
-	result installer.InstallResult
-	tools  []string
-	index  int
-	config *config.MuyueConfig
-}
-type updateCheckMsg struct{ statuses []updater.UpdateStatus }
-type previewReadyMsg struct{ url string }
-type workflowPhaseMsg struct{ phase workflow.Phase }
-type daemonLogMsg struct{ logs []string }
-type lspScanMsg struct{ servers []lsp.LSPServer }
-type mcpConfigMsg struct{ err error }
-type skillsListMsg struct{ skills []skills.Skill }
-type spinnerTickMsg struct{ time time.Time }
-type termOutputMsg struct{ line string }
-type termExitMsg struct{}
-type animTickMsg struct{ time time.Time }
-type clockTickMsg struct{ time time.Time }
-type glitchDoneMsg struct{}
-type scanDoneMsg struct{}
-
-type studioPanel int
-
-const (
-	panelChat studioPanel = iota
-	panelAgents
-	panelWorkflows
-)
-
-type configSection int
-
-const (
-	configProfile configSection = iota
-	configProviders
-	configTerminal
-	configSkills
-)
-
-type transitionState int
-
-const (
-	transitionNone transitionState = iota
-	transitionGlitch
-	transitionScan
-	transitionTypewriter
-)
-
-type Model struct {
-	config     *config.MuyueConfig
-	scanResult *scanner.ScanResult
-	activeTab  tab
-	prevTab    tab
-	width      int
-	height     int
-	viewport   viewport.Model
-	ready      bool
-
-	chatInput   string
-	chatLog     []string
-	chatLoading bool
-	orch        *orchestrator.Orchestrator
-	proxyMgr    *proxy.Manager
-
-	updateStatus  []updater.UpdateStatus
-	installLog    []string
-	previewURL    string
-	previewSrv    *preview.PreviewServer
-	daemon        *daemon.Daemon
-	lspServers    []lsp.LSPServer
-	mcpConfigured bool
-	skillList     []skills.Skill
-
-	helpModel   help.Model
-	progressBar progress.Model
-	spinner     spinner.Model
-
-	showingQuit    bool
-	confirmCursor  int
-	showingTabMenu bool
-	tabMenuCursor  int
-
-	ctrlCCount int
-	lastCtrlC  time.Time
-
-	installing     bool
-	installCurrent int
-	installTotal   int
-	installTool    string
-
-	termCmd     *exec.Cmd
-	termInput   string
-	termLog     []string
-	termRunning bool
-	termCwd     string
-
-	studioPanel       studioPanel
-	studioSidebarOpen bool
-
-	termAIChat    []string
-	termAIInput   string
-	termAILoading bool
-	termAIShow    bool
-
-	configSection configSection
-	configField   int
-
-	animationFrame int
-
-	transition     transitionState
-	transitionTick int
-	typewriterBuf  string
-	typewriterPos  int
-	currentTime    time.Time
-}
-
-type keyMap struct {
-	Tab       key.Binding
-	Prev      key.Binding
-	Quit      key.Binding
-	TabMenu   key.Binding
-	Enter     key.Binding
-	Backspace key.Binding
-}
-
-var keys = keyMap{
-	Tab: key.NewBinding(
-		key.WithKeys("tab"),
-		key.WithHelp("tab", "next"),
-	),
-	Prev: key.NewBinding(
-		key.WithKeys("shift+tab"),
-		key.WithHelp("shift+tab", "prev"),
-	),
-	Quit: key.NewBinding(
-		key.WithKeys("ctrl+c"),
-		key.WithHelp("ctrl+c", "quit"),
-	),
-	TabMenu: key.NewBinding(
-		key.WithKeys("ctrl+t"),
-		key.WithHelp("ctrl+t", "tabs"),
-	),
-	Enter: key.NewBinding(
-		key.WithKeys("enter"),
-		key.WithHelp("enter", "send"),
-	),
-	Backspace: key.NewBinding(
-		key.WithKeys("backspace"),
-		key.WithHelp("backspace", "delete"),
-	),
-}
-
-func (k keyMap) ShortHelp() []key.Binding {
-	return []key.Binding{k.TabMenu, k.Tab, k.Quit}
-}
-
-func (k keyMap) FullHelp() [][]key.Binding {
-	return [][]key.Binding{
-		{k.TabMenu, k.Tab, k.Prev},
-		{k.Quit},
-	}
-}

web/.gitignore

@@ -1,3 +1,4 @@
 node_modules/
 dist/
+!dist/.gitkeep
 .vite/

web/embed.go

@@ -0,0 +1,6 @@
+package web
+
+import "embed"
+
+//go:embed all:dist
+var Assets embed.FS

web/index.html

@@ -3,8 +3,9 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="theme-color" content="#0A0A0C" />
   <title>muyue</title>
-  <link rel="stylesheet" href="/src/styles/global.css" />
+  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⬡</text></svg>" />
 </head>
 <body>
   <div id="root"></div>

web/package-lock.json

@@ -1,19 +1,13 @@
 {
-  "name": "frontend",
-  "version": "1.0.0",
+  "name": "muyue-web",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "frontend",
-      "version": "1.0.0",
-      "license": "ISC",
+      "name": "muyue-web",
       "dependencies": {
-        "@xterm/addon-fit": "^0.11.0",
-        "@xterm/xterm": "^6.0.0",
         "react": "^19.2.5",
-        "react-dom": "^19.2.5",
-        "xterm": "^5.3.0"
+        "react-dom": "^19.2.5"
       },
       "devDependencies": {
         "@vitejs/plugin-react": "^6.0.1",
@@ -402,21 +396,6 @@
         }
       }
     },
-    "node_modules/@xterm/addon-fit": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/@xterm/addon-fit/-/addon-fit-0.11.0.tgz",
-      "integrity": "sha512-jYcgT6xtVYhnhgxh3QgYDnnNMYTcf8ElbxxFzX0IZo+vabQqSPAjC3c1wJrKB5E19VwQei89QCiZZP86DCPF7g==",
-      "license": "MIT"
-    },
-    "node_modules/@xterm/xterm": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/@xterm/xterm/-/xterm-6.0.0.tgz",
-      "integrity": "sha512-TQwDdQGtwwDt+2cgKDLn0IRaSxYu1tSUjgKarSDkUM0ZNiSRXFpjxEsvc/Zgc5kq5omJ+V0a8/kIM2WD3sMOYg==",
-      "license": "MIT",
-      "workspaces": [
-        "addons/*"
-      ]
-    },
     "node_modules/detect-libc": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
@@ -981,13 +960,6 @@
           "optional": true
         }
       }
-    },
-    "node_modules/xterm": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/xterm/-/xterm-5.3.0.tgz",
-      "integrity": "sha512-8QqjlekLUFTrU6x7xck1MsPzPA571K5zNqWm0M0oroYEWVOptZ0+ubQSkQ3uxIEhcIHRujJy6emDWX4A7qyFzg==",
-      "deprecated": "This package is now deprecated. Move to @xterm/xterm instead.",
-      "license": "MIT"
     }
   }
 }

web/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "muyue-web",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^6.0.1",
+    "vite": "^8.0.9"
+  }
+}

web/src/api/client.js

@@ -0,0 +1,32 @@
+const API_BASE = '/api'
+
+async function request(path, options = {}) {
+  const res = await fetch(`${API_BASE}${path}`, {
+    headers: { 'Content-Type': 'application/json' },
+    ...options,
+  })
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ error: res.statusText }))
+    throw new Error(err.error || res.statusText)
+  }
+  return res.json()
+}
+
+const api = {
+  getInfo: () => request('/info'),
+  getSystem: () => request('/system'),
+  getTools: () => request('/tools'),
+  getConfig: () => request('/config'),
+  getProviders: () => request('/providers'),
+  getSkills: () => request('/skills'),
+  getLSP: () => request('/lsp'),
+  getMCP: () => request('/mcp'),
+  getUpdates: () => request('/updates'),
+  runScan: () => request('/scan', { method: 'POST' }),
+  installTools: (tools) => request('/install', { method: 'POST', body: JSON.stringify({ tools }) }),
+  configureMCP: () => request('/mcp/configure', { method: 'POST' }),
+  savePreferences: (prefs) => request('/preferences', { method: 'PUT', body: JSON.stringify(prefs) }),
+  runCommand: (command, cwd) => request('/terminal', { method: 'POST', body: JSON.stringify({ command, cwd }) }),
+}
+
+export default api

web/src/components/App.jsx

@@ -0,0 +1,155 @@
+import { useState, useEffect, useCallback, useMemo } from 'react'
+import api from '../api/client'
+import { getTheme, getThemeNames, applyTheme } from '../themes'
+import { useI18n } from '../i18n'
+import Dashboard from './Dashboard'
+import Studio from './Studio'
+import Shell from './Shell'
+import Config from './Config'
+
+export default function App() {
+  const [activeTab, setActiveTab] = useState('dash')
+  const [info, setInfo] = useState({})
+  const [clock, setClock] = useState(new Date())
+  const [updates, setUpdates] = useState([])
+  const [tools, setTools] = useState([])
+  const { t, layout } = useI18n()
+
+  const TABS = useMemo(() => [
+    { id: 'dash', label: t('tabs.dashboard'), icon: '\u25A0' },
+    { id: 'studio', label: t('tabs.studio'), icon: '\u27E8\u27E9' },
+    { id: 'shell', label: t('tabs.shell'), icon: '$' },
+    { id: 'config', label: t('tabs.config'), icon: '\u2699' },
+  ], [t])
+
+  useEffect(() => {
+    api.getInfo().then(setInfo).catch(() => {})
+    api.getTools().then(d => setTools(d.tools || [])).catch(() => {})
+    api.getUpdates().then(d => setUpdates(d.updates || [])).catch(() => {})
+    applyTheme(getTheme('cyberpunk-red'))
+  }, [])
+
+  useEffect(() => {
+    const id = setInterval(() => setClock(new Date()), 1000)
+    return () => clearInterval(id)
+  }, [])
+
+  useEffect(() => {
+    const onKey = (e) => {
+      if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return
+      if (!e.ctrlKey && !e.metaKey) return
+      const map = {
+        Digit1: 'dash',
+        Digit2: 'studio',
+        Digit3: 'shell',
+        Digit4: 'config',
+      }
+      if (map[e.code]) {
+        e.preventDefault()
+        setActiveTab(map[e.code])
+      }
+    }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [])
+
+  const switchTab = useCallback((tabId) => setActiveTab(tabId), [])
+
+  const hasUpdates = updates.some(u => u.needsUpdate)
+  const installed = tools.filter(t => t.installed).length
+
+  const WINDOW_SHORTCUTS = useMemo(() => ({
+    dash: [
+      { keys: `${layout.keys.ctrl}+${layout.keys.range}`, desc: t('statusbar.switchWindow') },
+    ],
+    studio: [
+      { keys: layout.keys.enter, desc: t('statusbar.sendMessage') },
+      { keys: `${layout.keys.shift}+${layout.keys.enter}`, desc: t('statusbar.newLine') },
+      { keys: `${layout.keys.ctrl}+${layout.keys.range}`, desc: t('statusbar.switchWindow') },
+    ],
+    shell: [
+      { keys: layout.keys.enter, desc: t('statusbar.runCommand') },
+      { keys: `${layout.keys.up}/${layout.keys.down}`, desc: t('statusbar.commandHistory') },
+      { keys: `${layout.keys.ctrl}+${layout.keys.range}`, desc: t('statusbar.switchWindow') },
+    ],
+    config: [
+      { keys: `${layout.keys.ctrl}+${layout.keys.range}`, desc: t('statusbar.switchWindow') },
+    ],
+  }), [layout, t])
+
+  const renderContent = () => {
+    switch (activeTab) {
+      case 'dash': return <Dashboard tools={tools} updates={updates} api={api} onRescan={t => setTools(t)} />
+      case 'studio': return <Studio api={api} />
+      case 'shell': return <Shell api={api} />
+      case 'config': return <Config api={api} onThemeChange={() => {}} />
+      default: return null
+    }
+  }
+
+  return (
+    <div className="app-layout">
+      <header className="header">
+        <div className="header-brand">
+          <span className="header-logo">MUYUE</span>
+          <span className="header-version">v{info.version || '...'}</span>
+        </div>
+
+        <nav className="header-nav">
+          {TABS.map(tab => (
+            <div
+              key={tab.id}
+              className={`nav-tab ${activeTab === tab.id ? 'active' : ''}`}
+              onClick={() => switchTab(tab.id)}
+              role="tab"
+              aria-selected={activeTab === tab.id}
+            >
+              <span className="tab-icon">{tab.icon}</span>
+              {tab.label}
+            </div>
+          ))}
+        </nav>
+
+        <div className="header-spacer" />
+
+        <div className="header-indicators">
+          <span
+            className={`indicator ${installed > 0 ? 'ok' : 'off'}`}
+            title={t('header.toolsInstalled', { count: installed })}
+          />
+          <span
+            className={`indicator ${hasUpdates ? 'warn' : 'ok'}`}
+            title={hasUpdates ? t('header.updatesAvailable') : t('header.upToDate')}
+          />
+        </div>
+
+        <span className="header-clock">
+          {clock.toLocaleTimeString(layout.locale, { hour: '2-digit', minute: '2-digit' })}
+        </span>
+      </header>
+
+      <main className="content fade-in" key={`${activeTab}-${TABS.length}`}>
+        {renderContent()}
+      </main>
+
+      <footer className="statusbar">
+        <div className="statusbar-left">
+          <FooterShortcuts shortcuts={WINDOW_SHORTCUTS[activeTab] || []} />
+        </div>
+        <div className="statusbar-right">
+          <span style={{ fontFamily: 'var(--font-mono)' }}>
+            {layout.keys.ctrl}+{layout.keys.range} {t('statusbar.switchWindow')}
+          </span>
+        </div>
+      </footer>
+    </div>
+  )
+}
+
+function FooterShortcuts({ shortcuts }) {
+  return shortcuts.map((s, i) => (
+    <span key={i} className="statusbar-shortcut">
+      <kbd>{s.keys}</kbd> {s.desc}
+    </span>
+  ))
+}

web/src/components/Config.jsx

@@ -0,0 +1,146 @@
+import { useState, useEffect } from 'react'
+import { getThemeNames, applyTheme, getTheme } from '../themes'
+import { useI18n, LANGUAGES } from '../i18n'
+import { getLayoutList } from '../i18n/keyboards'
+
+export default function Config({ api }) {
+  const { t, language, keyboard, setLanguage, setKeyboard, layout } = useI18n()
+  const [config, setConfig] = useState(null)
+  const [providers, setProviders] = useState([])
+  const [skillList, setSkillList] = useState([])
+  const [currentTheme, setCurrentTheme] = useState('cyberpunk-red')
+
+  useEffect(() => {
+    api.getConfig().then(d => setConfig(d)).catch(() => {})
+    api.getProviders().then(d => setProviders(d.providers || [])).catch(() => {})
+    api.getSkills().then(d => setSkillList(d.skills || [])).catch(() => {})
+  }, [])
+
+  const themes = getThemeNames()
+  const layouts = getLayoutList()
+
+  const handleThemeChange = (themeId) => {
+    applyTheme(getTheme(themeId))
+    setCurrentTheme(themeId)
+  }
+
+  const themeColors = {
+    'cyberpunk-red': '#FF0033',
+    'cyberpunk-pink': '#FF1A8C',
+    'midnight-blue': '#0088FF',
+    'matrix-green': '#00FF41',
+  }
+
+  return (
+    <div className="config-layout">
+      <div className="config-section">
+        <div className="config-section-title">{t('config.profile')}</div>
+        {config?.profile ? (
+          <div>
+            <FieldRow label={t('config.name')} value={config.profile.name} />
+            <FieldRow label={t('config.pseudo')} value={config.profile.pseudo} />
+            <FieldRow label={t('config.email')} value={config.profile.email} />
+            <FieldRow label={t('config.editor')} value={config.profile.preferences?.editor} />
+            <FieldRow label={t('config.shell')} value={config.profile.preferences?.shell} />
+            <FieldRow label={t('config.defaultAi')} value={config.profile.preferences?.defaultAI} />
+            <FieldRow label={t('config.languages')} value={config.profile.languages?.join(', ')} />
+          </div>
+        ) : (
+          <div className="empty-state">{t('config.loadingProfile')}</div>
+        )}
+      </div>
+
+      <div className="config-section">
+        <div className="config-section-title">{t('config.language')}</div>
+        <div className="actions-stack">
+          {LANGUAGES.map(lang => (
+            <div
+              key={lang.id}
+              className={`chip ${language === lang.id ? 'active' : ''}`}
+              onClick={() => setLanguage(lang.id)}
+            >
+              {lang.name}
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="config-section">
+        <div className="config-section-title">{t('config.keyboardLayout')}</div>
+        <div className="actions-stack">
+          {layouts.map(l => (
+            <div
+              key={l.id}
+              className={`chip ${keyboard === l.id ? 'active' : ''}`}
+              onClick={() => setKeyboard(l.id)}
+            >
+              {l.name}
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="config-section">
+        <div className="config-section-title">{t('config.aiProviders')}</div>
+        {providers.map((p, i) => (
+          <div key={i} className="provider-card">
+            <div className="provider-info">
+              <div className="provider-name">
+                {p.name}
+                {p.active && <span className="badge accent" style={{ marginLeft: 8 }}>{t('config.active')}</span>}
+              </div>
+              <div className="provider-meta">
+                <span>{p.model}</span>
+                <span style={{ color: p.apiKey ? 'var(--success)' : 'var(--error)' }}>
+                  {p.apiKey ? t('config.keyConfigured') : t('config.noKey')}
+                </span>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <div className="config-section">
+        <div className="config-section-title">{t('config.theme')}</div>
+        <div className="theme-picker">
+          {themes.map(th => (
+            <div
+              key={th.id}
+              className={`theme-swatch ${currentTheme === th.id ? 'active' : ''}`}
+              style={{ background: themeColors[th.id] || '#FF0033' }}
+              onClick={() => handleThemeChange(th.id)}
+              title={th.name}
+            />
+          ))}
+        </div>
+      </div>
+
+      <div className="config-section">
+        <div className="config-section-title">{t('config.skills')} ({skillList.length})</div>
+        {skillList.length === 0 ? (
+          <div className="empty-state">
+            {t('config.noSkills')}
+            <span style={{ fontFamily: 'var(--font-mono)' }}>{t('config.runSkillsInit')}</span>
+          </div>
+        ) : (
+          skillList.map((s, i) => (
+            <div key={i} className="tool-row">
+              <span className="tool-name">{s.name}</span>
+              <span className="badge neutral">{s.target || 'both'}</span>
+              <span style={{ color: 'var(--text-tertiary)', fontSize: 12 }}>{s.description}</span>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  )
+}
+
+function FieldRow({ label, value }) {
+  return (
+    <div className="field-row">
+      <span className="field-label">{label}</span>
+      <span className={`field-value ${!value ? 'empty' : ''}`}>{value || '—'}</span>
+    </div>
+  )
+}

web/src/components/Dashboard.jsx

@@ -0,0 +1,110 @@
+import { useState } from 'react'
+import { useI18n } from '../i18n'
+
+export default function Dashboard({ tools, updates, api, onRescan }) {
+  const { t, layout } = useI18n()
+  const [activeSection, setActiveSection] = useState('tools')
+  const [notifications, setNotifications] = useState([])
+
+  const installed = tools.filter(tool => tool.installed).length
+  const total = tools.length
+
+  const addNotif = (text, type) => {
+    setNotifications(prev => [{ text, type, id: Date.now(), time: new Date() }, ...prev])
+  }
+
+  const sections = [
+    { id: 'tools', label: t('dashboard.systemOverview') },
+    { id: 'notifications', label: t('dashboard.activityLog') },
+    { id: 'workflows', label: t('studio.workflows') },
+  ]
+
+  return (
+    <div className="dashboard-layout">
+      <div className="dashboard-tabs">
+        {sections.map(s => (
+          <div
+            key={s.id}
+            className={`dashboard-tab ${activeSection === s.id ? 'active' : ''}`}
+            onClick={() => setActiveSection(s.id)}
+          >
+            {s.label}
+            {s.id === 'tools' && total > 0 && (
+              <span className="tab-count">{installed}/{total}</span>
+            )}
+            {s.id === 'notifications' && notifications.length > 0 && (
+              <span className="tab-count warn">{notifications.length}</span>
+            )}
+          </div>
+        ))}
+      </div>
+
+      <div className="dashboard-content">
+        {activeSection === 'tools' && (
+          <div className="dashboard-tools">
+            {tools.length === 0 ? (
+              <div className="empty-state">{t('dashboard.noUpdateData')}</div>
+            ) : (
+              <div className="tools-compact">
+                {tools.map((tool, i) => {
+                  const name = tool.name || tool.Name
+                  const ver = extractVersion(tool.Version || tool.version)
+                  return (
+                    <div key={i} className="tool-compact-row">
+                      <span className={`badge sm ${tool.installed ? 'ok' : 'error'}`}>
+                        {tool.installed ? '\u2713' : '\u2717'}
+                      </span>
+                      <span className="tool-compact-name">{name}</span>
+                      {ver && <span className="tool-compact-ver">{ver}</span>}
+                      {tool.installed && <span className="tool-compact-installed">{t('dashboard.installed')}</span>}
+                    </div>
+                  )
+                })}
+              </div>
+            )}
+          </div>
+        )}
+
+        {activeSection === 'notifications' && (
+          <div className="dashboard-notifications">
+            {notifications.length === 0 ? (
+              <div className="empty-state">{t('dashboard.noUpdateData')}</div>
+            ) : (
+              notifications.map(n => (
+                <div key={n.id} className={`notif-row notif-${n.type}`}>
+                  <span className="notif-time">
+                    {n.time.toLocaleTimeString(layout.locale, { hour: '2-digit', minute: '2-digit', second: '2-digit' })}
+                  </span>
+                  <span className="notif-text">{n.text}</span>
+                </div>
+              ))
+            )}
+          </div>
+        )}
+
+        {activeSection === 'workflows' && (
+          <div className="dashboard-workflows">
+            <div className="workflow-section">
+              <div className="section-label">{t('studio.workflows')}</div>
+              <div className="empty-state" style={{ padding: 20 }}>
+                {t('studio.noWorkflow')}
+              </div>
+            </div>
+            <div className="workflow-section">
+              <div className="section-label">{t('studio.activeAgents')}</div>
+              <div className="empty-state" style={{ padding: 20 }}>
+                {t('studio.noWorkflow')}
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function extractVersion(s) {
+  if (!s) return ''
+  const m = s.match(/\d+\.\d+\.\d+/)
+  return m ? m[0] : s.slice(0, 12)
+}

web/src/components/Shell.jsx

@@ -0,0 +1,137 @@
+import { useState, useRef, useEffect } from 'react'
+import { useI18n } from '../i18n'
+
+export default function Shell({ api }) {
+  const { t } = useI18n()
+  const [history, setHistory] = useState([])
+  const [input, setInput] = useState('')
+  const [cwd, setCwd] = useState('~')
+  const [showAi, setShowAi] = useState(false)
+  const [aiMessages, setAiMessages] = useState([
+    { role: 'ai', content: t('shell.aiWelcome') }
+  ])
+  const [aiInput, setAiInput] = useState('')
+  const [aiLoading, setAiLoading] = useState(false)
+  const [cmdHistory, setCmdHistory] = useState([])
+  const [histIdx, setHistIdx] = useState(-1)
+  const outputRef = useRef(null)
+
+  useEffect(() => {
+    outputRef.current?.scrollTo(0, outputRef.current.scrollHeight)
+  }, [history])
+
+  const handleCommand = async (cmd) => {
+    if (!cmd.trim()) return
+    if (cmd === 'clear') { setHistory([]); return }
+
+    setCmdHistory(prev => [...prev, cmd])
+    setHistIdx(-1)
+    setHistory(prev => [...prev, { type: 'cmd', text: `${cwd} $ ${cmd}` }])
+
+    try {
+      const res = await api.runCommand(cmd, cwd === '~' ? '' : cwd)
+      if (res.output) setHistory(prev => [...prev, { type: 'out', text: res.output }])
+      if (res.error) setHistory(prev => [...prev, { type: 'err', text: res.error }])
+      if (cmd.startsWith('cd ')) {
+        const dir = cmd.slice(3).trim()
+        setCwd(dir === '~' ? '~' : dir)
+      }
+    } catch (err) {
+      setHistory(prev => [...prev, { type: 'err', text: err.message }])
+    }
+  }
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      handleCommand(input)
+      setInput('')
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      if (cmdHistory.length === 0) return
+      const newIdx = histIdx === -1 ? cmdHistory.length - 1 : Math.max(0, histIdx - 1)
+      setHistIdx(newIdx)
+      setInput(cmdHistory[newIdx])
+    } else if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      if (histIdx === -1) return
+      const newIdx = histIdx + 1
+      if (newIdx >= cmdHistory.length) { setHistIdx(-1); setInput('') }
+      else { setHistIdx(newIdx); setInput(cmdHistory[newIdx]) }
+    }
+  }
+
+  const handleAiSend = async () => {
+    if (!aiInput.trim() || aiLoading) return
+    const text = aiInput.trim()
+    setAiMessages(prev => [...prev, { role: 'user', content: text }])
+    setAiInput('')
+    setAiLoading(true)
+
+    try {
+      const res = await api.runCommand(`echo "AI: ${text}"`, '')
+      setAiMessages(prev => [...prev, { role: 'ai', content: res.output || t('shell.noResponse') }])
+    } catch (err) {
+      setAiMessages(prev => [...prev, { role: 'ai', content: `${t('shell.error')}: ${err.message}` }])
+    }
+    setAiLoading(false)
+  }
+
+  return (
+    <div className="split-horizontal" style={{ height: '100%' }}>
+      <div className="terminal" style={{ flex: 1 }}>
+        <div className="panel-header">
+          <span className="panel-title">
+            {t('shell.terminal')}
+            <span className="panel-subtitle">{cwd}</span>
+          </span>
+          <button className="ghost sm" onClick={() => setShowAi(!showAi)}>
+            {showAi ? t('shell.hideAi') : t('shell.aiAssistant')}
+          </button>
+        </div>
+
+        <div className="terminal-output" ref={outputRef}>
+          {history.map((line, i) => (
+            <div key={i} className={`terminal-line ${line.type}`}>
+              {line.text}
+            </div>
+          ))}
+        </div>
+
+        <div className="terminal-input-bar">
+          <span className="terminal-prompt">&rsaquo;</span>
+          <input
+            className="terminal-input"
+            value={input}
+            onChange={e => setInput(e.target.value)}
+            onKeyDown={handleKeyDown}
+            autoFocus
+          />
+        </div>
+      </div>
+
+      {showAi && (
+        <div className="ai-panel">
+          <div className="ai-panel-header">{t('shell.aiAssistant')}</div>
+          <div className="ai-panel-messages">
+            {aiMessages.map((msg, i) => (
+              <div key={i} className={`ai-message ${msg.role}`}>
+                {msg.content}
+              </div>
+            ))}
+            {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 => e.key === 'Enter' && handleAiSend()}
+              placeholder={t('shell.askAi')}
+            />
+            <button className="sm" onClick={handleAiSend} disabled={!aiInput.trim()}>{t('shell.send')}</button>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

web/src/components/Studio.jsx

@@ -0,0 +1,140 @@
+import { useState, useRef, useEffect } from 'react'
+import { useI18n } from '../i18n'
+
+export default function Studio({ api }) {
+  const { t, layout } = useI18n()
+  const [messages, setMessages] = useState([
+    { role: 'ai', content: t('studio.welcome') },
+    { role: 'ai', content: t('studio.configureHint') },
+  ])
+  const [input, setInput] = useState('')
+  const [sidebarPanel, setSidebarPanel] = useState('chat')
+  const [loading, setLoading] = useState(false)
+  const messagesEnd = useRef(null)
+
+  useEffect(() => {
+    messagesEnd.current?.scrollIntoView({ behavior: 'smooth' })
+  }, [messages])
+
+  const handleSend = () => {
+    if (!input.trim() || loading) return
+    const text = input.trim()
+    setMessages(prev => [...prev, { role: 'user', content: text }])
+    setInput('')
+    setLoading(true)
+
+    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))
+  }
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault()
+      handleSend()
+    }
+  }
+
+  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 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>
+      </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>
+
+        {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>
+        )}
+      </div>
+    </div>
+  )
+}

web/src/i18n/en.js

@@ -0,0 +1,105 @@
+const en = {
+  tabs: {
+    dashboard: 'Dashboard',
+    studio: 'Studio',
+    shell: 'Shell',
+    config: 'Config',
+  },
+
+  header: {
+    toolsInstalled: '{count} tools installed',
+    updatesAvailable: 'Updates available',
+    upToDate: 'Up to date',
+  },
+
+  statusbar: {
+    switchWindow: 'Switch window',
+    sendMessage: 'Send message',
+    newLine: 'New line',
+    runCommand: 'Run command',
+    commandHistory: 'Command history',
+  },
+
+  dashboard: {
+    systemOverview: 'System Overview',
+    tools: 'tools',
+    installed: 'Installed',
+    missing: 'Missing',
+    quickActions: 'Quick Actions',
+    installMissing: 'Install missing',
+    checkUpdates: 'Check for updates',
+    rescanSystem: 'Rescan system',
+    configureMCP: 'Configure MCP',
+    updates: 'Updates',
+    update: 'Update',
+    latest: 'Latest',
+    activityLog: 'Activity Log',
+    noUpdateData: 'No update data yet.',
+    installing: 'Installing {count} tools...',
+    installStarted: 'Install started. Rescanning...',
+    done: 'Done.',
+    scanComplete: 'Scan complete.',
+    updatesCount: '{count} updates available.',
+    allUpToDate: 'All tools up to date.',
+    mcpConfigured: 'MCP configured.',
+  },
+
+  studio: {
+    welcome: 'Welcome to Studio! Chat with your AI assistant here.',
+    configureHint: 'Configure agents and workflows from the sidebar.',
+    chat: 'Chat',
+    agents: 'Agents',
+    workflows: 'Workflows',
+    placeholder: 'Type a message... (Enter to send)',
+    send: 'Send',
+    commands: 'Commands',
+    planGoal: '/plan <goal>',
+    help: '/help',
+    activeAgents: 'Active Agents',
+    crush: 'Crush',
+    claudeCode: 'Claude Code',
+    stopped: 'Stopped',
+    inactive: 'Inactive',
+    noWorkflow: 'No active workflow.',
+    usePlan: 'Use /plan <goal> in chat to start.',
+    noResponse: 'No response',
+    error: 'Error',
+  },
+
+  shell: {
+    terminal: 'Terminal',
+    hideAi: 'Hide AI',
+    aiAssistant: 'AI Assistant',
+    aiWelcome: 'I know your system inside out. Ask me anything.',
+    askAi: 'Ask AI...',
+    send: 'Send',
+    noResponse: 'No response',
+    error: 'Error',
+  },
+
+  config: {
+    profile: 'Profile',
+    name: 'Name',
+    pseudo: 'Pseudo',
+    email: 'Email',
+    editor: 'Editor',
+    shell: 'Shell',
+    defaultAi: 'Default AI',
+    languages: 'Languages',
+    loadingProfile: 'Loading profile...',
+    notSet: 'Not set',
+    aiProviders: 'AI Providers',
+    active: 'Active',
+    keyConfigured: 'Key configured',
+    noKey: 'No key',
+    theme: 'Theme',
+    skills: 'Skills',
+    noSkills: 'No skills installed.',
+    runSkillsInit: 'Run muyue skills init',
+    language: 'Language',
+    keyboardLayout: 'Keyboard Layout',
+    target: 'Target',
+  },
+}
+
+export default en

web/src/i18n/fr.js

@@ -0,0 +1,105 @@
+const fr = {
+  tabs: {
+    dashboard: 'Tableau de bord',
+    studio: 'Studio',
+    shell: 'Terminal',
+    config: 'Configuration',
+  },
+
+  header: {
+    toolsInstalled: '{count} outils install\u00e9s',
+    updatesAvailable: 'Mises \u00e0 jour disponibles',
+    upToDate: '\u00c0 jour',
+  },
+
+  statusbar: {
+    switchWindow: 'Changer de fen\u00eatre',
+    sendMessage: 'Envoyer le message',
+    newLine: 'Nouvelle ligne',
+    runCommand: 'Ex\u00e9cuter',
+    commandHistory: 'Historique',
+  },
+
+  dashboard: {
+    systemOverview: 'Vue d\u2019ensemble du syst\u00e8me',
+    tools: 'outils',
+    installed: 'Install\u00e9',
+    missing: 'Manquant',
+    quickActions: 'Actions rapides',
+    installMissing: 'Installer les manquants',
+    checkUpdates: 'V\u00e9rifier les mises \u00e0 jour',
+    rescanSystem: 'Rescanner le syst\u00e8me',
+    configureMCP: 'Configurer MCP',
+    updates: 'Mises \u00e0 jour',
+    update: 'Mise \u00e0 jour',
+    latest: '\u00c0 jour',
+    activityLog: 'Journal d\u2019activit\u00e9',
+    noUpdateData: 'Aucune donn\u00e9e de mise \u00e0 jour.',
+    installing: 'Installation de {count} outils...',
+    installStarted: 'Installation lanc\u00e9e. Rescan en cours...',
+    done: 'Termin\u00e9.',
+    scanComplete: 'Scan termin\u00e9.',
+    updatesCount: '{count} mises \u00e0 jour disponibles.',
+    allUpToDate: 'Tous les outils sont \u00e0 jour.',
+    mcpConfigured: 'MCP configur\u00e9.',
+  },
+
+  studio: {
+    welcome: 'Bienvenue dans Studio ! Discutez avec votre assistant IA ici.',
+    configureHint: 'Configurez les agents et workflows depuis la barre lat\u00e9rale.',
+    chat: 'Chat',
+    agents: 'Agents',
+    workflows: 'Workflows',
+    placeholder: 'Tapez un message... (Entr\u00e9e pour envoyer)',
+    send: 'Envoyer',
+    commands: 'Commandes',
+    planGoal: '/plan <objectif>',
+    help: '/help',
+    activeAgents: 'Agents actifs',
+    crush: 'Crush',
+    claudeCode: 'Claude Code',
+    stopped: 'Arr\u00eat\u00e9',
+    inactive: 'Inactif',
+    noWorkflow: 'Aucun workflow actif.',
+    usePlan: 'Utilisez /plan <objectif> dans le chat pour d\u00e9marrer.',
+    noResponse: 'Pas de r\u00e9ponse',
+    error: 'Erreur',
+  },
+
+  shell: {
+    terminal: 'Terminal',
+    hideAi: 'Masquer IA',
+    aiAssistant: 'Assistant IA',
+    aiWelcome: 'Je connais votre syst\u00e8me sur le bout des doigts. Demandez-moi n\u2019importe quoi.',
+    askAi: 'Demander \u00e0 l\u2019IA...',
+    send: 'Envoyer',
+    noResponse: 'Pas de r\u00e9ponse',
+    error: 'Erreur',
+  },
+
+  config: {
+    profile: 'Profil',
+    name: 'Nom',
+    pseudo: 'Pseudo',
+    email: 'Email',
+    editor: '\u00c9diteur',
+    shell: 'Shell',
+    defaultAi: 'IA par d\u00e9faut',
+    languages: 'Langages',
+    loadingProfile: 'Chargement du profil...',
+    notSet: 'Non d\u00e9fini',
+    aiProviders: 'Fournisseurs IA',
+    active: 'Actif',
+    keyConfigured: 'Cl\u00e9 configur\u00e9e',
+    noKey: 'Pas de cl\u00e9',
+    theme: 'Th\u00e8me',
+    skills: 'Comp\u00e9tences',
+    noSkills: 'Aucune comp\u00e9tence install\u00e9e.',
+    runSkillsInit: 'Ex\u00e9cutez muyue skills init',
+    language: 'Langue',
+    keyboardLayout: 'Disposition du clavier',
+    target: 'Cible',
+  },
+}
+
+export default fr

web/src/i18n/index.jsx

@@ -0,0 +1,101 @@
+import { createContext, useContext, useState, useCallback, useEffect, useMemo, useRef } from 'react'
+import en from './en'
+import fr from './fr'
+import { getLayout, getLayoutList } from './keyboards'
+import api from '../api/client'
+
+const translations = { en, fr }
+
+const STORAGE_KEY_LANG = 'muyue-language'
+const STORAGE_KEY_KBD = 'muyue-keyboard'
+
+const I18nContext = createContext(null)
+
+function resolveLocale(layout) {
+  const l = getLayout(layout)
+  return l.locale
+}
+
+export function I18nProvider({ children }) {
+  const [language, setLanguageState] = useState(() => localStorage.getItem(STORAGE_KEY_LANG) || 'fr')
+  const [keyboard, setKeyboardState] = useState(() => localStorage.getItem(STORAGE_KEY_KBD) || 'azerty')
+  const [loaded, setLoaded] = useState(false)
+  const pendingSave = useRef(null)
+
+  useEffect(() => {
+    api.getConfig()
+      .then(d => {
+        const prefs = d.profile?.preferences
+        if (prefs?.language) setLanguageState(prefs.language)
+        if (prefs?.keyboard_layout) setKeyboardState(prefs.keyboard_layout)
+      })
+      .catch(() => {})
+      .finally(() => setLoaded(true))
+  }, [])
+
+  useEffect(() => {
+    if (!loaded) return
+    if (pendingSave.current) clearTimeout(pendingSave.current)
+    pendingSave.current = setTimeout(() => {
+      api.savePreferences({ language, keyboard_layout: keyboard }).catch(() => {})
+    }, 500)
+    return () => { if (pendingSave.current) clearTimeout(pendingSave.current) }
+  }, [language, keyboard, loaded])
+
+  const setLanguage = useCallback((lang) => {
+    setLanguageState(lang)
+    localStorage.setItem(STORAGE_KEY_LANG, lang)
+  }, [])
+
+  const setKeyboard = useCallback((kbd) => {
+    setKeyboardState(kbd)
+    localStorage.setItem(STORAGE_KEY_KBD, kbd)
+  }, [])
+
+  const layout = useMemo(() => getLayout(keyboard), [keyboard])
+
+  const t = useCallback((key, params) => {
+    const dict = translations[language] || translations.fr
+    const keys = key.split('.')
+    let value = dict
+    for (const k of keys) {
+      if (value == null) return key
+      value = value[k]
+    }
+    if (typeof value !== 'string') return key
+    if (params) {
+      return Object.entries(params).reduce((str, [k, v]) => str.replace(`{${k}}`, v), value)
+    }
+    return value
+  }, [language])
+
+  const clockLocale = useMemo(() => resolveLocale(keyboard), [keyboard])
+
+  const contextValue = useMemo(() => ({
+    language,
+    keyboard,
+    layout,
+    setLanguage,
+    setKeyboard,
+    t,
+    clockLocale,
+    layouts: getLayoutList(),
+  }), [language, keyboard, layout, t, clockLocale])
+
+  return (
+    <I18nContext.Provider value={contextValue}>
+      {children}
+    </I18nContext.Provider>
+  )
+}
+
+export function useI18n() {
+  const ctx = useContext(I18nContext)
+  if (!ctx) throw new Error('useI18n must be used within I18nProvider')
+  return ctx
+}
+
+export const LANGUAGES = [
+  { id: 'fr', name: 'Fran\u00e7ais' },
+  { id: 'en', name: 'English' },
+]

web/src/i18n/keyboards.js

@@ -0,0 +1,61 @@
+export const LAYOUTS = {
+  qwerty: {
+    id: 'qwerty',
+    name: 'QWERTY',
+    locale: 'en-US',
+    keys: {
+      tab1: '1',
+      tab2: '2',
+      tab3: '3',
+      tab4: '4',
+      ctrl: 'Ctrl',
+      enter: 'Enter',
+      shift: 'Shift',
+      up: '\u2191',
+      down: '\u2193',
+      range: '1-4',
+    },
+  },
+  azerty: {
+    id: 'azerty',
+    name: 'AZERTY',
+    locale: 'fr-FR',
+    keys: {
+      tab1: '&',
+      tab2: '\u00e9',
+      tab3: '"',
+      tab4: "'",
+      ctrl: 'Ctrl',
+      enter: 'Entr\u00e9e',
+      shift: 'Maj',
+      up: '\u2191',
+      down: '\u2193',
+      range: '&-\u00e9-"-\'',
+    },
+  },
+  qwertz: {
+    id: 'qwertz',
+    name: 'QWERTZ',
+    locale: 'de-DE',
+    keys: {
+      tab1: '1',
+      tab2: '2',
+      tab3: '3',
+      tab4: '4',
+      ctrl: 'Strg',
+      enter: 'Enter',
+      shift: 'Umschalt',
+      up: '\u2191',
+      down: '\u2193',
+      range: '1-4',
+    },
+  },
+}
+
+export function getLayout(id) {
+  return LAYOUTS[id] || LAYOUTS.azerty
+}
+
+export function getLayoutList() {
+  return Object.values(LAYOUTS)
+}

web/src/main.jsx

@@ -1,9 +1,13 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
+import { I18nProvider } from './i18n'
+import './styles/global.css'
 import App from './components/App'
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
-    <App />
+    <I18nProvider>
+      <App />
+    </I18nProvider>
   </React.StrictMode>
 )

web/src/styles/global.css

@@ -0,0 +1,401 @@
+:root {
+  --bg: #0A0A0C;
+  --bg-base: #0F0D10;
+  --bg-surface: #161218;
+  --bg-elevated: #1C1719;
+  --bg-card: #221B1E;
+  --bg-input: #2A2225;
+  --bg-hover: #332528;
+
+  --accent: #FF0033;
+  --accent-dark: #8B0020;
+  --accent-deep: #5C0015;
+  --accent-light: #FF1A5E;
+  --accent-muted: #FF4D6D;
+  --accent-bright: #FF1744;
+  --accent-soft: #FF5252;
+  --accent-dim: #6B2033;
+  --accent-bg: #4A1525;
+
+  --text-primary: #EAE0E2;
+  --text-secondary: #D4C4C8;
+  --text-tertiary: #8A7A7E;
+  --text-disabled: #5A4F52;
+
+  --success: #00E676;
+  --warning: #FFD740;
+  --error: #FF1744;
+  --info: #448AFF;
+
+  --border: #2A1F22;
+  --border-accent: #FF003344;
+  --border-accent-full: #FF0033;
+
+  --radius-sm: 6px;
+  --radius: 8px;
+  --radius-lg: 12px;
+
+  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', 'Menlo', monospace;
+
+  --header-h: 52px;
+  --sidebar-w: 280px;
+}
+
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+html, body, #root { height: 100%; width: 100%; overflow: hidden; }
+
+body {
+  background: var(--bg);
+  color: var(--text-secondary);
+  font-family: var(--font-sans);
+  font-size: 14px;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+::selection { background: var(--accent); color: #fff; }
+
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--accent-dim); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: var(--accent-dark); }
+
+a { color: var(--accent); text-decoration: none; cursor: pointer; }
+a:hover { color: var(--accent-light); }
+
+button {
+  font-family: var(--font-sans);
+  font-size: 13px;
+  font-weight: 600;
+  padding: 8px 16px;
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+  background: var(--bg-card);
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all 0.15s ease;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  white-space: nowrap;
+}
+button:hover:not(:disabled) { background: var(--bg-hover); border-color: var(--accent-dark); color: var(--text-primary); }
+button:active:not(:disabled) { transform: scale(0.97); }
+button:disabled { opacity: 0.4; cursor: not-allowed; }
+button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
+button.primary:hover:not(:disabled) { background: var(--accent-bright); border-color: var(--accent-bright); }
+button.ghost { background: transparent; border-color: transparent; color: var(--text-tertiary); }
+button.ghost:hover:not(:disabled) { background: var(--bg-hover); color: var(--text-primary); }
+button.sm { font-size: 12px; padding: 4px 10px; }
+
+input, textarea {
+  font-family: var(--font-sans);
+  font-size: 14px;
+  background: var(--bg-input);
+  color: var(--text-primary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 8px 12px;
+  outline: none;
+  transition: border-color 0.2s, box-shadow 0.2s;
+  width: 100%;
+}
+input:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--border-accent); }
+input::placeholder { color: var(--text-disabled); }
+
+.app-layout { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
+
+.header {
+  height: var(--header-h);
+  background: var(--bg-surface);
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+  gap: 12px;
+  flex-shrink: 0;
+}
+
+.header-brand { display: flex; align-items: center; gap: 8px; }
+.header-logo { font-family: var(--font-mono); font-weight: 900; font-size: 18px; color: var(--accent); letter-spacing: 3px; user-select: none; }
+.header-version { font-size: 11px; color: var(--accent-dim); font-family: var(--font-mono); }
+
+.header-nav { display: flex; gap: 4px; margin-left: 32px; }
+
+.nav-tab {
+  padding: 8px 18px;
+  border-radius: var(--radius);
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-tertiary);
+  cursor: pointer;
+  transition: all 0.15s ease;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  user-select: none;
+}
+.nav-tab:hover { color: var(--text-primary); background: var(--bg-card); }
+.nav-tab.active { color: #fff; background: var(--accent); }
+
+.header-spacer { flex: 1; }
+
+.header-indicators { display: flex; align-items: center; gap: 12px; }
+.indicator { width: 8px; height: 8px; border-radius: 50%; transition: background 0.3s; }
+.indicator.ok { background: var(--success); }
+.indicator.warn { background: var(--warning); }
+.indicator.error { background: var(--error); }
+.indicator.off { background: var(--text-disabled); }
+
+.header-clock { font-family: var(--font-mono); font-size: 12px; color: var(--accent); font-weight: 600; }
+
+.content { flex: 1; overflow: hidden; }
+
+.statusbar {
+  height: 28px;
+  background: var(--bg-surface);
+  border-top: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+  flex-shrink: 0;
+  font-size: 11px;
+  color: var(--text-disabled);
+}
+.statusbar-left, .statusbar-right { display: flex; align-items: center; gap: 12px; }
+.statusbar-shortcut { display: inline-flex; align-items: center; gap: 4px; }
+.statusbar-shortcut kbd {
+  display: inline-block; padding: 1px 5px; border-radius: 3px;
+  background: var(--bg-card); border: 1px solid var(--border);
+  font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary);
+}
+
+.card {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 20px;
+  transition: border-color 0.2s;
+}
+.card:hover { border-color: var(--accent-dim); }
+.card-header {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--accent);
+  margin-bottom: 16px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  border-radius: 99px;
+  font-size: 11px;
+  font-weight: 600;
+}
+.badge.ok { background: rgba(0,230,118,0.15); color: var(--success); }
+.badge.error { background: rgba(255,23,68,0.15); color: var(--error); }
+.badge.warn { background: rgba(255,215,64,0.15); color: var(--warning); }
+.badge.info { background: rgba(68,138,255,0.15); color: var(--info); }
+.badge.neutral { background: var(--bg-hover); color: var(--text-tertiary); }
+.badge.accent { background: var(--accent-bg); color: var(--accent); }
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border-radius: var(--radius);
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  font-size: 12px;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all 0.15s;
+  user-select: none;
+}
+.chip:hover { border-color: var(--accent-dark); background: var(--bg-hover); }
+.chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
+
+.progress { height: 6px; background: var(--bg-input); border-radius: 3px; overflow: hidden; }
+.progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-light)); border-radius: 3px; transition: width 0.4s ease; }
+
+.tool-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 0;
+  border-bottom: 1px solid var(--border);
+  font-size: 13px;
+}
+.tool-row:last-child { border-bottom: none; }
+.tool-name { flex: 1; color: var(--text-primary); font-weight: 500; }
+.tool-version { color: var(--text-tertiary); font-size: 12px; font-family: var(--font-mono); }
+
+.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; height: 100%; padding: 20px; overflow: auto; }
+.split-horizontal { display: flex; height: 100%; }
+.split-right { width: var(--sidebar-w); border-left: 1px solid var(--border); background: var(--bg-surface); overflow: auto; padding: 16px; }
+
+.chat-layout { display: flex; flex-direction: column; height: 100%; }
+.chat-messages { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
+.message {
+  max-width: 80%;
+  padding: 12px 16px;
+  border-radius: var(--radius-lg);
+  font-size: 14px;
+  line-height: 1.6;
+  word-break: break-word;
+}
+.message.user { align-self: flex-end; background: var(--accent-bg); color: var(--text-primary); border-bottom-right-radius: 4px; }
+.message.ai { align-self: flex-start; background: var(--bg-card); color: var(--text-primary); border-bottom-left-radius: 4px; border-left: 3px solid var(--accent); }
+.chat-input-bar { display: flex; gap: 8px; padding: 16px 20px; border-top: 1px solid var(--border); background: var(--bg-surface); }
+.chat-input-bar input { flex: 1; }
+
+.sidebar-nav { display: flex; flex-direction: column; gap: 2px; margin-bottom: 20px; }
+.sidebar-tab {
+  display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--radius);
+  font-size: 13px; color: var(--text-tertiary); cursor: pointer; transition: all 0.15s;
+}
+.sidebar-tab:hover { background: var(--bg-card); color: var(--text-primary); }
+.sidebar-tab.active { background: var(--accent); color: #fff; font-weight: 600; }
+
+.terminal { display: flex; flex-direction: column; height: 100%; background: var(--bg); }
+.terminal-output { flex: 1; padding: 16px; font-family: var(--font-mono); font-size: 13px; line-height: 1.6; overflow-y: auto; white-space: pre-wrap; word-break: break-all; }
+.terminal-line { margin-bottom: 2px; }
+.terminal-line.cmd { color: var(--accent-dim); }
+.terminal-line.out { color: var(--text-primary); }
+.terminal-line.err { color: var(--error); }
+.terminal-input-bar { display: flex; align-items: center; padding: 10px 16px; background: var(--bg-surface); border-top: 1px solid var(--border); gap: 8px; }
+.terminal-prompt { color: var(--success); font-family: var(--font-mono); font-weight: 700; font-size: 14px; flex-shrink: 0; }
+.terminal-input { flex: 1; background: transparent; border: none; outline: none; color: var(--text-primary); font-family: var(--font-mono); font-size: 13px; padding: 0; }
+.terminal-input:focus { box-shadow: none; border-color: transparent; }
+
+.config-layout { max-width: 840px; margin: 0 auto; padding: 24px; overflow-y: auto; height: 100%; }
+.config-section { margin-bottom: 28px; }
+.config-section-title {
+  font-size: 12px; font-weight: 700; color: var(--accent); text-transform: uppercase;
+  letter-spacing: 1px; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
+}
+.field-row { display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); gap: 12px; }
+.field-row:last-child { border-bottom: none; }
+.field-label { width: 140px; flex-shrink: 0; color: var(--text-tertiary); font-size: 13px; }
+.field-value { color: var(--text-primary); font-size: 14px; flex: 1; }
+.field-value.empty { color: var(--text-disabled); font-style: italic; }
+
+.provider-card {
+  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
+  padding: 14px 16px; margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between;
+  transition: border-color 0.2s;
+}
+.provider-card:hover { border-color: var(--accent-dim); }
+.provider-info { display: flex; flex-direction: column; gap: 4px; }
+.provider-name { font-weight: 600; color: var(--text-primary); font-size: 14px; }
+.provider-meta { display: flex; gap: 12px; font-size: 12px; color: var(--text-tertiary); font-family: var(--font-mono); }
+
+.theme-picker { display: flex; gap: 8px; flex-wrap: wrap; }
+.theme-swatch {
+  width: 48px; height: 48px; border-radius: var(--radius); border: 2px solid var(--border);
+  cursor: pointer; transition: all 0.15s; position: relative;
+}
+.theme-swatch:hover { transform: scale(1.1); border-color: var(--accent-dim); }
+.theme-swatch.active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--border-accent); }
+.theme-swatch.active::after {
+  content: '\2713'; position: absolute; inset: 0; display: flex; align-items: center;
+  justify-content: center; color: #fff; font-size: 18px; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,0.5);
+}
+
+.section-title { font-size: 12px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }
+.actions-stack { display: flex; flex-direction: column; gap: 6px; }
+
+.agent-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius); background: var(--bg-card); margin-bottom: 6px; }
+.agent-avatar {
+  width: 32px; height: 32px; border-radius: 50%; background: var(--accent-bg); color: var(--accent);
+  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0;
+}
+.agent-name { font-weight: 600; color: var(--text-primary); font-size: 13px; }
+.agent-status { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }
+
+.ai-panel { width: 320px; border-left: 1px solid var(--border); background: var(--bg-surface); display: flex; flex-direction: column; }
+.ai-panel-header { padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 13px; color: var(--accent); }
+.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.ai { background: var(--bg-card); border-left: 3px solid var(--accent); }
+.ai-message.user { background: var(--accent-bg); border-left: 3px solid var(--accent-muted); }
+.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; }
+
+.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; color: var(--text-disabled); font-size: 13px; text-align: center; gap: 8px; }
+
+.dashboard-layout { display: flex; flex-direction: column; height: 100%; }
+.dashboard-tabs {
+  display: flex; gap: 0; border-bottom: 1px solid var(--border);
+  background: var(--bg-surface); flex-shrink: 0;
+}
+.dashboard-tab {
+  padding: 10px 24px; font-size: 13px; font-weight: 600;
+  color: var(--text-tertiary); cursor: pointer; transition: all 0.15s;
+  display: flex; align-items: center; gap: 8px; border-bottom: 2px solid transparent;
+  user-select: none;
+}
+.dashboard-tab:hover { color: var(--text-primary); background: var(--bg-card); }
+.dashboard-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
+.tab-count {
+  font-size: 10px; padding: 1px 6px; border-radius: 99px;
+  background: var(--bg-card); color: var(--text-tertiary); font-family: var(--font-mono);
+}
+.tab-count.warn { background: rgba(255,215,64,0.15); color: var(--warning); }
+
+.dashboard-content { flex: 1; overflow-y: auto; }
+
+.dashboard-tools { padding: 16px 24px; }
+.tools-compact { display: flex; flex-direction: column; gap: 2px; }
+.tool-compact-row {
+  display: flex; align-items: center; gap: 10px;
+  padding: 6px 12px; border-radius: var(--radius);
+  font-size: 13px; transition: background 0.1s;
+}
+.tool-compact-row:hover { background: var(--bg-card); }
+.badge.sm { padding: 1px 5px; font-size: 10px; }
+.tool-compact-name { color: var(--text-primary); font-weight: 500; flex: 1; }
+.tool-compact-ver { color: var(--text-tertiary); font-size: 11px; font-family: var(--font-mono); }
+.tool-compact-installed { color: var(--success); font-size: 11px; font-family: var(--font-mono); opacity: 0.7; }
+
+.dashboard-notifications { padding: 16px 24px; }
+.notif-row {
+  display: flex; align-items: flex-start; gap: 12px;
+  padding: 8px 12px; border-radius: var(--radius); margin-bottom: 4px;
+}
+.notif-row:hover { background: var(--bg-card); }
+.notif-time { color: var(--text-disabled); font-size: 11px; font-family: var(--font-mono); flex-shrink: 0; padding-top: 1px; }
+.notif-text { font-size: 13px; color: var(--text-secondary); }
+.notif-info .notif-text { color: var(--info); }
+.notif-ok .notif-text { color: var(--success); }
+.notif-warn .notif-text { color: var(--warning); }
+.notif-error .notif-text { color: var(--error); }
+
+.dashboard-workflows { padding: 16px 24px; display: flex; flex-direction: column; gap: 24px; }
+.workflow-section { }
+.section-label {
+  font-size: 11px; font-weight: 700; color: var(--accent); text-transform: uppercase;
+  letter-spacing: 1px; margin-bottom: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--border);
+}
+
+.panel-header {
+  display: flex; align-items: center; justify-content: space-between; padding: 10px 16px;
+  border-bottom: 1px solid var(--border); background: var(--bg-surface);
+}
+.panel-title { font-weight: 700; font-size: 13px; color: var(--accent); display: flex; align-items: center; gap: 8px; }
+.panel-subtitle { font-weight: 400; font-size: 12px; color: var(--text-tertiary); margin-left: 8px; }
+
+@keyframes spin { to { transform: rotate(360deg); } }
+.spinner { width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.6s linear infinite; display: inline-block; vertical-align: middle; }
+@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
+.fade-in { animation: fadeIn 0.2s ease-out; }

web/src/themes/index.js

@@ -0,0 +1,129 @@
+const defaultTheme = {
+  name: 'Cyberpunk Red',
+  colors: {
+    bg: '#0A0A0C',
+    bgBase: '#0F0D10',
+    bgSurface: '#161218',
+    bgElevated: '#1C1719',
+    bgCard: '#221B1E',
+    bgInput: '#2A2225',
+    bgHover: '#332528',
+    accent: '#FF0033',
+    accentDark: '#8B0020',
+    accentDeep: '#5C0015',
+    accentLight: '#FF1A5E',
+    accentMuted: '#FF4D6D',
+    accentBright: '#FF1744',
+    accentSoft: '#FF5252',
+    accentDim: '#6B2033',
+    accentBg: '#4A1525',
+    textPrimary: '#EAE0E2',
+    textSecondary: '#D4C4C8',
+    textTertiary: '#8A7A7E',
+    textDisabled: '#5A4F52',
+    success: '#00E676',
+    warning: '#FFD740',
+    error: '#FF1744',
+    info: '#448AFF',
+    border: '#2A1F22',
+    borderAccent: '#FF003344',
+    borderAccentFull: '#FF0033',
+  },
+}
+
+const themes = {
+  'cyberpunk-red': defaultTheme,
+  'cyberpunk-pink': {
+    ...defaultTheme,
+    name: 'Cyberpunk Pink',
+    colors: {
+      ...defaultTheme.colors,
+      accent: '#FF1A8C',
+      accentDark: '#8B1050',
+      accentDeep: '#5C0A35',
+      accentLight: '#FF4DAE',
+      accentMuted: '#FF6DC2',
+      accentBright: '#FF1A8C',
+      accentSoft: '#FF6DC2',
+      accentDim: '#6B2050',
+      accentBg: '#4A1535',
+    },
+  },
+  'midnight-blue': {
+    ...defaultTheme,
+    name: 'Midnight Blue',
+    colors: {
+      ...defaultTheme.colors,
+      accent: '#0088FF',
+      accentDark: '#004488',
+      accentDeep: '#002255',
+      accentLight: '#00AAFF',
+      accentMuted: '#44CCFF',
+      accentBright: '#0088FF',
+      accentSoft: '#44CCFF',
+      accentDim: '#203366',
+      accentBg: '#152244',
+    },
+  },
+  'matrix-green': {
+    ...defaultTheme,
+    name: 'Matrix Green',
+    colors: {
+      ...defaultTheme.colors,
+      accent: '#00FF41',
+      accentDark: '#008822',
+      accentDeep: '#005515',
+      accentLight: '#33FF66',
+      accentMuted: '#66FF99',
+      accentBright: '#00FF41',
+      accentSoft: '#66FF99',
+      accentDim: '#206630',
+      accentBg: '#154420',
+    },
+  },
+}
+
+export function getTheme(name) {
+  return themes[name] || defaultTheme
+}
+
+export function getThemeNames() {
+  return Object.keys(themes).map(k => ({ id: k, name: themes[k].name }))
+}
+
+export function applyTheme(theme) {
+  const root = document.documentElement
+  const c = theme.colors
+  const map = {
+    '--bg': c.bg,
+    '--bg-base': c.bgBase,
+    '--bg-surface': c.bgSurface,
+    '--bg-elevated': c.bgElevated,
+    '--bg-card': c.bgCard,
+    '--bg-input': c.bgInput,
+    '--bg-hover': c.bgHover,
+    '--accent': c.accent,
+    '--accent-dark': c.accentDark,
+    '--accent-deep': c.accentDeep,
+    '--accent-light': c.accentLight,
+    '--accent-muted': c.accentMuted,
+    '--accent-bright': c.accentBright,
+    '--accent-soft': c.accentSoft,
+    '--accent-dim': c.accentDim,
+    '--accent-bg': c.accentBg,
+    '--text-primary': c.textPrimary,
+    '--text-secondary': c.textSecondary,
+    '--text-tertiary': c.textTertiary,
+    '--text-disabled': c.textDisabled,
+    '--success': c.success,
+    '--warning': c.warning,
+    '--error': c.error,
+    '--info': c.info,
+    '--border': c.border,
+    '--border-accent': c.borderAccent,
+    '--border-accent-full': c.borderAccentFull,
+  }
+  Object.entries(map).forEach(([k, v]) => root.style.setProperty(k, v))
+}
+
+export default defaultTheme

web/vite.config.js

@@ -8,8 +8,12 @@ export default defineConfig({
     emptyOutDir: true,
   },
   server: {
+    port: 5173,
     proxy: {
-      '/api': 'http://127.0.0.1:0',
+      '/api': {
+        target: 'http://127.0.0.1:8095',
+        changeOrigin: true,
+      },
     },
   },
 })