@kabmo-labs/kabmo 0.3.1 → 0.4.0

package/src/client/components/mobile/mobile-session-sidebar/Header.tsx

@@ -4,11 +4,14 @@ import { BrandWordmark } from '@/client/components/common/brand-wordmark';
 export function MobileSessionHeader({ onClose }: { onClose: () => void }) {
   return (
     <div 
-      className="border-b border-ink/10 flex items-center justify-between px-3.5 flex-shrink-0 bg-canvas titlebar-drag-region select-none"
+      className="border-b border-ink/10 flex items-center justify-between px-3 flex-shrink-0 bg-canvas titlebar-drag-region select-none"
       style={{
         height: 'calc(3.5rem + env(safe-area-inset-top, 0px))',
-        paddingLeft: 'max(0.875rem, env(safe-area-inset-left, 0px), env(titlebar-area-x, 0px))',
-        paddingRight: 'max(0.875rem, env(safe-area-inset-right, 0px))',
+        // `px-3`, the toolbar's own inset: the wordmark above and the New
+        // Session button below share one left edge, which the header's old
+        // 14px did not.
+        paddingLeft: 'max(0.75rem, env(safe-area-inset-left, 0px), env(titlebar-area-x, 0px))',
+        paddingRight: 'max(0.75rem, env(safe-area-inset-right, 0px))',
         paddingTop: 'env(safe-area-inset-top, 0px)',
       }}
     >

package/src/client/components/mobile/mobile-session-sidebar/Item.tsx

@@ -1,5 +1,5 @@
 import { useRef, useState } from 'preact/hooks';
-import { ChevronDown, ChevronRight, ChevronUp, GitBranch, MessageSquare, MoreHorizontal, Plus } from 'lucide-preact';
+import { ChevronDown, ChevronRight, GitBranch, MessageSquare, MoreHorizontal, Plus } from 'lucide-preact';
 import { useSearchParams } from '@/client/lib/router/search-params';
 import { MobileSessionRow } from '@/client/components/mobile/mobile-session-sidebar/SessionRow';
 import { SubagentList } from '@/client/components/common/subagent-list';
@@ -17,6 +17,7 @@ import type { WorkspaceFolderData } from '@/shared/types';
 import type { BatchBinding } from '@/client/components/common/batch-selection/types';
 import { folderBatchState } from '@/client/components/common/batch-selection/folder-state';
 import { SelectionCheckbox } from '@/client/components/common/batch-selection/SelectionCheckbox';
+import { SessionRevealRow } from '@/client/components/mobile/mobile-session-sidebar/RevealRow';
 
 interface MobileSessionCategoryProps {
   folder: WorkspaceFolderData;
@@ -32,6 +33,8 @@ interface MobileSessionCategoryProps {
   batch?: BatchBinding;
   /** Start a session selection scoped to this workspace, from its `⋯` menu. */
   onStartSessionSelection?: (folderId: number) => void;
+  /** Drop a held prompt from its row's menu. */
+  onCancelWait?: (waitId: string) => void;
 }
 
 export function MobileSessionCategory({
@@ -46,6 +49,7 @@ export function MobileSessionCategory({
   onToast,
   batch,
   onStartSessionSelection,
+  onCancelWait,
 }: MobileSessionCategoryProps) {
   const { visibleCount, showMore, showLess, canShowLess } = useShowMore();
   const { refresh } = useSidebarData();
@@ -125,7 +129,7 @@ export function MobileSessionCategory({
     <div className="mb-4">
       <div
         onClick={batch ? undefined : onToggleExpand}
-        className="flex items-center justify-between pl-4 pr-3 py-2 cursor-pointer hover:bg-ink/5 rounded-lg select-none transition-colors"
+        className="flex items-center justify-between gap-2 py-2 cursor-pointer hover:bg-ink/5 rounded-lg select-none transition-colors"
       >
         <div className="flex items-center space-x-2 min-w-0">
           {folderCheckbox && folderSummary ? (
@@ -138,11 +142,11 @@ export function MobileSessionCategory({
             />
           ) : (
           <>
-          {/* The folder glyph occupies the same 16px left slot the session rows
-              give their roster toggle, so the two columns line up down the
-              drawer — the icon, the chevron and every row's status glyph share
-              one x. Desktop gets this from one shared slot; the drawer's
-              padding is what differs, hence the matching `pl-4`. */}
+          {/* The folder glyph occupies the same 16px slot the session rows give
+              their status/roster glyph, and the row carries NO leading inset of
+              its own: the drawer list's `p-3` is the gutter, so this glyph starts
+              at the same x as the New Session button above it (12px) and as the
+              search field's frame. One left edge down the whole drawer. */}
           <span className="w-4 h-4 flex items-center justify-center flex-shrink-0">
             {folder.customIconUrl ? (
               <img
@@ -227,14 +231,23 @@ export function MobileSessionCategory({
             )}
           </div>
 
-          {isExpanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
+          {/* The disclosure glyph's BOX ends on the list's content edge — the
+              same x the toolbar row's last control ends on above it — and its
+              ink sits 4px inside it (`pr-1`), which is the inset a session
+              row's `⋯` / roster chevron uses. So the drawer's right column is
+              one line of INK, not just one line of boxes: measured before, the
+              folder chevron's ink ran 6px further right than every row glyph
+              beneath it. */}
+          <span className="flex items-center justify-center pr-1">
+            {isExpanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
+          </span>
           </>
           )}
         </div>
       </div>
 
       {listOpen && (
-        <div className="mt-0.5 space-y-0.5 pl-2">
+        <div className="mt-0.5 space-y-0.5">
           {visibleSessions.map((session) => {
             const sessionKey = String(session.id);
             const isSessionActive = String(activeSessionId) === sessionKey;
@@ -272,6 +285,12 @@ export function MobileSessionCategory({
                   onRenameWithAi={
                     sessionKey.startsWith('new-') ? undefined : () => void handleRenameWithAi(session)
                   }
+                  waitingFor={session.waitingFor ? { title: session.waitingFor.title } : undefined}
+                  onCancelWait={
+                    session.waitingFor
+                      ? () => onCancelWait?.(session.waitingFor!.waitId)
+                      : undefined
+                  }
                   selectable={sessionCheckboxes}
                   selected={Boolean(batch?.selected.includes(sessionKey))}
                   onToggleSelect={batch ? () => batch.toggle(sessionKey) : undefined}
@@ -283,42 +302,13 @@ export function MobileSessionCategory({
             );
           })}
 
-          {/* Reveal / collapse controls, one row — parity with the desktop
-              category. Same window, so the phone cannot offer a different
-              boundary than the sidebar. */}
-          {(hiddenCount > 0 || canShowLess) && !sessionCheckboxes && (
-            <div className="flex items-center gap-1">
-              {hiddenCount > 0 && (
-                <button
-                  type="button"
-                  onClick={showMore}
-                  className="flex items-center min-w-0 text-left pl-2 pr-3 py-2 text-xs text-ink/60 hover:text-ink"
-                >
-                  {/* `pl-2` inside the `pl-2` list is what lands this chevron's
-                      centre on the folder header's icon column (16px + 8px), and
-                      the label then starts at 40px — the x a row's title occupies
-                      (16px slot + 8px gap). The `space-x-1.5` this replaced put
-                      both 4px left of the list they belong to. */}
-                  <span className="w-4 h-4 flex-shrink-0 flex items-center justify-center">
-                    <ChevronDown size={12} />
-                  </span>
-                  <span className="w-2 shrink-0" />
-                  <span className="truncate">Show more sessions ({hiddenCount})</span>
-                </button>
-              )}
+          <SessionRevealRow
+            hiddenCount={sessionCheckboxes ? 0 : hiddenCount}
+            canShowLess={!sessionCheckboxes && canShowLess}
+            onShowMore={showMore}
+            onShowLess={showLess}
+          />
 
-              {canShowLess && (
-                <button
-                  type="button"
-                  onClick={showLess}
-                  className="ml-auto shrink-0 flex items-center gap-1 text-xs text-ink/60 hover:text-ink px-3 py-2"
-                >
-                  <ChevronUp size={12} />
-                  <span className="truncate">Show less</span>
-                </button>
-              )}
-            </div>
-          )}
         </div>
       )}
 

package/src/client/components/mobile/mobile-session-sidebar/List.tsx

@@ -16,6 +16,8 @@ interface MobileSessionListProps {
   /** Present only while a batch selection is active. */
   batch?: BatchBinding;
   onStartSessionSelection?: (folderId: number) => void;
+  /** Drop a held prompt from its row's menu. */
+  onCancelWait?: (waitId: string) => void;
 }
 
 export function MobileSessionList({
@@ -30,12 +32,17 @@ export function MobileSessionList({
   onToast,
   batch,
   onStartSessionSelection,
+  onCancelWait,
 }: MobileSessionListProps) {
   // No fade wiring here: the app-wide scrollbar rule reveals this list's bar
   // from the document's own capture-phase listener (`lib/scrollbar-activity`),
   // so the list does not need a ref, a handler, or a re-render per scroll.
+  // `pl-3 pr-2`, not an even `p-3`: this container scrolls, so its scrollbar is
+  // taken out of the box and the same 12px on both sides LOOKS wider on the
+  // right. One step less on the right evens the optical margin back up, and it
+  // is why the rows below are aligned to 12 and not to 12 + the bar.
   return (
-    <div className="flex-1 scrollbar-overlay-container p-3">
+    <div className="flex-1 scrollbar-overlay-container pl-3 pr-2 py-3">
       {folders.length === 0 ? (
         <div className="text-center py-12 text-xs text-ink/50 italic">
           No matching sessions found
@@ -55,6 +62,7 @@ export function MobileSessionList({
             onToast={onToast}
             batch={batch}
             onStartSessionSelection={onStartSessionSelection}
+            onCancelWait={onCancelWait}
           />
         ))
       )}

package/src/client/components/mobile/mobile-session-sidebar/RevealRow.tsx

@@ -0,0 +1,60 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The drawer's reveal / collapse row, below a workspace's sessions.
+ *
+ * Split out of `Item.tsx` (which is the folder row AND its list) so that file
+ * stays under the repo's per-file ceiling. Parity with the desktop category is
+ * the whole point: the same window, so the phone cannot offer a different
+ * boundary than the sidebar.
+ *
+ * The chevron starts at the list's own gutter — the same x as a session row's
+ * status slot and the folder header's icon — because the list carries no
+ * `pl-2` of its own any more. The label then lands on the title column
+ * (16px slot + 8px gap).
+ */
+
+import { ChevronDown, ChevronUp } from 'lucide-preact';
+
+interface Props {
+  hiddenCount: number;
+  canShowLess: boolean;
+  onShowMore: () => void;
+  onShowLess: () => void;
+}
+
+export function SessionRevealRow({ hiddenCount, canShowLess, onShowMore, onShowLess }: Props) {
+  if (hiddenCount <= 0 && !canShowLess) return null;
+
+  return (
+    <div className="flex items-center gap-1">
+      {hiddenCount > 0 && (
+        <button
+          type="button"
+          onClick={onShowMore}
+          className="flex items-center min-w-0 text-left py-2 pr-3 text-xs text-ink/60 hover:text-ink"
+        >
+          <span className="w-4 h-4 flex-shrink-0 flex items-center justify-center">
+            <ChevronDown size={12} />
+          </span>
+          <span className="w-2 shrink-0" />
+          <span className="truncate">Show more sessions ({hiddenCount})</span>
+        </button>
+      )}
+
+      {canShowLess && (
+        <button
+          type="button"
+          onClick={onShowLess}
+          className="ml-auto shrink-0 flex items-center gap-1 text-xs text-ink/60 hover:text-ink pl-3 py-2"
+        >
+          <ChevronUp size={12} />
+          <span className="truncate">Show less</span>
+        </button>
+      )}
+    </div>
+  );
+}

package/src/client/components/mobile/mobile-session-sidebar/SessionRow.tsx

@@ -1,4 +1,4 @@
-import { Check, ChevronDown, ChevronRight, CircleQuestionMark, Loader2, MoreHorizontal } from 'lucide-preact';
+import { Check, ChevronDown, ChevronRight, CircleQuestionMark, Hourglass, Loader2, MoreHorizontal } from 'lucide-preact';
 import type { SessionItemData } from '@/shared/types';
 import { useInlineRename } from '@/client/hooks/ui/inline-rename';
 import { useSessionRenaming } from '@/client/hooks/workspace/renaming-sessions';
@@ -28,6 +28,11 @@ export interface MobileSessionRowProps {
   onRenameWithAi?: () => void;
   /** Draw a checkbox and let the row's tap toggle the selection instead of
    *  opening the session (batch mode). */
+  /** The row's prompt is held until another session finishes (see the desktop
+   *  row's `waitingFor`: a pending chat has nothing else to show). */
+  waitingFor?: { title: string | null };
+  /** Drop this row's held prompt, from the row's own menu. */
+  onCancelWait?: () => void;
   selectable?: boolean;
   selected?: boolean;
   onToggleSelect?: () => void;
@@ -47,6 +52,8 @@ export function MobileSessionRow({
   onDelete,
   onRename,
   onRenameWithAi,
+  waitingFor,
+  onCancelWait,
   selectable = false,
   selected = false,
   onToggleSelect,
@@ -65,7 +72,8 @@ export function MobileSessionRow({
   const renaming = useSessionRenaming(session.id);
   // One trigger for every row action; also reachable by long-press contextmenu.
   const menu = useRowMenu();
-  const hasActions = Boolean(onRename || onArchive || onDelete);
+  const hasActions = Boolean(onRename || onArchive || onDelete || onCancelWait);
+  const waiting = Boolean(waitingFor);
 
   // The roster toggle is the row's LAST element, so its glyph lands in the same
   // column as the folder header's expand chevron — one vertical line of
@@ -101,6 +109,15 @@ export function MobileSessionRow({
         data-testid="session-item"
         data-session-id={String(session.id)}
         onContextMenu={hasActions && !selectable ? menu.openAtCursor : undefined}
+        // The tint covers the WHOLE row — the `⋯` included. It is the row that
+        // is active, not the part of it left over after the triggers, and a
+        // block that stopped short of the trigger read as a half-painted
+        // selection.
+        //
+        // The gap between the trigger's ink and the block's rounded corner is
+        // `pr-1.5` INSIDE the trigger (see below), never padding on this row:
+        // a row inset would shrink the tint and pull every trailing glyph 6px
+        // left of the folder header's chevron.
         className={`w-full rounded-lg flex items-center transition-colors ${
           selectable && selected
             ? 'bg-ink/10 ring-1 ring-inset ring-ink/20 text-ink'
@@ -110,7 +127,7 @@ export function MobileSessionRow({
         <button
           type="button"
           onClick={selectable ? onToggleSelect : onSelect}
-          className="flex-1 text-left pl-2 pr-3 py-2 flex items-center justify-between min-w-0"
+          className="flex-1 text-left py-2 flex items-center justify-between min-w-0"
         >
           <div className="flex items-center min-w-0 pr-2">
             {/* Status slot, 16px at the same x as the folder header's icon slot,
@@ -135,6 +152,10 @@ export function MobileSessionRow({
                 </span>
               ) : awaitingInput ? (
                 <CircleQuestionMark size={13} className="text-ink/70 animate-pulse" />
+              ) : waiting ? (
+                <span role="status" aria-label={`Waiting for ${waitingFor?.title ?? 'another session'}`}>
+                  <Hourglass size={13} className="text-ink/60 animate-pulse" />
+                </span>
               ) : status === 'stream' ? (
                 <Loader2 size={13} className="text-ink/50 animate-spin" />
               ) : status ? (
@@ -142,7 +163,14 @@ export function MobileSessionRow({
               ) : null}
             </span>
             )}
-            <span className="text-xs truncate leading-snug ml-2">{title}</span>
+            <span className="flex flex-col min-w-0 ml-2 leading-snug">
+              <span className="text-xs truncate">{title}</span>
+              {waiting && (
+                <span className="text-[10px] text-ink/40 truncate">
+                  waiting for {waitingFor?.title ?? 'another session'}
+                </span>
+              )}
+            </span>
           </div>
 
           <span className="text-[11px] text-ink/45 font-mono flex-shrink-0 ml-2">{timeAgo ?? ''}</span>
@@ -151,10 +179,10 @@ export function MobileSessionRow({
         {/* One trigger for rename / archive / delete, always visible: a touch
             surface has no hover, and the always-on action buttons this replaced
             consumed a third of a phone's row width.
-            `mr-1` only when the row has NO roster toggle — it reserves that
-            column so the trailing glyph's centre stays 19px from the row's right
-            edge whether the last element is this trigger or the chevron. Without
-            it the glyphs step in and out from row to row. */}
+            `pl-1.5 pr-1`: the BOX still ends on the row's trailing edge (so its
+            right edge matches the folder header's chevron and the toolbar's
+            last control), while the glyph's ink sits 4px inside it — clear of
+            the tinted block's rounded corner without shrinking that block. */}
         {hasActions && !selectable && (
           <button
             type="button"
@@ -163,15 +191,14 @@ export function MobileSessionRow({
             aria-label="Session actions"
             aria-haspopup="menu"
             aria-expanded={menu.anchor !== null}
-            className={`flex-shrink-0 p-2 text-ink/35 hover:text-ink rounded-lg cursor-pointer ${showChevron ? '' : 'mr-1'}`}
+            className="flex-shrink-0 py-1.5 pl-1.5 pr-1 text-ink/35 hover:text-ink rounded-lg cursor-pointer"
           >
             <MoreHorizontal size={16} />
           </button>
         )}
 
-        {/* Last element, so its glyph sits in the folder header's chevron column.
-            `p-1.5 mr-1.5` centres a 14px glyph on that column while keeping a
-            touch-sized tap target. */}
+        {/* Last element, so its glyph shares the trigger's column — the same
+            inset pair and the same 4px ink margin. */}
         {showChevron && !selectable && (
           <button
             type="button"
@@ -179,7 +206,7 @@ export function MobileSessionRow({
             title={isExpanded ? 'Collapse subagents' : 'Expand subagents'}
             aria-expanded={isExpanded}
             aria-label={isExpanded ? 'Collapse subagents' : 'Expand subagents'}
-            className="flex-shrink-0 p-1.5 mr-1.5 flex items-center justify-center text-ink/50 hover:text-ink rounded-lg cursor-pointer"
+            className="flex-shrink-0 py-1.5 pl-1.5 pr-1 flex items-center justify-center text-ink/50 hover:text-ink rounded-lg cursor-pointer"
           >
             {isExpanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
           </button>
@@ -194,6 +221,7 @@ export function MobileSessionRow({
           onRenameWithAi={onRenameWithAi}
           onArchive={onArchive}
           onDelete={onDelete}
+          onCancelWait={onCancelWait}
           onClose={menu.close}
         />
       )}

package/src/client/components/mobile/mobile-session-sidebar/Skeleton.tsx

@@ -16,12 +16,12 @@ export function MobileSessionListSkeleton() {
     <div className="flex-1 p-3 space-y-4" aria-hidden="true">
       {PLACEHOLDER_FOLDERS.map((rows, folderIndex) => (
         <div key={folderIndex} className="space-y-2">
-          <div className="flex items-center gap-2 px-1 py-2">
+          <div className="flex items-center gap-2 py-2">
             <span className="w-4 h-4 rounded-sm animate-pulse bg-ink/10" />
             <span className="h-3 w-24 rounded animate-pulse bg-ink/10" />
           </div>
           {Array.from({ length: rows }, (_, rowIndex) => (
-            <div key={rowIndex} className="flex items-center gap-2 rounded px-2 py-2">
+            <div key={rowIndex} className="flex items-center gap-2 rounded py-2">
               <span className="w-4 h-4 rounded-full animate-pulse bg-ink/10" />
               <span
                 className="h-3 rounded animate-pulse bg-ink/10"

package/src/client/components/settings/categories/panel-plugins/InstalledList.tsx

@@ -6,7 +6,7 @@ import { PluginMark } from '@/client/components/settings/categories/panel-plugin
 import { PluginReadmeModal } from '@/client/components/settings/categories/panel-plugins/ReadmeModal';
 import { GitFreshness } from '@/client/components/settings/categories/panel-plugins/GitFreshness';
 import type { PluginSlots, SlotName } from '@/client/lib/plugins/slots';
-import { pluginPanelKey } from '@/shared/lib/workspace/panel-ids';
+import { pluginEnablementKey } from '@/shared/lib/workspace/panel-ids';
 
 /** The four slots a plugin may fill, in the order a card lists them. */
 const SLOT_ORDER: readonly SlotName[] = ['rightPanel', 'panel', 'headerPanel', 'settingsSection'];
@@ -74,7 +74,7 @@ export function InstalledList({
           // The ENABLEMENT key is the panel key, not the plugin id: it is the
           // id the client filters its panel catalog by, so a switch that wrote
           // the bare id would report success while the panel stayed hidden.
-          const panelKey = pluginPanelKey(plugin.pluginId);
+          const panelKey = pluginEnablementKey(plugin.pluginId);
           const toggling = busy === `enable:${panelKey}` || busy === `disable:${panelKey}`;
           const contributed = entry ? SLOT_ORDER.filter((slot) => entry.components[slot]) : [];