feat(app): sidebar favorites, drag-reorder, and delete-with-confirm

- FAVORITES section at the top collects pinned workspaces (removed from their
  group listing); a star toggle on each row pins/unpins via setWorkspaceMeta.
- Drag-to-reorder within a section using raw pointer events (HTML5 DnD is
  unreliable in the macOS WKWebView), with a drop-line indicator; on drop the
  section's `order` is reassigned sequentially and persisted. Cross-section
  drops are ignored (group membership unchanged).
- Trash icon on row hover opens a ConfirmDelete modal that shows the live
  terminal count and warns before terminating them, then calls close_workspace
  and re-points the active workspace.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

app/src/App.tsx

@@ -4,10 +4,11 @@ import { Sidebar } from "./Sidebar";
 import { TopBar } from "./TopBar";
 import { CenterToolbar } from "./CenterToolbar";
 import { Wizard } from "./Wizard";
+import { ConfirmDelete } from "./ConfirmDelete";
 import { EventCenter } from "./EventCenter";
 import { maybeNotify } from "./notify";
 import { COLORS } from "./theme";
-import { getStatusFull, applyPreset, onDaemonEvent, onDaemonRawEvent, setWorkspaceMeta, focusSurface, getEventLog, markEventsRead, getHealth } from "./socketBridge";
+import { getStatusFull, applyPreset, onDaemonEvent, onDaemonRawEvent, setWorkspaceMeta, focusSurface, getEventLog, markEventsRead, getHealth, closeWorkspaceCmd } from "./socketBridge";
 import type { EventRecord, DaemonHealth } from "./socketBridge";
 import { leafIds } from "./layoutTypes";
 import type { Group, WorkspaceView, SurfaceState } from "./layoutTypes";
@@ -29,6 +30,7 @@ export function App() {
   const [states, setStates] = useState<Record<string, SurfaceState>>({});
   const [events, setEvents] = useState<EventRecord[]>([]);
   const [wizard, setWizard] = useState(false);
+  const [deleteTarget, setDeleteTarget] = useState<WorkspaceView | null>(null);
   const [eventsOpen, setEventsOpen] = useState(() => loadFlag("spacesh.eventsOpen", true));
   const [sidebarOpen, setSidebarOpen] = useState(() => loadFlag("spacesh.sidebarOpen", true));
   const [health, setHealth] = useState<DaemonHealth | null>(null);
@@ -137,7 +139,7 @@ export function App() {
     <div style={{ display: "flex", flexDirection: "column", height: "100vh", background: COLORS.bgApp }}>
       <TopBar active={active} eventsOpen={eventsOpen} onToggleEvents={() => setEventsOpen((v) => !v)} onShowEvents={() => setEventsOpen(true)} sidebarOpen={sidebarOpen} onToggleSidebar={() => setSidebarOpen((v) => !v)} unread={unread} />
       <div style={{ flex: 1, display: "flex", minHeight: 0 }}>
-        {sidebarOpen && <Sidebar groups={groups} workspaces={workspaces} activeId={activeId} onSelect={selectWorkspace} onNew={() => setWizard(true)} health={health} connected={connected} />}
+        {sidebarOpen && <Sidebar groups={groups} workspaces={workspaces} activeId={activeId} onSelect={selectWorkspace} onNew={() => setWizard(true)} onDelete={setDeleteTarget} health={health} connected={connected} />}
         <div style={{ flex: 1, display: "flex", flexDirection: "column", minWidth: 0 }}>
           {active && (
             <CenterToolbar selected="" onSelect={(p) => { if (active) void applyPreset(active.id, p, []); }} onOpenSearch={() => { if (effectiveFocus) { setSearchSurfaceId(effectiveFocus); setSearchNonce((n) => n + 1); } }} />
@@ -157,6 +159,24 @@ export function App() {
         )}
       </div>
       {wizard && <Wizard onDone={(id) => { setWizard(false); setActiveId(id); void refresh(); }} onCancel={() => setWizard(false)} />}
+      {deleteTarget && (
+        <ConfirmDelete
+          name={deleteTarget.name}
+          activeCount={Object.values(deleteTarget.surfaces).filter((s) => s.running).length}
+          onCancel={() => setDeleteTarget(null)}
+          onConfirm={() => {
+            const tgt = deleteTarget;
+            setDeleteTarget(null);
+            void closeWorkspaceCmd(tgt.id).then(() => {
+              if (activeId === tgt.id) {
+                const next = workspaces.find((w) => w.id !== tgt.id);
+                setActiveId(next ? next.id : null);
+              }
+              void refresh();
+            });
+          }}
+        />
+      )}
     </div>
   );
 }

app/src/ConfirmDelete.tsx

@@ -0,0 +1,63 @@
+import { useEffect, useRef } from "react";
+import { COLORS, FONT } from "./theme";
+
+/** Confirmation modal for deleting a workspace. Warns when live terminals
+ * would be killed, but still allows the delete (per product decision). */
+export function ConfirmDelete({
+  name,
+  activeCount,
+  onConfirm,
+  onCancel,
+}: {
+  name: string;
+  activeCount: number;
+  onConfirm: () => void;
+  onCancel: () => void;
+}) {
+  const confirmRef = useRef<HTMLButtonElement>(null);
+  useEffect(() => { confirmRef.current?.focus(); }, []);
+
+  function onKeyDown(e: React.KeyboardEvent) {
+    e.stopPropagation();
+    if (e.key === "Escape") { e.preventDefault(); onCancel(); }
+    else if (e.key === "Enter") { e.preventDefault(); onConfirm(); }
+  }
+
+  return (
+    <div
+      onMouseDown={onCancel}
+      style={{ position: "fixed", inset: 0, zIndex: 2000, background: "#000A", display: "flex", alignItems: "center", justifyContent: "center" }}
+    >
+      <div
+        onMouseDown={(e) => e.stopPropagation()}
+        onKeyDown={onKeyDown}
+        style={{ width: 420, background: COLORS.bgApp, border: `1px solid ${COLORS.borderStrong}`, borderRadius: 14, padding: 24, color: COLORS.textPrimary, fontFamily: FONT.ui }}
+      >
+        <div style={{ fontWeight: 700, fontSize: 16, marginBottom: 12 }}>Delete workspace</div>
+        <div style={{ fontSize: 13, color: COLORS.textSecondary, lineHeight: 1.5 }}>
+          Delete <span style={{ color: COLORS.textPrimary, fontWeight: 600 }}>{name}</span>? This removes the workspace and its layout.
+        </div>
+        {activeCount > 0 && (
+          <div style={{ marginTop: 12, padding: "8px 10px", borderRadius: 8, background: "#2A1414", border: `1px solid ${COLORS.stError}`, color: COLORS.stError, fontSize: 12, fontWeight: 600 }}>
+            {activeCount} active terminal{activeCount === 1 ? "" : "s"} will be terminated.
+          </div>
+        )}
+        <div style={{ display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 20 }}>
+          <button
+            onClick={onCancel}
+            style={{ padding: "7px 14px", background: COLORS.bgElevated, color: COLORS.textPrimary, border: `1px solid ${COLORS.borderStrong}`, borderRadius: 7, fontSize: 13, fontFamily: FONT.ui }}
+          >
+            Cancel
+          </button>
+          <button
+            ref={confirmRef}
+            onClick={onConfirm}
+            style={{ padding: "7px 14px", background: COLORS.stError, color: "#fff", border: "none", borderRadius: 7, fontSize: 13, fontWeight: 600, fontFamily: FONT.ui }}
+          >
+            Delete
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

app/src/Sidebar.tsx

@@ -1,8 +1,9 @@
-import { useState, useEffect } from "react";
-import { Plus, ChevronDown, ChevronRight } from "lucide-react";
+import { useState, useEffect, useRef } from "react";
+import { Plus, ChevronDown, ChevronRight, Star, Trash2 } from "lucide-react";
 import { COLORS, FONT, STATE_COLOR } from "./theme";
 import type { Group, WorkspaceView, SurfaceState } from "./layoutTypes";
 import type { DaemonHealth } from "./socketBridge";
+import { setWorkspaceMeta } from "./socketBridge";
 
 function fmtUptime(startedMs: number): string {
   const s = Math.max(0, Math.floor((Date.now() - startedMs) / 1000));
@@ -22,45 +23,131 @@ function aggregate(w: WorkspaceView): SurfaceState | "stopped" {
   return "idle";
 }
 
+interface DropAt { section: string; index: number }
+
 export function Sidebar({
-  groups, workspaces, activeId, onSelect, onNew, health, connected,
+  groups, workspaces, activeId, onSelect, onNew, onDelete, health, connected,
 }: {
   groups: Group[];
   workspaces: WorkspaceView[];
   activeId: string | null;
   onSelect: (id: string) => void;
   onNew: () => void;
+  onDelete: (w: WorkspaceView) => void;
   health: DaemonHealth | null;
   connected: boolean;
 }) {
   const [collapsed, setCollapsed] = useState<Record<string, boolean>>({});
+  const [hovered, setHovered] = useState<string | null>(null);
+  const [drag, setDrag] = useState<{ id: string; section: string } | null>(null);
+  const [dropAt, setDropAt] = useState<DropAt | null>(null);
+  const dragRef = useRef<{ id: string; section: string } | null>(null);
+  const dropRef = useRef<DropAt | null>(null);
   const [, setTick] = useState(0);
+  dragRef.current = drag;
+  dropRef.current = dropAt;
+
   useEffect(() => {
     const t = setInterval(() => setTick((n) => n + 1), 30000);
     return () => clearInterval(t);
   }, []);
-  const byGroup = (gid: string | null) => workspaces.filter((w) => (w.group_id ?? null) === gid).sort((a, b) => a.order - b.order);
+
+  const pinned = workspaces.filter((w) => w.pinned).sort((a, b) => a.order - b.order);
+  const byGroup = (gid: string | null) =>
+    workspaces.filter((w) => !w.pinned && (w.group_id ?? null) === gid).sort((a, b) => a.order - b.order);
   const ungrouped = byGroup(null);
 
-  const row = (w: WorkspaceView) => {
+  const togglePin = (w: WorkspaceView) => { void setWorkspaceMeta(w.id, { pinned: !w.pinned }); };
+
+  // Persist a new ordering for one section by reassigning sequential `order`
+  // values (per-section; values never compared across sections).
+  const commitReorder = (items: WorkspaceView[], fromId: string, toIndex: number) => {
+    const fromIndex = items.findIndex((w) => w.id === fromId);
+    if (fromIndex < 0) return;
+    const next = [...items];
+    const [moved] = next.splice(fromIndex, 1);
+    next.splice(Math.min(toIndex, next.length), 0, moved);
+    next.forEach((w, i) => { if (w.order !== i) void setWorkspaceMeta(w.id, { order: i }); });
+  };
+
+  const startDrag = (w: WorkspaceView, section: string, items: WorkspaceView[], e: React.MouseEvent) => {
+    if (e.button !== 0) return;
+    const startX = e.clientX, startY = e.clientY;
+    let active = false;
+    const prevUserSelect = document.body.style.userSelect;
+    const move = (ev: MouseEvent) => {
+      if (!active) {
+        if (Math.abs(ev.clientX - startX) + Math.abs(ev.clientY - startY) < 5) return;
+        active = true;
+        document.body.style.userSelect = "none";
+        setDrag({ id: w.id, section });
+      }
+      const el = (document.elementFromPoint(ev.clientX, ev.clientY) as HTMLElement | null)?.closest("[data-ws-id]") as HTMLElement | null;
+      if (!el || el.getAttribute("data-ws-section") !== section) { setDropAt(null); return; }
+      const idx = Number(el.getAttribute("data-ws-index"));
+      const r = el.getBoundingClientRect();
+      const after = ev.clientY > r.top + r.height / 2;
+      setDropAt({ section, index: after ? idx + 1 : idx });
+    };
+    const up = () => {
+      window.removeEventListener("mousemove", move);
+      window.removeEventListener("mouseup", up);
+      document.body.style.userSelect = prevUserSelect;
+      const d = dropRef.current;
+      const dr = dragRef.current;
+      setDrag(null); setDropAt(null);
+      if (active && d && dr && d.section === section) commitReorder(items, dr.id, d.index);
+    };
+    window.addEventListener("mousemove", move);
+    window.addEventListener("mouseup", up);
+  };
+
+  const row = (w: WorkspaceView, section: string, items: WorkspaceView[], index: number) => {
     const isActive = w.id === activeId;
+    const showLine = dropAt && dropAt.section === section && dropAt.index === index;
+    const showLineEnd = dropAt && dropAt.section === section && dropAt.index === items.length && index === items.length - 1;
     return (
-      <div key={w.id} onClick={() => onSelect(w.id)}
+      <div key={w.id}>
+        {showLine && <div style={{ height: 2, background: COLORS.accent, borderRadius: 2, margin: "1px 0" }} />}
+        <div
+          data-ws-id={w.id} data-ws-section={section} data-ws-index={index}
+          onClick={() => onSelect(w.id)}
+          onMouseDown={(e) => startDrag(w, section, items, e)}
+          onMouseEnter={() => setHovered(w.id)}
+          onMouseLeave={() => setHovered((h) => (h === w.id ? null : h))}
           style={{
-          display: "flex", alignItems: "center", gap: 10, height: 34, padding: "0 8px", borderRadius: 6, cursor: "pointer",
+            display: "flex", alignItems: "center", gap: 8, height: 34, padding: "0 8px", borderRadius: 6,
+            cursor: drag?.id === w.id ? "grabbing" : "pointer",
+            opacity: drag?.id === w.id ? 0.5 : 1,
             background: isActive ? COLORS.bgElevated : "transparent", fontFamily: FONT.ui, fontSize: 13,
             color: isActive ? COLORS.textPrimary : COLORS.textSecondary,
           }}>
           <span style={{ width: 10, height: 10, borderRadius: "50%", border: `2px solid ${STATE_COLOR[aggregate(w)]}`, boxSizing: "border-box", flex: "0 0 10px" }} />
           <span style={{ flex: 1, fontWeight: isActive ? 600 : 400, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{w.name}</span>
+          {(hovered === w.id || w.pinned) && (
+            <Star size={14} fill={w.pinned ? COLORS.stWait : "none"} color={w.pinned ? COLORS.stWait : COLORS.textMuted}
+              style={{ cursor: "pointer", flex: "0 0 14px" }}
+              onMouseDown={(e) => e.stopPropagation()}
+              onClick={(e) => { e.stopPropagation(); togglePin(w); }} />
+          )}
+          {hovered === w.id && (
+            <Trash2 size={14} color={COLORS.textMuted}
+              style={{ cursor: "pointer", flex: "0 0 14px" }}
+              onMouseDown={(e) => e.stopPropagation()}
+              onClick={(e) => { e.stopPropagation(); onDelete(w); }} />
+          )}
           {w.unread && <span style={{ width: 7, height: 7, borderRadius: "50%", background: COLORS.accent, flex: "0 0 7px" }} />}
           <span style={{ display: "flex", alignItems: "center", justifyContent: "center", height: 18, minWidth: 18, padding: "0 6px", borderRadius: 9, background: COLORS.bgApp, fontFamily: FONT.mono, fontSize: 11, color: COLORS.textSecondary }}>
             {Object.keys(w.surfaces).length}
           </span>
         </div>
+        {showLineEnd && <div style={{ height: 2, background: COLORS.accent, borderRadius: 2, margin: "1px 0" }} />}
+      </div>
     );
   };
 
+  const section = (key: string, items: WorkspaceView[]) => items.map((w, i) => row(w, key, items, i));
+
   return (
     <div style={{ display: "flex", flexDirection: "column", width: 248, flex: "0 0 248px", background: COLORS.bgSidebar, height: "100%", padding: 14, boxSizing: "border-box" }}>
       <button onClick={onNew}
@@ -75,8 +162,18 @@ export function Sidebar({
       </button>
 
       <div style={{ flex: 1, overflowY: "auto", display: "flex", flexDirection: "column", gap: 2, minHeight: 0 }}>
+        {pinned.length > 0 && (
+          <div style={{ marginBottom: 8 }}>
+            <div style={{ display: "flex", alignItems: "center", gap: 7, height: 24, padding: "0 4px" }}>
+              <Star size={12} fill={COLORS.stWait} color={COLORS.stWait} />
+              <span style={{ fontFamily: FONT.ui, fontSize: 11, fontWeight: 700, letterSpacing: 0.5, color: COLORS.textSecondary }}>FAVORITES</span>
+            </div>
+            {section("fav", pinned)}
+          </div>
+        )}
         {groups.sort((a, b) => a.order - b.order).map((g) => {
           const open = !collapsed[g.id];
+          const items = byGroup(g.id);
           return (
             <div key={g.id} style={{ marginBottom: 8 }}>
               <div onClick={() => setCollapsed((c) => ({ ...c, [g.id]: open }))}
@@ -85,11 +182,11 @@ export function Sidebar({
                 <span style={{ width: 8, height: 8, borderRadius: 2, background: g.color }} />
                 <span style={{ fontFamily: FONT.ui, fontSize: 11, fontWeight: 700, letterSpacing: 0.5, color: COLORS.textSecondary }}>{g.name.toUpperCase()}</span>
               </div>
-              {open && byGroup(g.id).map(row)}
+              {open && section(`g:${g.id}`, items)}
             </div>
           );
         })}
-        {ungrouped.length > 0 && <div style={{ marginTop: 4, display: "flex", flexDirection: "column", gap: 2 }}>{ungrouped.map(row)}</div>}
+        {ungrouped.length > 0 && <div style={{ marginTop: 4, display: "flex", flexDirection: "column", gap: 2 }}>{section("ungrouped", ungrouped)}</div>}
       </div>
 
       <div title={health ? `spaceshd v${health.version} · pid ${health.pid}` : "daemon offline"}

app/src/layoutTypes.ts

@@ -34,6 +34,7 @@ export interface WorkspaceView {
   group_id: string | null;
   order: number;
   unread: boolean;
+  pinned: boolean;
   layout: LayoutNode | null;
   zoomed: string | null;
   surfaces: Record<string, SurfaceView>;

app/src/socketBridge.ts

@@ -149,13 +149,14 @@ export async function closeWorkspaceCmd(workspaceId: string): Promise<void> {
   await invoke("close_workspace", { workspaceId });
 }
 
-export async function setWorkspaceMeta(workspaceId: string, meta: { name?: string; groupId?: string | null; unread?: boolean; order?: number }): Promise<void> {
+export async function setWorkspaceMeta(workspaceId: string, meta: { name?: string; groupId?: string | null; unread?: boolean; order?: number; pinned?: boolean }): Promise<void> {
   await invoke("set_workspace_meta", {
     workspaceId,
     name: meta.name ?? null,
     groupId: meta.groupId === undefined ? null : meta.groupId,
     unread: meta.unread ?? null,
     order: meta.order ?? null,
+    pinned: meta.pinned ?? null,
   });
 }