@hienlh/ppm 0.20.9 → 0.21.0

package/src/web/components/git/git-worktree-panel.tsx

@@ -10,8 +10,9 @@ import {
   Lock,
   AlertCircle,
   Check,
-} from "lucide-react";
+} from "@/lib/icons";
 import { api, projectUrl } from "@/lib/api-client";
+import { useGitRepo } from "@/hooks/use-git-repo";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
@@ -33,6 +34,7 @@ interface GitWorktreePanelProps {
 
 /** Collapsible panel listing git worktrees with add/remove actions. */
 export function GitWorktreePanel({ projectName, projectPath }: GitWorktreePanelProps) {
+  const { gitUrl } = useGitRepo(projectName);
   const [expanded, setExpanded] = useState(false);
   const [worktrees, setWorktrees] = useState<GitWorktree[]>([]);
   const [loading, setLoading] = useState(false);
@@ -47,7 +49,7 @@ export function GitWorktreePanel({ projectName, projectPath }: GitWorktreePanelP
     setError(null);
     try {
       const data = await api.get<GitWorktree[]>(
-        `${projectUrl(projectName)}/git/worktrees`,
+        gitUrl("/worktrees"),
       );
       setWorktrees(data);
     } catch (e) {
@@ -66,7 +68,7 @@ export function GitWorktreePanel({ projectName, projectPath }: GitWorktreePanelP
     if (!removeTarget) return;
     setRemoving(true);
     try {
-      await api.post(`${projectUrl(projectName)}/git/worktree/remove`, {
+      await api.post(gitUrl("/worktree/remove"), {
         path: removeTarget.path,
         force,
       });
@@ -82,7 +84,7 @@ export function GitWorktreePanel({ projectName, projectPath }: GitWorktreePanelP
 
   async function handlePrune() {
     try {
-      await api.post(`${projectUrl(projectName)}/git/worktree/prune`, {});
+      await api.post(gitUrl("/worktree/prune"), {});
       await fetchWorktrees();
     } catch (e) {
       setError(e instanceof Error ? e.message : "Prune failed");

package/src/web/components/git/hunk-stage-dialog.tsx

@@ -14,8 +14,9 @@
  * is built, and the error says so.
  */
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { Check, Loader2, Minus, Plus, Trash2 } from "lucide-react";
+import { Check, Loader2, Minus, Plus, Trash2 } from "@/lib/icons";
 import { api, projectUrl } from "@/lib/api-client";
+import { useGitRepo } from "@/hooks/use-git-repo";
 import { basename, cn } from "@/lib/utils";
 import { useIsMobile } from "@/hooks/use-is-mobile";
 import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
@@ -106,6 +107,7 @@ function HunkStageBody({
   onApplied: () => void;
   isMobile: boolean;
 }) {
+  const { gitUrl } = useGitRepo(projectName);
   const { filePath, scope } = target;
   const [data, setData] = useState<FileHunks | null>(null);
   const [loading, setLoading] = useState(true);
@@ -120,7 +122,7 @@ function HunkStageBody({
     setError(null);
     api
       .get<FileHunks>(
-        `${projectUrl(projectName)}/git/hunks?path=${encodeURIComponent(filePath)}&scope=${scope}`,
+        gitUrl(`/hunks?path=${encodeURIComponent(filePath)}&scope=${scope}`),
       )
       .then((result) => {
         if (cancelled) return;
@@ -163,7 +165,7 @@ function HunkStageBody({
     setApplying(true);
     setError(null);
     try {
-      await api.post(`${projectUrl(projectName)}/git/${action}-hunks`, {
+      await api.post(gitUrl(`/${action}-hunks`), {
         path: filePath,
         hunks: request,
       });

package/src/web/components/group-chat/group-chat-tab.tsx

@@ -1,5 +1,5 @@
 import { useState, useRef, useEffect, useCallback, useMemo } from "react";
-import { Send, Square, Play, Users, Loader2 } from "lucide-react";
+import { Send, Square, Play, Users, Loader2 } from "@/lib/icons";
 import { useShallow } from "zustand/react/shallow";
 import { useProjectStore } from "@/stores/project-store";
 import { useIsMobile } from "@/hooks/use-is-mobile";

package/src/web/components/group-chat/group-create-dialog.tsx

@@ -1,5 +1,5 @@
 import { useState, useCallback } from "react";
-import { Plus, Trash2, Loader2 } from "lucide-react";
+import { Plus, Trash2, Loader2 } from "@/lib/icons";
 import { useIsMobile } from "@/hooks/use-is-mobile";
 import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";

package/src/web/components/group-chat/group-full-transcript-view.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { Loader2 } from "lucide-react";
+import { Loader2 } from "@/lib/icons";
 import { useIsMobile } from "@/hooks/use-is-mobile";
 import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";

package/src/web/components/group-chat/group-list.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback } from "react";
-import { Plus, Users, Loader2, Trash2 } from "lucide-react";
+import { Plus, Users, Loader2, Trash2 } from "@/lib/icons";
 import { useShallow } from "zustand/react/shallow";
 import { FeatureBadge } from "@/components/ui/feature-badge";
 import { useProjectStore } from "@/stores/project-store";

package/src/web/components/group-chat/group-member-edit-dialog.tsx

@@ -1,5 +1,5 @@
 import { useState, useCallback } from "react";
-import { Loader2 } from "lucide-react";
+import { Loader2 } from "@/lib/icons";
 import { useIsMobile } from "@/hooks/use-is-mobile";
 import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";

package/src/web/components/group-chat/group-member-roster.tsx

@@ -1,5 +1,5 @@
 import { memo } from "react";
-import { Pencil, Trash2, UserPlus } from "lucide-react";
+import { Pencil, Trash2, UserPlus } from "@/lib/icons";
 import { cn } from "@/lib/utils";
 import type { GroupMember, MemberStatus } from "../../../types/group-chat";
 

package/src/web/components/group-chat/group-message-item.tsx

@@ -1,5 +1,5 @@
 import { memo, type ReactNode } from "react";
-import { ScrollText } from "lucide-react";
+import { ScrollText } from "@/lib/icons";
 import { cn } from "@/lib/utils";
 import {
   ContextMenu,

package/src/web/components/group-chat/group-transcript-messages.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { ChevronRight, Brain, Settings2 } from "lucide-react";
+import { ChevronRight, Brain, Settings2 } from "@/lib/icons";
 import { MarkdownRenderer } from "@/components/shared/markdown-renderer";
 import { ToolCard } from "@/components/chat/tool-cards";
 import { cn } from "@/lib/utils";

package/src/web/components/jira/jira-config-form.tsx

@@ -2,7 +2,7 @@ import { useState, useEffect, type FormEvent } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { useJiraStore } from "@/stores/jira-store";
-import { CheckCircle, AlertCircle, Loader2, Trash2 } from "lucide-react";
+import { CheckCircle, AlertCircle, Loader2, Trash2 } from "@/lib/icons";
 
 interface Props {
   projectId: number;

package/src/web/components/jira/jira-filter-builder.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect, useCallback } from "react";
 import { Button } from "@/components/ui/button";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { X, Loader2 } from "lucide-react";
+import { X, Loader2 } from "@/lib/icons";
 import { api } from "@/lib/api-client";
 
 interface FilterState {

package/src/web/components/jira/jira-panel.tsx

@@ -8,7 +8,7 @@ import { JiraTicketCard } from "./jira-ticket-card";
 import { JiraWatcherList } from "./jira-watcher-list";
 import { JiraConfigForm } from "./jira-config-form";
 import { JiraDebugPromptDialog } from "./jira-debug-prompt-dialog";
-import { ArrowLeft, Bug, Settings2, Plus, ListFilter, RefreshCw, Loader2 } from "lucide-react";
+import { ArrowLeft, Bug, Settings2, Plus, ListFilter, RefreshCw, Loader2 } from "@/lib/icons";
 import { SidebarHeader } from "@/components/ui/sidebar-header";
 import { toast } from "sonner";
 import type { JiraWatchResult } from "../../../../src/types/jira";

package/src/web/components/jira/jira-results-panel.tsx

@@ -6,7 +6,7 @@ import { JiraStatusBadge } from "./jira-status-badge";
 import { JiraTicketDetail } from "./jira-ticket-detail";
 import { JiraDebugPromptDialog } from "./jira-debug-prompt-dialog";
 import { cn } from "@/lib/utils";
-import { RefreshCw, Trash2, Loader2, Play } from "lucide-react";
+import { RefreshCw, Trash2, Loader2, Play } from "@/lib/icons";
 import { toast } from "sonner";
 import type { JiraWatchResult, JiraResultStatus } from "../../../../src/types/jira";
 

package/src/web/components/jira/jira-ticket-card.tsx

@@ -1,4 +1,4 @@
-import { Play, RotateCcw, Square, ExternalLink, Trash2, Loader2, MoreHorizontal } from "lucide-react";
+import { Play, RotateCcw, Square, ExternalLink, Trash2, Loader2, MoreHorizontal } from "@/lib/icons";
 import {
   DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";

package/src/web/components/jira/jira-ticket-detail.tsx

@@ -4,7 +4,7 @@ import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { api } from "@/lib/api-client";
-import { ExternalLink, Loader2 } from "lucide-react";
+import { ExternalLink, Loader2 } from "@/lib/icons";
 import type { JiraIssue, JiraTransition } from "../../../../src/types/jira";
 
 interface Props {

package/src/web/components/jira/jira-watcher-form.tsx

@@ -4,7 +4,7 @@ import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { useJiraStore } from "@/stores/jira-store";
 import { JiraFilterBuilder } from "./jira-filter-builder";
-import { Loader2, Search } from "lucide-react";
+import { Loader2, Search } from "@/lib/icons";
 import type { JiraWatcher, JiraWatcherMode, JiraIssue } from "../../../../src/types/jira";
 
 const INTERVALS = [

package/src/web/components/jira/jira-watcher-list.tsx

@@ -4,7 +4,7 @@ import { Switch } from "@/components/ui/switch";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
 import { useJiraStore } from "@/stores/jira-store";
 import { JiraWatcherForm } from "./jira-watcher-form";
-import { Plus, Trash2, Play, Loader2, Pencil } from "lucide-react";
+import { Plus, Trash2, Play, Loader2, Pencil } from "@/lib/icons";
 import { toast } from "sonner";
 import type { JiraWatcher } from "../../../../src/types/jira";
 

package/src/web/components/layout/add-project-form.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef } from "react";
-import { Loader2, FolderOpen } from "lucide-react";
+import { Loader2, FolderOpen } from "@/lib/icons";
 import { useShallow } from "zustand/react/shallow";
 import { useProjectStore } from "@/stores/project-store";
 import { api } from "@/lib/api-client";

package/src/web/components/layout/cloud-alias-row.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback } from "react";
-import { Loader2, Pencil, ExternalLink, Check, X } from "lucide-react";
+import { Loader2, Pencil, ExternalLink, Check, X } from "@/lib/icons";
 import { api } from "@/lib/api-client";
 
 /** Cloud's slug rules — mirrored here so a bad name fails before a round-trip. */

package/src/web/components/layout/cloud-share-named-tunnel-row.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useState } from "react";
-import { Globe, Loader2, Plus, Square } from "lucide-react";
+import { Globe, Loader2, Plus, Square } from "@/lib/icons";
 import { api } from "@/lib/api-client";
 import { namedTunnelApi, type NamedTunnelStatus } from "@/lib/api-named-tunnel";
 

package/src/web/components/layout/cloud-share-popover.tsx

@@ -1,5 +1,5 @@
 import { useState, useCallback, useEffect } from "react";
-import { Cloud, Share2, Loader2, Copy, Check, X, LogOut, Link, Unlink, ExternalLink } from "lucide-react";
+import { Cloud, Share2, Loader2, Copy, Check, X, LogOut, Link, Unlink, ExternalLink } from "@/lib/icons";
 import { QRCodeSVG } from "qrcode.react";
 import { api } from "@/lib/api-client";
 import { copyToClipboard } from "@/lib/clipboard";

package/src/web/components/layout/command-palette-filter-chips.tsx

@@ -1,4 +1,4 @@
-import { FileCode, Database, FolderOpen, Zap } from "lucide-react";
+import { FileCode, Database, FolderOpen, Zap } from "@/lib/icons";
 
 /** Metadata for each command group — label and icon for the filter chip */
 const GROUP_META: Record<string, { label: string; icon: React.ElementType }> = {

package/src/web/components/layout/command-palette.tsx

@@ -19,20 +19,28 @@ import {
   Columns2,
   Cloud,
   AppWindow,
-} from "lucide-react";
+  CircleX,
+  WrapText,
+  Zap,
+} from "@/lib/icons";
 import { openExplorer } from "@/components/os-explorer/open-explorer";
 import { openSettings } from "@/components/settings/open-settings";
 import { useTabStore, type TabType } from "@/stores/tab-store";
 import { useProjectStore } from "@/stores/project-store";
 import { useSettingsStore } from "@/stores/settings-store";
+import { useIsMobile } from "@/hooks/use-is-mobile";
+import { useIsTouchOnly } from "@/hooks/use-is-touch-only";
 import { useKeybindingsStore } from "@/stores/keybindings-store";
 import { useFileStore, type FileNode } from "@/stores/file-store";
 import { useExtensionStore } from "@/stores/extension-store";
 import { useCompareStore } from "@/stores/compare-store";
+import { usePanelStore } from "@/stores/panel-store";
 import { api } from "@/lib/api-client";
 import { basename } from "@/lib/utils";
 import { scoreFileSearchFast, compareScores, getFilename, type FileSearchScore } from "@/lib/score-file-search";
 import { CommandPaletteFilterChips } from "@/components/layout/command-palette-filter-chips";
+import { dispatchExtCommand } from "@/lib/ext-command-dispatch";
+import { fileIconElement } from "@/lib/file-icons";
 
 /** Max results to display — prevents rendering thousands of matches */
 const MAX_RESULTS = 100;
@@ -140,6 +148,9 @@ export function CommandPalette({ open, onClose, initialQuery = "" }: { open: boo
   const toggleSidebar = useSettingsStore((s) => s.toggleSidebar);
   const getBinding = useKeybindingsStore((s) => s.getBinding);
   const extContributions = useExtensionStore((s) => s.contributions);
+  const isMobile = useIsMobile();
+  const isTouchOnly = useIsTouchOnly();
+  const lspEnabled = useSettingsStore((s) => s.lspEnabled);
 
   // Fetch filesystem files when path query changes directory
   const fetchFsFiles = useCallback(async (dir: string) => {
@@ -201,6 +212,20 @@ export function CommandPalette({ open, onClose, initialQuery = "" }: { open: boo
       { id: "postgres", label: "PostgreSQL", icon: Database, action: openNewTab("postgres", "PostgreSQL"), keywords: "database pg sql query", group: "action" },
       { id: "voice-input", label: "Voice Input", icon: Mic, action: () => { window.dispatchEvent(new CustomEvent("toggle-voice-input")); onClose(); }, keywords: "speech microphone dictate voice", group: "action", shortcut: formatShortcut(getBinding("voice-input")) },
       { id: "git-status", label: "Git Status", icon: GitCommitHorizontal, action: () => { setSidebarActiveTab("git"); onClose(); }, keywords: "changes diff staged", group: "action", shortcut: formatShortcut(getBinding("open-git-status")) },
+      { id: "problems", label: "Problems", icon: CircleX, action: () => { usePanelStore.getState().openInDock({ type: "problems", title: "Problems", projectId: null, closable: true }); onClose(); }, keywords: "errors warnings diagnostics lint typescript", group: "action", shortcut: formatShortcut(getBinding("open-problems")) },
+      {
+        // The editor's own wrap toggle is in the desktop-only breadcrumb bar,
+        // so on a phone this and Settings are the way to reach it.
+        id: "word-wrap", label: "Toggle Word Wrap", icon: WrapText, group: "action",
+        keywords: "wrap unwrap word lines editor soft",
+        action: () => {
+          const settings = useSettingsStore.getState();
+          if (isMobile) settings.toggleMobileWordWrap();
+          else settings.toggleWordWrap();
+          onClose();
+        },
+        shortcut: isMobile ? undefined : "Alt+Z",
+      },
       {
         id: "compare-files",
         label: "Compare Files...",
@@ -224,6 +249,23 @@ export function CommandPalette({ open, onClose, initialQuery = "" }: { open: boo
           onClose();
         },
       },
+      // `isTouchOnly`, not `isMobile`: the editor gates the server on the device
+      // rather than on the viewport, so a wide touch-only tablet was offered this
+      // entry while the setting it toggles did nothing there. The two have to ask
+      // the same question or the palette advertises a switch with no effect.
+      ...(isTouchOnly ? [] : [{
+        id: "language-server",
+        label: lspEnabled ? "Turn Off Language Server" : "Turn On Language Server",
+        icon: Zap,
+        group: "action" as const,
+        keywords: "lsp language server completions intellisense hover definition typescript pyright gopls",
+        hint: "This device",
+        action: () => {
+          const settings = useSettingsStore.getState();
+          settings.setLspEnabled(!settings.lspEnabled);
+          onClose();
+        },
+      }]),
       {
         id: "settings", label: "Settings", icon: Settings,
         action: () => {
@@ -259,18 +301,14 @@ export function CommandPalette({ open, onClose, initialQuery = "" }: { open: boo
         keywords: `extension ${cmd.command} ${cmd.category ?? ""}`,
         shortcut: shortcutCombo ? formatShortcut(shortcutCombo) : undefined,
         action: () => {
-          const args: unknown[] = [];
-          if (activeProject?.path) args.push(activeProject.path);
-          window.dispatchEvent(new CustomEvent("ext:command:execute", {
-            detail: { command: cmd.command, args },
-          }));
+          void dispatchExtCommand(cmd.command);
           onClose();
         },
       };
     });
 
     return [...builtIn, ...extCmds];
-  }, [activeProject, openTab, onClose, setSidebarActiveTab, sidebarCollapsed, toggleSidebar, getBinding, extContributions]);
+  }, [activeProject, openTab, onClose, setSidebarActiveTab, sidebarCollapsed, toggleSidebar, getBinding, extContributions, isMobile, isTouchOnly, lspEnabled]);
 
   // File commands — from index when ready, fallback to flattened tree
   const fileCommands = useMemo<CommandItem[]>(() => {
@@ -283,7 +321,7 @@ export function CommandPalette({ open, onClose, initialQuery = "" }: { open: boo
       id: `file:${f.path}`,
       label: f.name,
       hint: f.path,
-      icon: FileCode,
+      icon: fileIconElement(f.name),
       group: "file" as const,
       keywords: f.path,
       // Propagate gitignore flag for muted rendering (only present on /files/index entries)

package/src/web/components/layout/dock-header.tsx

@@ -4,12 +4,12 @@
  * icon map; vertical positions collapse inactive pills + show a `+N` overflow
  * dropdown (see resolveDockPills). Position dropdown persists per-user (settings).
  */
-import { PanelLeft, PanelBottom, PanelRight, Maximize2, Minimize2, ChevronDown, Plus, Check, X } from "lucide-react";
+import { PanelLeft, PanelBottom, PanelRight, Maximize2, Minimize2, ChevronDown, Plus, Check, X } from "@/lib/icons";
 import { usePanelStore } from "@/stores/panel-store";
 import { useProjectStore } from "@/stores/project-store";
 import { useSettingsStore, type DockPosition } from "@/stores/settings-store";
 import { DOCK_PANEL_ID } from "@/stores/panel-utils";
-import { getTabTypeIcon } from "@/lib/tab-type-icons";
+import { getTabIcon } from "@/lib/tab-type-icons";
 import { resolveDockPills } from "./dock-pills";
 import {
   DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel,
@@ -62,7 +62,7 @@ export function DockHeader() {
         {display.visible.map((id) => {
           const tab = byId.get(id);
           if (!tab) return null;
-          const Icon = getTabTypeIcon(tab.type);
+          const Icon = getTabIcon(tab);
           const isActive = id === activeTabId;
           const showLabel = !display.iconOnlyInactive || isActive;
           const pill = (
@@ -113,7 +113,7 @@ export function DockHeader() {
               {display.overflow.map((id) => {
                 const tab = byId.get(id);
                 if (!tab) return null;
-                const Icon = getTabTypeIcon(tab.type);
+                const Icon = getTabIcon(tab);
                 return (
                   <DropdownMenuItem key={id} onClick={() => activate(id)}>
                     <Icon className="size-3.5" />

package/src/web/components/layout/dock-panel.tsx

@@ -8,13 +8,13 @@
  * Close calls setDockVisible(false); real kill = close-from-dock / shell exit / idle-grace.
  */
 import { useCallback } from "react";
-import { X, Terminal, Plus, Maximize2, Minimize2 } from "lucide-react";
+import { X, Terminal, Plus, Maximize2, Minimize2 } from "@/lib/icons";
 import { usePanelStore } from "@/stores/panel-store";
 import { DOCK_PANEL_ID } from "@/stores/panel-utils";
 import { useProjectStore } from "@/stores/project-store";
 import { registerPanelSlot } from "./tab-pool";
 import { DockHeader } from "./dock-header";
-import { getTabTypeIcon } from "@/lib/tab-type-icons";
+import { getTabIcon } from "@/lib/tab-type-icons";
 import { cn } from "@/lib/utils";
 
 // ---------------------------------------------------------------------------
@@ -136,7 +136,7 @@ function MobileDockHeader() {
       {/* Scrollable session pill strip */}
       <div className="flex-1 min-w-0 flex items-center gap-1.5 overflow-x-auto scrollbar-none">
         {tabs.map((tab) => {
-          const Icon = getTabTypeIcon(tab.type);
+          const Icon = getTabIcon(tab);
           const isActive = tab.id === activeTabId;
           return (
             <div

package/src/web/components/layout/draggable-tab.tsx

@@ -1,5 +1,5 @@
 import { useState, useRef, useEffect } from "react";
-import { X, Download } from "lucide-react";
+import { X, Download, MessageCircle } from "@/lib/icons";
 import type { Tab, TabType } from "@/stores/tab-store";
 import { cn } from "@/lib/utils";
 import { isDarkColor } from "@/lib/color-utils";
@@ -36,6 +36,12 @@ interface DraggableTabProps {
   onTouchStart?: (e: React.TouchEvent) => void;
   onTouchMove?: (e: React.TouchEvent) => void;
   onTouchEnd?: (e: React.TouchEvent) => void;
+  /**
+   * Forwarded like the others and easy to leave out, which is what happened.
+   * The press that arms a tab drag lives in `use-touch-tab-drag`, so a cancel
+   * that never reaches this element leaves that timer to fire into a scroll.
+   */
+  onTouchCancel?: (e: React.TouchEvent) => void;
   tabRef: (el: HTMLButtonElement | null) => void;
   /** If provided, double-clicking the title enters inline rename mode */
   onRename?: (newTitle: string) => void;
@@ -49,7 +55,7 @@ interface DraggableTabProps {
 
 export function DraggableTab({
   tab, isActive, icon: Icon, showDropBefore, notificationType, notificationManual, isStreaming, onSelect, onClose,
-  onDragStart, onDragOver, onDragEnd, onTouchStart, onTouchMove, onTouchEnd, tabRef, onRename, onContextAction,
+  onDragStart, onDragOver, onDragEnd, onTouchStart, onTouchMove, onTouchEnd, onTouchCancel, tabRef, onRename, onContextAction,
   tagColor, extraMenuContent,
 }: DraggableTabProps) {
   const [editing, setEditing] = useState(false);
@@ -96,6 +102,7 @@ export function DraggableTab({
       onTouchStart={onTouchStart}
       onTouchMove={onTouchMove}
       onTouchEnd={onTouchEnd}
+      onTouchCancel={onTouchCancel}
       style={colorStyle}
       className={tabButtonClass(editorTabStyle, isActive, !!colorStyle)}
     >
@@ -105,7 +112,17 @@ export function DraggableTab({
         // Tag identity is now shown as a separate left-edge bar (see wrapper div below), not icon color.
         className={cn("relative", isStreaming && "text-warning")}
       >
-        <Icon className="size-4" />
+        {/*
+         * The empty bubble while streaming, because the dots go *inside* it. Fluent's
+         * `chat` glyph draws two message lines of its own, so at 16px the dots landed
+         * on top of them in the same colour and the three of them read as one bar —
+         * an indicator that looked broken rather than animated. `MessageCircle` is
+         * `chat-empty`: the same bubble, nothing in it. Safe to swap unconditionally
+         * because `isStreaming` is only ever set for a chat tab (both tab-bar.tsx and
+         * mobile-tab-switcher-sheet.tsx read `sessionId` only when `type === "chat"`),
+         * whose icon is that same bubble.
+         */}
+        {isStreaming ? <MessageCircle className="size-4" /> : <Icon className="size-4" />}
         {isStreaming ? (
           // Messenger-style typing dots inside chat bubble — inherits current icon color (amber while streaming)
           <span aria-hidden className="absolute inset-0 flex items-center justify-center gap-[1.5px]">

package/src/web/components/layout/editor-panel.tsx

@@ -1,5 +1,5 @@
 import { useCallback } from "react";
-import { Terminal, MessageSquare, FilePlus, X } from "lucide-react";
+import { Terminal, MessageSquare, FilePlus, X } from "@/lib/icons";
 import { usePanelStore } from "@/stores/panel-store";
 import { useProjectStore } from "@/stores/project-store";
 import { useTabStore, type TabType } from "@/stores/tab-store";

package/src/web/components/layout/mobile-drawer-tab-bar.tsx

@@ -1,5 +1,5 @@
 import { useRef, useState, useEffect } from "react";
-import { MoreHorizontal } from "lucide-react";
+import { MoreHorizontal } from "@/lib/icons";
 import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
 import { FeatureBadge } from "@/components/ui/feature-badge";
 import { cn } from "@/lib/utils";
@@ -132,6 +132,15 @@ export function MobileDrawerTabBar({ tabs, activeId, onSelect, onReorder }: Prop
               else resetDrag();
               touchStart.current = null;
             }}
+            // The browser claiming the gesture for a scroll fires `touchcancel`
+            // and then sends no more move/end here, so the tolerance above never
+            // gets the moves it would have measured — the arm has to be dropped
+            // on this event or the strip enters drag mode under a moving finger.
+            onTouchCancel={() => {
+              clearPress();
+              resetDrag();
+              touchStart.current = null;
+            }}
           >
             <Icon className="size-4" />
             <span>{tab.shortLabel ?? tab.label}</span>

package/src/web/components/layout/mobile-drawer.tsx

@@ -1,5 +1,5 @@
 import { useState, useCallback, useEffect, useMemo } from "react";
-import { X, Bug as BugIcon, Cloud, FolderTree, MonitorSmartphone, Settings } from "lucide-react";
+import { X, Bug as BugIcon, Cloud, FolderTree, MonitorSmartphone, Settings } from "@/lib/icons";
 import { useShallow } from "zustand/react/shallow";
 import { useProjectStore } from "@/stores/project-store";
 import { useSettingsStore, type SidebarActiveTab } from "@/stores/settings-store";

package/src/web/components/layout/mobile-nav.tsx

@@ -2,7 +2,7 @@ import { useState, useEffect, useCallback, useMemo } from "react";
 import {
   Terminal, Menu, X, Layers, Plus,
   Copy, Download, Pencil, Trash2, Columns2, Circle, Tag, Check, XSquare, ChevronsRight, ChevronUp,
-} from "lucide-react";
+} from "@/lib/icons";
 import { usePanelStore } from "@/stores/panel-store";
 import { useShallow } from "zustand/react/shallow";
 import { useProjectStore, resolveOrder } from "@/stores/project-store";
@@ -26,7 +26,7 @@ import { useVisualViewport } from "@/hooks/use-visual-viewport";
 import { useIsMobile } from "@/hooks/use-is-mobile";
 import { DockPanel } from "@/components/layout/dock-panel";
 import { MobileTabSwitcherSheet } from "@/components/layout/mobile-tab-switcher-sheet";
-import { getTabTypeIcon } from "@/lib/tab-type-icons";
+import { getTabIcon } from "@/lib/tab-type-icons";
 import { countDockTabs } from "@/components/layout/dock-tabs";
 import { DOCK_PANEL_ID } from "@/stores/panel-utils";
 
@@ -254,7 +254,7 @@ export function MobileNav({ onMenuPress, onProjectsPress }: MobileNavProps) {
     ? resolveProjectColor(activeProject.color, activeIdx >= 0 ? activeIdx : 0)
     : "#4f86c6";
 
-  const ActiveTabIcon = activeTab ? getTabTypeIcon(activeTab.type) : null;
+  const ActiveTabIcon = activeTab ? getTabIcon(activeTab) : null;
 
   return (
     <nav className="fixed bottom-0 left-0 right-0 md:hidden bg-background border-t border-border z-40 select-none">

package/src/web/components/layout/mobile-tab-switcher-sheet.tsx

@@ -5,12 +5,12 @@
  * buildTabSwitcherGroups helper; this file is presentation + wiring only.
  */
 import { useState, useRef, useCallback } from "react";
-import { Search, X, Plus, Columns2 } from "lucide-react";
+import { Search, X, Plus, Columns2, MessageCircle } from "@/lib/icons";
 import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
 import { usePanelStore } from "@/stores/panel-store";
 import { useNotificationStore, notificationColor } from "@/stores/notification-store";
 import { useStreamingStore } from "@/stores/streaming-store";
-import { getTabTypeIcon } from "@/lib/tab-type-icons";
+import { getTabIcon } from "@/lib/tab-type-icons";
 import { buildTabSwitcherGroups, type TabSortMode } from "./tab-switcher-groups";
 import type { Tab } from "@/stores/tab-store";
 import { cn } from "@/lib/utils";
@@ -148,7 +148,7 @@ export function MobileTabSwitcherSheet({
                 </div>
               )}
               {group.tabs.map((tab) => {
-                const Icon = getTabTypeIcon(tab.type);
+                const Icon = getTabIcon(tab);
                 const isActive = tab.id === activeTabId;
                 const sessionId = tab.type === "chat" ? (tab.metadata?.sessionId as string | undefined) : undefined;
                 const tagColor = sessionId ? sessionTagMap[sessionId]?.color : undefined;
@@ -165,6 +165,10 @@ export function MobileTabSwitcherSheet({
                     onTouchStart={() => startLongPress(tab.id)}
                     onTouchEnd={cancelLongPress}
                     onTouchMove={cancelLongPress}
+                    // Scrolling this list is what it is for, and a scroll fires
+                    // `touchcancel` and then stops sending move/end here — so
+                    // without this the timer completes into the moving list.
+                    onTouchCancel={cancelLongPress}
                     onContextMenu={(e) => e.preventDefault()}
                     className={cn(
                       "relative flex items-center gap-2.5 w-full h-11 rounded-lg pl-3.5 pr-2 transition-colors",
@@ -179,7 +183,12 @@ export function MobileTabSwitcherSheet({
                     />
                     {/* Icon with streaming typing-dots / unread notification badge */}
                     <span className={cn("relative shrink-0", isStreaming && "text-warning")}>
-                      <Icon className={cn("size-4", isStreaming ? undefined : isActive ? "text-primary" : "text-text-secondary")} />
+                      {/* Empty bubble while streaming so the dots below have room — see draggable-tab.tsx */}
+                      {isStreaming ? (
+                        <MessageCircle className="size-4" />
+                      ) : (
+                        <Icon className={cn("size-4", isActive ? "text-primary" : "text-text-secondary")} />
+                      )}
                       {isStreaming ? (
                         <span aria-hidden className="absolute inset-0 flex items-center justify-center gap-[1.5px]">
                           <span className="tab-typing-dot size-[2px] rounded-full bg-current" />

package/src/web/components/layout/nav-section-rail.tsx

@@ -1,6 +1,6 @@
 import { useState, useRef, useEffect, useMemo, memo } from "react";
 import { createPortal } from "react-dom";
-import { Settings, Bug, Cloud, FolderTree, MonitorSmartphone } from "lucide-react";
+import { Settings, Bug, Cloud, FolderTree, MonitorSmartphone } from "@/lib/icons";
 import { openExplorer } from "@/components/os-explorer/open-explorer";
 import { useOpenRemoteDesktop } from "@/components/remote-desktop/open-remote-desktop";
 import { useRemoteDesktopAvailable } from "@/components/remote-desktop/use-remote-desktop-available";