@pennyfarthing/cyclist 9.3.0 → 10.0.0

package/src/public/styles/tailwind.css

@@ -265,6 +265,7 @@
   background: var(--bg-secondary, #252526);
   border-bottom: 1px solid var(--border-color, #3c3c3c);
   flex-shrink: 0;
+  position: relative;
 }
 
 .persona-header.empty {
@@ -293,8 +294,8 @@
 }
 
 .persona-portrait {
-  width: 40px;
-  height: 40px;
+  width: 100px;
+  height: 100px;
   border-radius: 50%;
   overflow: hidden;
   flex-shrink: 0;
@@ -302,6 +303,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  transition: width 0.2s ease, height 0.2s ease;
 }
 
 .persona-portrait .portrait-image {
@@ -314,12 +316,8 @@
   font-size: 1.5rem;
 }
 
-/* Role badge positioned at bottom of portrait */
-.persona-portrait-group .persona-role.badge {
-  position: absolute;
-  bottom: -4px;
-  left: 50%;
-  transform: translateX(-50%);
+/* Role badge inline in name row */
+.persona-name-row .persona-role.badge {
   padding: 1px 6px;
   color: #fff;
   font-size: 0.6rem;
@@ -328,6 +326,7 @@
   font-weight: 600;
   white-space: nowrap;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+  flex-shrink: 0;
 }
 
 .persona-info {
@@ -338,9 +337,59 @@
   flex: 1;
 }
 
+.persona-branding {
+  height: 80px;
+  width: auto;
+  flex-shrink: 0;
+  opacity: 0.5;
+  pointer-events: none;
+  transition: height 0.2s ease;
+}
+
+/* Compact mode: collapsed header */
+.persona-header.compact .persona-portrait {
+  width: 40px;
+  height: 40px;
+}
+
+.persona-header.compact .persona-portrait .portrait-fallback {
+  font-size: 1.2rem;
+}
+
+.persona-header.compact .persona-branding {
+  height: 32px;
+}
+
+.persona-header.compact .persona-catchphrase {
+  display: none;
+}
+
+/* Collapse toggle button */
+.persona-collapse-toggle {
+  position: absolute;
+  bottom: 2px;
+  right: 8px;
+  background: none;
+  border: none;
+  color: var(--text-secondary, #8b8b8b);
+  font-size: 0.6rem;
+  cursor: pointer;
+  padding: 0 4px;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+
+.persona-header:hover .persona-collapse-toggle {
+  opacity: 1;
+}
+
+.persona-collapse-toggle:hover {
+  color: var(--text-primary, #d4d4d4);
+}
+
 .persona-name-row {
   display: flex;
-  align-items: baseline;
+  align-items: center;
   gap: 8px;
   flex-wrap: wrap;
 }
@@ -403,16 +452,15 @@
   overflow-x: hidden;
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
-  padding: 1rem;
+  gap: 0;
+  padding: 1rem 1.5rem;
 }
 
-/* Individual message bubbles */
+/* Individual messages — Tufte: no bubbles, no backgrounds */
 .message {
   display: flex;
   gap: 0.75rem;
-  padding: 0.75rem 1rem;
-  border-radius: 8px;
+  padding: 0.25rem 0;
   line-height: 1.5;
 }
 
@@ -464,17 +512,70 @@
   border-radius: 3px;
 }
 
+.message-content .table-wrapper {
+  margin: 0.5rem 0;
+  overflow-x: auto;
+  border-radius: 4px;
+  border: 1px solid var(--border-primary, #333);
+}
+
+.message-content table {
+  border-collapse: collapse;
+  width: 100%;
+  font-size: 0.85em;
+}
+
+.message-content thead th {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  color: var(--text-secondary, #8b8b8b);
+  padding: 0.4rem 0.75rem;
+  text-align: left;
+  background: var(--bg-primary, #1e1e1e);
+  border-bottom: 1px solid var(--border-primary, #333);
+  white-space: nowrap;
+}
+
+.message-content tbody td {
+  padding: 0.35rem 0.75rem;
+  color: var(--text-primary, #d4d4d4);
+  border-bottom: 1px solid var(--border-primary, #333);
+}
+
+.message-content tbody tr:last-child td {
+  border-bottom: none;
+}
+
+.message-content tbody tr:hover {
+  background: var(--bg-secondary, #252526);
+}
+
+.message-content th.sortable-th {
+  cursor: pointer;
+  user-select: none;
+}
+
+.message-content th.sortable-th:hover {
+  color: var(--text-primary, #d4d4d4);
+}
+
+.message-content .sort-indicator {
+  font-size: 0.65em;
+  opacity: 0.7;
+}
+
+/* User messages — blockquote left border */
 .message-user {
-  background: var(--accent-color, #007acc);
-  color: #fff;
-  margin-left: auto;
-  max-width: 85%;
-  border-bottom-right-radius: 4px;
+  border-left: 2px solid var(--text-secondary, #8b8b8b);
+  padding-left: 0.75rem;
+  color: var(--text-primary, #d4d4d4);
 }
 
 .message-user .message-content pre,
 .message-user .message-content :not(pre) > code {
-  background: rgba(0, 0, 0, 0.2);
+  background: var(--bg-tertiary, #2d2d2d);
 }
 
 .message-attachment-indicator {
@@ -489,20 +590,108 @@
   opacity: 0.8;
 }
 
+/* Agent messages — no background, no constraints */
 .message-agent {
-  background: var(--bg-tertiary, #2d2d2d);
   color: var(--text-primary, #d4d4d4);
-  max-width: 95%;
-  border-bottom-left-radius: 4px;
+}
+
+/* Turn-based grouping — Tufte spacing */
+.turn-group {
+  padding-top: 1rem;
+}
+
+.turn-group:first-child {
+  padding-top: 0;
+}
+
+.turn-group + .turn-group {
+  border-top: 1px solid var(--border-color, #3c3c3c);
+}
+
+/* Turn label — speaker + timestamp + optional role badge */
+.turn-label {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  padding: 0.25rem 0;
+  margin-bottom: 0.25rem;
+}
+
+.turn-speaker {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--text-secondary, #8b8b8b);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.turn-timestamp {
+  font-size: 0.6875rem;
+  color: var(--text-muted, #666);
+  margin-left: auto;
+}
+
+/* Role badge in turn label — flush right under timestamp */
+.turn-role-badge {
+  font-size: 0.5625rem;
+  padding: 0px 5px;
+  color: #fff;
+  border-radius: 3px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  line-height: 1.4;
+}
+
+/* Context cleared divider bar */
+.context-cleared-bar {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.5rem 0;
+}
+
+.context-cleared-line {
+  flex: 1;
+  background-color: var(--text-muted, #666);
+  opacity: 0.4;
+}
+
+.context-cleared-label {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: var(--text-muted, #666);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  white-space: nowrap;
+}
+
+.context-cleared-time {
+  font-size: 0.625rem;
+  color: var(--text-muted, #666);
+  opacity: 0.7;
+  white-space: nowrap;
+}
+
+/* User turn: left-aligned like agent turns */
+
+/* Hide avatar on continuation messages (same speaker, not first in turn) */
+.message.continuation .message-avatar {
+  visibility: hidden;
+}
+
+/* Same-turn messages: tight spacing */
+.message.continuation {
+  padding-top: 0;
 }
 
 /* Hook/System message styling (AC3: Story 75-5) */
 .message-hook,
 .message-system {
-  background: var(--bg-secondary, #252526);
-  border: 1px dashed var(--border-color, #3c3c3c);
+  background: none;
+  border-left: 2px dashed var(--border-color, #3c3c3c);
+  padding-left: 0.75rem;
   color: var(--text-secondary, #8b8b8b);
-  max-width: 100%;
   font-size: 0.85rem;
 }
 
@@ -519,12 +708,11 @@
 
 .message-tool_use,
 .message-tool_result {
-  background: var(--bg-secondary, #252526);
-  border: 1px solid var(--border-color, #3c3c3c);
+  background: none;
+  border: none;
   color: var(--text-secondary, #8b8b8b);
   font-family: var(--font-mono, 'SF Mono', Monaco, monospace);
   font-size: var(--font-size-code, 0.85rem);
-  max-width: 100%;
 }
 
 .tool-name {
@@ -570,67 +758,99 @@
 }
 
 /* =============================================================================
-   Subagent Span Styles
+   Subagent Span Styles — Tufte: indented left-border, no box
    ============================================================================= */
 
 .subagent-span {
   margin: 0.5rem 0;
-  border: 1px solid var(--border-color, #3c3c3c);
-  border-radius: 6px;
-  background: var(--bg-secondary, #252526);
+  margin-left: 2.75rem; /* align with message content */
+  border: none;
+  border-left: 2px solid var(--accent-color, #007acc);
+  border-radius: 0;
+  background: none;
+  padding-left: 0.5rem;
 }
 
 .subagent-header {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.5rem 0.75rem;
+  padding: 0.25rem 0;
   cursor: pointer;
-  background: var(--bg-tertiary, #2d2d2d);
-  border-radius: 5px 5px 0 0;
+  background: none;
+  border-radius: 0;
   font-size: 0.8rem;
+  transition: background-color 0.15s ease;
 }
 
-.subagent-span.collapsed .subagent-header {
-  border-radius: 5px;
+.subagent-header:hover {
+  background-color: var(--bg-secondary, #252526);
 }
 
 .subagent-toggle {
   color: var(--text-secondary, #8b8b8b);
-  font-size: 0.7rem;
+  font-size: 0.625rem;
+  width: 0.875rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.subagent-type {
-  color: var(--accent-color, #007acc);
+.subagent-helper-name {
   font-weight: 600;
-  text-transform: capitalize;
+  color: var(--text-primary, #d4d4d4);
 }
 
-.subagent-name {
-  color: var(--text-primary, #d4d4d4);
+.subagent-friendly-message {
+  color: var(--text-secondary, #8b8b8b);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  min-width: 0;
+}
+
+.subagent-type-badge {
+  font-size: 0.625rem;
+  padding: 0 4px;
+  flex-shrink: 0;
 }
 
 .subagent-count {
-  color: var(--text-secondary, #8b8b8b);
-  font-size: 0.75rem;
+  color: var(--text-muted, #666);
+  font-size: 0.6875rem;
+  font-family: var(--font-mono, monospace);
   margin-left: auto;
+  flex-shrink: 0;
 }
 
 .subagent-content {
-  padding: 0.5rem;
+  padding: 0.25rem 0;
 }
 
-/* Subagent prompt - the task/instruction given to subagent */
+/* Subagent prompt — truncated single line, no avatar */
 .message-subagent-prompt {
-  background: var(--bg-tertiary, #2d2d2d);
-  border-left: 3px solid var(--accent-color, #007acc);
-  color: var(--text-secondary, #8b8b8b);
-  font-size: 0.85rem;
-  max-width: 100%;
+  background: none;
+  border-left: none;
+  color: var(--text-muted, #666);
+  font-size: 0.75rem;
+  padding: 0.125rem 0;
 }
 
 .message-subagent-prompt .message-content {
   font-style: italic;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Tool calls inside subagent: no extra indent (already indented by parent) */
+.subagent-content .tool-call-block {
+  margin-left: 0;
+}
+
+.subagent-content .message {
+  padding: 0.125rem 0;
 }
 
 /* =============================================================================
@@ -1857,6 +2077,125 @@
   font-size: 0.65rem;
 }
 
+.workflow-content .phase-icon {
+  flex-shrink: 0;
+  width: 14px;
+  text-align: center;
+}
+
+.workflow-content .phase-label {
+  white-space: nowrap;
+}
+
+/* Stepped workflow progress (Step N of M) */
+.stepped-progress {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  font-size: 0.75rem;
+}
+
+.stepped-counter {
+  color: var(--accent-color, #007acc);
+  font-weight: 600;
+}
+
+.stepped-current-label {
+  color: var(--text-secondary, #8b8b8b);
+  font-style: italic;
+}
+
+/* Available workflows list (MSSCI-14301) */
+.available-workflows {
+  padding: 4px 0;
+}
+
+.available-workflows-header {
+  padding: 4px 8px;
+  border-bottom: 1px solid var(--border-color, #3c3c3c);
+}
+
+.available-workflows-title {
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: var(--text-secondary, #8b8b8b);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.available-workflows-list {
+  overflow-y: auto;
+}
+
+.workflow-entry {
+  padding: 6px 8px;
+  border-bottom: 1px solid var(--border-color, #3c3c3c);
+}
+
+.workflow-entry:last-child {
+  border-bottom: none;
+}
+
+.workflow-entry-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+}
+
+.workflow-entry-name {
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: var(--text-primary, #d4d4d4);
+}
+
+.workflow-entry-type-badge {
+  font-size: 0.6rem;
+  padding: 0 4px;
+  flex-shrink: 0;
+}
+
+.workflow-entry-description {
+  font-size: 0.7rem;
+  color: var(--text-secondary, #8b8b8b);
+  margin-top: 2px;
+  line-height: 1.3;
+}
+
+.workflow-entry-hint {
+  font-size: 0.65rem;
+  color: var(--accent-color, #007acc);
+  font-family: var(--font-mono, monospace);
+  margin-top: 4px;
+  opacity: 0.8;
+}
+
+.workflow-entry-footer {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 4px;
+}
+
+.workflow-start-button {
+  font-size: 0.65rem;
+  height: 22px;
+  padding: 0 8px;
+  color: var(--accent-color, #007acc);
+}
+
+/* Workflow panel container */
+.workflow-panel {
+  height: 100%;
+  overflow-y: auto;
+  padding: 4px 8px;
+}
+
+.workflow-panel .error-message {
+  color: var(--color-danger, #ef4444);
+  font-size: 0.75rem;
+  padding: 8px 0;
+}
+
 /* AC content within Progress panel */
 .ac-content {
   padding: 4px 0;
@@ -2577,6 +2916,29 @@
   font-style: italic;
 }
 
+/* Full file tree enhancements */
+.full-filetree .filetree-scroll {
+  flex: 1;
+  min-height: 0;
+}
+
+.full-filetree .tree-loading {
+  color: var(--text-secondary, #8b8b8b);
+  font-size: 0.75rem;
+  font-style: italic;
+  padding: 4px 8px;
+}
+
+.full-filetree .tree-error {
+  color: var(--color-danger, #ef4444);
+  font-size: 0.75rem;
+  padding: 4px 8px;
+}
+
+.full-filetree .directory-header.has-changes .directory-name {
+  color: var(--color-warning, #f59e0b);
+}
+
 /* Directory sections */
 .directory-section {
   border-bottom: 1px solid var(--border-color, #3c3c3c);
@@ -3027,11 +3389,8 @@
    ============================================================================= */
 
 .message-bell-injected {
-  background: linear-gradient(
-    90deg,
-    rgba(255, 193, 7, 0.1) 0%,
-    transparent 20%
-  );
+  border-left: 2px solid var(--warning-color, #cca700);
+  padding-left: 0.75rem;
 }
 
 .message-bell-injected .bell-indicator {

package/src/public/types/message.ts

@@ -14,7 +14,8 @@ export type MessageType =
   | 'agent'
   | 'tool_use'
   | 'tool_result'
-  | 'bell_injected';
+  | 'bell_injected'
+  | 'context_cleared';
 
 /**
  * Core message data structure used throughout Cyclist.
@@ -36,6 +37,10 @@ export interface MessageData {
   durationMs?: number;
   /** Number of images attached to user message */
   imageCount?: number;
+  /** Agent identity captured at message creation time */
+  agentSlug?: string;
+  agentTheme?: string;
+  agentCharacter?: string;
 }
 
 /**

package/src/public/utils/markdown.ts

@@ -97,8 +97,8 @@ function convertTableLinesToHtml(lines: string[]): string {
   if (headerLine) {
     const headerCells = parseCells(headerLine);
     html += '<thead><tr>';
-    for (const cell of headerCells) {
-      html += `<th>${cell}</th>`;
+    for (let i = 0; i < headerCells.length; i++) {
+      html += `<th data-col="${i}" class="sortable-th">${headerCells[i]} <span class="sort-indicator"></span></th>`;
     }
     html += '</tr></thead>';
   }

package/src/public/utils/slash-commands.ts

@@ -186,7 +186,7 @@ export const SLASH_COMMANDS: SlashCommand[] = [
   },
   {
     "name": "/release",
-    "description": "Merge develop to main and push (optional version bump)"
+    "description": "Interactive stepped release with verification gates"
   },
   {
     "name": "/repo-status",

package/src/public/utils/toolStackGrouper.ts

@@ -38,8 +38,8 @@ interface Message {
  * Rules:
  * - tool_result messages do NOT break the stack (they're paired with tool_use elsewhere)
  * - assistant/user messages DO break the stack
- * - Single tool_use messages are NOT grouped (returns empty array for that sequence)
- * - Returns array of ToolStackData, each representing 2+ consecutive tools
+ * - Single tool_use messages ARE grouped (consistent rendering with multi-tool stacks)
+ * - Returns array of ToolStackData, each representing 1+ consecutive tools
  *
  * @param messages - Array of messages to process
  * @returns Array of tool stacks (only stacks with 2+ tools)
@@ -75,8 +75,8 @@ export function groupToolsIntoStacks(messages: Message[]): ToolStackData[] {
       continue;
     } else {
       // assistant, user, or other message types break the stack
-      // Only create stack if 2+ tools (single tools in middle render normally)
-      if (currentTools.length >= 2) {
+      // Create stack for any tools (single tools also get stacked for consistent rendering)
+      if (currentTools.length >= 1) {
         const lastTool = currentTools[currentTools.length - 1];
         stacks.push({
           stackId: generateStableStackId(currentTools),
@@ -91,8 +91,7 @@ export function groupToolsIntoStacks(messages: Message[]): ToolStackData[] {
   }
 
   // Handle remaining tools at end of messages
-  // Same threshold as mid-stream: only stack 2+ tools (single tools render normally)
-  if (currentTools.length >= 2) {
+  if (currentTools.length >= 1) {
     const lastTool = currentTools[currentTools.length - 1];
     stacks.push({
       stackId: generateStableStackId(currentTools),