[Feature] Unify session sidebar icons to right side, add Export/Delete, remove Archive

[Astro-Han]

What task are you trying to do?

Unify the session sidebar row icons (status indicators, pin icon, action menu) into a single right-side slot, unify the sidebar menu with the session header menu, and hide the Archive feature until a reverse operation is available.

What do you do today?

Currently the session sidebar has several problems:

1. Pin icon is invisible during running sessions — The pin icon occupies the same 14px leading slot as status indicators (spinner, permission dots, error dots, notification dots). When a session is running, the spinner replaces the pin icon, making it impossible to see or toggle pin state without waiting for the session to complete.

2. Icons are scattered across the row — Status indicators (spinner/dots) are on the left, the pin icon is also on the left (in the same slot), and the action menu (three dots) is on the right. This creates visual inconsistency and wastes the left slot which could be used for session-type icons in the future.

3. Action menu is incomplete — The sidebar's dot-grid menu only offers Pin/Rename/Archive, while the session header's menu offers Rename/Export/Archive/Delete. These two menus should be unified.

4. Archive feature lacks a reverse operation — Users can archive sessions but cannot unarchive them, leading to confusion.

What would a good result look like?

• All icons consolidated to the right side of each session row
• Default state shows the highest-priority status icon; hover reveals the action menu
• Sidebar menu unified with header menu: Pin/Unpin, Rename, Export session log, Delete
• Archive hidden from all UI surfaces (backend preserved for future restoration)
• Consistent behavior across Pawwork Sidebar and Workspace Sidebar

Which audience does this matter to most?

Both

Extra context

See design spec in the comment below.

[Astro-Han]

Design Spec

Problem Statement

The current session sidebar has several icon placement and visibility issues:

1. Pin icon is invisible during running sessions — The pin icon occupies the same 14px leading slot as status indicators (spinner, permission dots, error dots, notification dots). When a session is running, the spinner replaces the pin icon, making it impossible to see or toggle pin state without waiting for the session to complete.

2. Icons are scattered across the row — Status indicators (spinner/dots) are on the left, the pin icon is also on the left (in the same slot), and the action menu (three dots) is on the right. This creates visual inconsistency and wastes the left slot which could be used for session-type icons in the future.

3. Action menu is incomplete — The sidebar's dot-grid menu only offers Pin/Rename/Archive, while the session header's menu offers Rename/Export/Archive/Delete. These two menus should be unified.

4. Archive feature lacks a reverse operation — Users can archive sessions but cannot unarchive them, leading to confusion. The feature should be hidden until a full archive/unarchive workflow is implemented.

Goals

1. Move all icons (status, pin, actions) to the right side of the session row
2. Default state shows the highest-priority status icon; hover reveals the action menu
3. Unify the sidebar menu with the session header menu (add Export and Delete, remove Archive)
4. Hide Archive from all UI surfaces while preserving backend logic for future restoration
5. Apply changes consistently to both Pawwork Sidebar and Workspace Sidebar

Design Decisions

Icon Placement

Before:

[14px leading slot: spinner/dot/pin] [Session title (flex-1)] [w-5 action slot: dot-grid/archive]

After:

[Session title (flex-1)] [20px status/action slot: status icon OR dot-grid menu on hover]

The left 14px slot is removed entirely. The session title gains more horizontal space. All visual indicators and actions are consolidated into a single right-side slot.

Status Priority

Priority	State	Visual
1	Running	Spinner (14px)
2	Permission request	Yellow dot (7px, bg-surface-warning-strong)
3	Unseen error	Red dot (7px, bg-text-diff-delete-base)
4	Unseen notification	Blue dot (7px, bg-text-interactive-base)
5	Pinned (no active state)	Pin icon (14px, muted opacity)
—	Idle (no state, not pinned)	Empty

Hover Interaction

• Default: Show status icon (or pin if no status)
• Hover entire row: Status icon fades out (150ms), dot-grid menu button fades in
• Click dot-grid: Opens dropdown menu
• Menu stays open when mouse leaves the row (standard DropdownMenu behavior)

Unified Menu Content

Pawwork Sidebar menu: Pin / Unpin, Rename, Export session log (conditional), Delete (confirmation dialog)

Workspace Sidebar menu: Rename, Export session log (conditional), Delete (confirmation dialog)

Context menu (right-click) mirrors the dot-grid menu content exactly.

Archive Removal

Archive is hidden from: sidebar dot-grid menu, sidebar context menu, session header dropdown menu, Command Palette. The archiveSession function and backend API are preserved for future restoration.

Component Changes

sidebar-items.tsx

• Remove leadingSlot, hideDefaultArchiveAction, archiveSession props
• Replace actionSlot with menuSlot — render prop: (session: Session) => JSX.Element
• Add isPinned, onExportSession, onDeleteSession, exportAvailable optional props
• Move status indicator to right side with hover transition (absolute positioning)
• NewSessionItem intentionally unchanged

pawwork-sidebar.tsx

• Pass isPinned and menuSlot (Pin/Rename/Export/Delete)
• Remove archive from both dot-grid and context menus
• Use shared useSessionExport hook and SessionDeleteDialog component

sidebar-workspace.tsx

• Pass menuSlot (Rename/Export/Delete, no Pin)
• Add onRenameSession, onExportSession, onDeleteSession to WorkspaceSidebarContext

message-timeline.tsx

• Remove Archive from header dropdown menu
• Use shared useSessionExport hook and SessionDeleteDialog component

sidebar-project.tsx

• Remove archiveSession from sessionProps
• menuSlot is optional — Project Sidebar hover panel shows status icon only (no menu for now)

layout.tsx

• Remove session.archive Command Palette entry
• Remove archiveSession from ProjectSidebarContext.sessionProps
• Add workspace session callbacks to WorkspaceSidebarContext

Implementation Order

1. Extract shared components (no UI change): useSessionExport hook, SessionDeleteDialog component
2. Refactor SessionItem (backward-compatible): add new optional props, keep old props as @deprecated
3. Update consumers: pawwork-sidebar.tsx, sidebar-workspace.tsx, layout.tsx, sidebar-project.tsx
4. Clean up: remove deprecated props, verify no archive references in UI code

Testing Considerations

1. Status priority: running spinner > notification dots
2. Pin visibility: shown when idle, hidden when running
3. Hover transition: smooth 150ms fade
4. Menu content: 4 items in Pawwork, 3 in Workspace
5. Archive absence: not present in any menu or command palette
6. Delete confirmation: DialogDeleteSession opens from sidebar
7. Export availability: only when platform.exportSession and sidecar server are active

Full Spec Document

The complete design document is available at:
docs/superpowers/specs/2026-04-29-session-sidebar-icon-unification-design.md