@pennyfarthing/cyclist 9.3.0 → 9.4.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,17 @@
   border-radius: 3px;
 }
 
+/* User messages — blockquote right border (avatar is on the right) */
 .message-user {
-  background: var(--accent-color, #007acc);
-  color: #fff;
-  margin-left: auto;
-  max-width: 85%;
-  border-bottom-right-radius: 4px;
+  border-right: 2px solid var(--text-secondary, #8b8b8b);
+  border-left: none;
+  padding-right: 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 +537,99 @@
   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;
+}
+
+/* User turn: avatar + label on the right */
+.turn-user .turn-label {
+  flex-direction: row-reverse;
+}
+
+.turn-user .turn-timestamp {
+  margin-left: 0;
+  margin-right: auto;
+}
+
+.turn-user .message {
+  flex-direction: row-reverse;
+}
+
+.turn-user .message-avatar {
+  margin-left: 0.75rem;
+  margin-right: 0;
+}
+
+.turn-user .message-content {
+  text-align: right;
+}
+
+/* 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 +646,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 +696,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;
 }
 
 /* =============================================================================
@@ -2577,6 +2735,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 +3208,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

@@ -36,6 +36,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/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),