refactor(web): migrate to heroicons, tokenize colors, polish UI (P0+P1)

AGENTS.md

@@ -159,3 +159,11 @@ script/              # Build-time code generation
 - **Output:** builds to `internal/web/dist/`, embedded in Go binary via `//go:embed`
 - **Lint:** `cd web && pnpm lint` (eslint + oxlint)
 - Changes to the frontend require rebuilding via `make build-web` for the Go binary to pick them up
+
+### Icons & Styling
+
+- **Icons:** use `@heroicons/vue/24/outline` exclusively. Import each icon by name from its subpath (`import { XMarkIcon } from '@heroicons/vue/24/outline'`) for per-file tree-shaking. Do **not** hand-write inline `<svg>` icons or `v-html` SVG path strings.
+- **Icon sizing:** use Tailwind `w-N h-N` classes (e.g. `class="w-3.5 h-3.5"`), never a `:size` prop.
+- **Colors:** every color must come from a CSS custom property defined in `src/styles/tokens.css`. Never hardcode hex/rgb/`#fff`/`white` in `.vue` or `.css`. Text on the primary/destructive fills uses `--color-on-primary` / `--color-on-destructive`; code blocks use `--code-bg` / `--code-border`; syntax highlighting uses `--hljs-*`.
+- **Terminal (xterm) colors:** live in tokens (`--term-*` and the 16-color ANSI palette) and are read at runtime via `getComputedStyle` in `TerminalInstance.vue` — see `termTheme()`. Do not define terminal colors inline.
+- **Adding a new color:** add the token to `tokens.css` (both `:root` light and `.dark`) first, then reference it by `var(...)`. To theme it per generated theme, edit `internal/theme/palette.go` and regenerate — never edit `tokens.generated.css` by hand.

internal/web/channel.go

@@ -2,6 +2,7 @@ package web
 
 import (
 	"encoding/json"
+	"io"
 	"net/http"
 	"time"
 
@@ -104,5 +105,47 @@ func (s *Server) handleChannelDisable(w http.ResponseWriter, r *http.Request) {
 	writeJSON(w, http.StatusOK, map[string]string{"status": "ok", "state": "disabled"})
 }
 
+// handleChannelBLEStatus reports whether the Bluetooth (BLE) status channel is
+// enabled in config. The actual BLE notifier is only wired at startup (and only
+// on desktop builds with CoreBluetooth), so this reflects the persisted
+// preference, which takes effect on the next launch.
+func (s *Server) handleChannelBLEStatus(w http.ResponseWriter, r *http.Request) {
+	enabled := false
+	if s.cfg != nil && s.cfg.Channel != nil {
+		enabled = s.cfg.Channel.BLEEnabled
+	}
+	writeJSON(w, http.StatusOK, map[string]any{"enabled": enabled})
+}
+
+// handleSetChannelBLE persists the Bluetooth (BLE) status-channel preference.
+// Like the proxy/cert settings, it takes effect after an app restart (the BLE
+// notifier is created once at startup when channel.ble_enabled is true).
+func (s *Server) handleSetChannelBLE(w http.ResponseWriter, r *http.Request) {
+	var req struct {
+		Enabled bool `json:"enabled"`
+	}
+	if err := json.NewDecoder(io.LimitReader(r.Body, 1<<16)).Decode(&req); err != nil {
+		writeJSON(w, http.StatusBadRequest, map[string]string{"error": "invalid request"})
+		return
+	}
+	s.mu.Lock()
+	if s.cfg == nil {
+		s.mu.Unlock()
+		writeJSON(w, http.StatusInternalServerError, map[string]string{"error": "config unavailable"})
+		return
+	}
+	if s.cfg.Channel == nil {
+		s.cfg.Channel = &config.ChannelConfig{}
+	}
+	s.cfg.Channel.BLEEnabled = req.Enabled
+	if err := config.SaveConfig(s.cfg); err != nil {
+		s.mu.Unlock()
+		writeJSON(w, http.StatusInternalServerError, map[string]string{"error": err.Error()})
+		return
+	}
+	s.mu.Unlock()
+	writeJSON(w, http.StatusOK, map[string]any{"enabled": req.Enabled})
+}
+
 // Ensure writeJSON is used (defined in server.go).
 var _ = json.Marshal

internal/web/server.go

@@ -330,6 +330,8 @@ func (s *Server) Start(ctx context.Context) error {
 	mux.HandleFunc("POST /api/channel/logout", s.handleChannelLogout)
 	mux.HandleFunc("POST /api/channel/enable", s.handleChannelEnable)
 	mux.HandleFunc("POST /api/channel/disable", s.handleChannelDisable)
+	mux.HandleFunc("GET /api/channel/ble", s.handleChannelBLEStatus)
+	mux.HandleFunc("POST /api/channel/ble", s.handleSetChannelBLE)
 
 	// Setup API — available in setup mode (no provider configured yet).
 	mux.HandleFunc("GET /api/setup/providers", s.handleSetupProviders)
@@ -2230,6 +2232,15 @@ func (s *Server) handleSetApprovalMode(w http.ResponseWriter, r *http.Request) {
 			config.Logger().Printf("[web] approval mode agent rebuild error: %v", err)
 		}
 	}
+	// Persist as the default startup mode so the preference survives restarts —
+	// resolveStartupMode reads cfg.DefaultMode. This makes the Settings toggle a
+	// true "default", not just a one-off runtime flip.
+	if s.cfg != nil {
+		s.cfg.DefaultMode = sm.String()
+		if err := config.SaveConfig(s.cfg); err != nil {
+			config.Logger().Printf("[web] approval mode save config failed: %v", err)
+		}
+	}
 	s.mu.Unlock()
 
 	s.wsBroker.Broadcast(WSEvent{

web/index.html

@@ -2,7 +2,7 @@
 <html lang="en" class="dark">
   <head>
     <meta charset="UTF-8">
-    <link rel="icon" type="image/svg+xml" href="/icon.svg">
+    <link rel="icon" type="image/png" href="/icon.png">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="theme-color" content="#111111">
     <script>

web/package.json

@@ -17,6 +17,7 @@
   "dependencies": {
     "@headlessui/tailwindcss": "^0.2.2",
     "@headlessui/vue": "^1.7.23",
+    "@heroicons/vue": "^2.2.0",
     "@tailwindcss/typography": "^0.5.19",
     "@tailwindcss/vite": "^4.2.2",
     "@tauri-apps/api": "^2.9.0",
@@ -30,8 +31,6 @@
     "@xterm/xterm": "^6.0.0",
     "dompurify": "^3.4.11",
     "highlight.js": "^11.11.1",
-    "lucide-vue-next": "^1.0.0",
-    "marked": "^18.0.0",
     "marked": "^18.0.2",
     "marked-highlight": "^2.2.4",
     "pinia": "^3.0.4",

web/src/App.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted, nextTick, watch, onUnmounted, provide } from 'vue'
+import { ChevronDoubleDownIcon } from '@heroicons/vue/24/outline'
 import { normalizeMode } from '@/types/api'
 import type { RemoteMeta } from '@/types/api'
 import { useChatStore } from '@/stores/chat'
@@ -434,7 +435,7 @@ function startResize(e: MouseEvent) {
               Start a new task in <span class="welcome-project">{{ store.projectName || 'jcode' }}</span>
             </h2>
             <p class="welcome-sub">
-              Pick a workspace, then send a message. Use <kbd class="welcome-kbd">/</kbd> for commands.
+              Send a message to start. <kbd class="welcome-kbd">/</kbd> for commands.
             </p>
           </div>
 
@@ -460,10 +461,8 @@ function startResize(e: MouseEvent) {
                 <ChatMessageVue
                   v-if="item.kind === 'message'"
                   :message="item.data"
-                  :can-retry="item.data.role === 'assistant' && !store.isRunning"
                   :can-edit="item.data.role === 'user' && !store.isRunning"
                   class="animate-fade-up"
-                  @retry="store.retryFromMessage(item.data.id)"
                   @edit="(text) => store.editAndResend(item.data.id, text)"
                 />
                 <ToolCallCard v-else-if="item.kind === 'tool'" :tool="item.data" class="animate-fade-up pl-9" />
@@ -506,25 +505,27 @@ function startResize(e: MouseEvent) {
           </div>
 
           <!-- Scroll-to-bottom button -->
-          <transition
-            enter-active-class="transition-all duration-200 ease-out"
-            enter-from-class="opacity-0 translate-y-2"
-            enter-to-class="opacity-100 translate-y-0"
-            leave-active-class="transition-all duration-150 ease-in"
-            leave-from-class="opacity-100 translate-y-0"
-            leave-to-class="opacity-0 translate-y-2"
-          >
-            <button
-              v-if="showScrollBtn"
-              class="absolute bottom-40 left-1/2 -translate-x-1/2 z-10 w-8 h-8 flex items-center justify-center rounded-full shadow-lg cursor-pointer transition-colors"
-              style="background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-muted-foreground)"
-              @click="scrollToBottom()"
+          <!-- Scroll-to-bottom button — anchored as its own flex row above the
+               composer (no magic px offset), so it tracks composer height. -->
+          <div class="relative h-0">
+            <transition
+              enter-active-class="transition-all duration-200 ease-out"
+              enter-from-class="opacity-0 translate-y-2"
+              enter-to-class="opacity-100 translate-y-0"
+              leave-active-class="transition-all duration-150 ease-in"
+              leave-from-class="opacity-100 translate-y-0"
+              leave-to-class="opacity-0 translate-y-2"
             >
-              <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
-                <path d="M12 5v14M5 12l7 7 7-7" />
-              </svg>
-            </button>
-          </transition>
+              <button
+                v-if="showScrollBtn"
+                class="absolute bottom-2 left-1/2 -translate-x-1/2 z-10 w-8 h-8 flex items-center justify-center rounded-full shadow-lg cursor-pointer transition-colors"
+                style="background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-muted-foreground)"
+                @click="scrollToBottom()"
+              >
+                <ChevronDoubleDownIcon class="w-4 h-4" />
+              </button>
+            </transition>
+          </div>
 
           <GoalBanner />
           <ChatInput />
@@ -639,7 +640,7 @@ function startResize(e: MouseEvent) {
   border: none;
   border-radius: var(--radius-lg);
   background: var(--color-primary);
-  color: #fff;
+  color: var(--color-on-primary);
   font-size: 13px;
   font-weight: 500;
   cursor: pointer;