@pennyfarthing/cyclist 10.0.2 → 10.1.0

package/src/public/styles/tailwind.css

@@ -616,6 +616,7 @@
   gap: 0.5rem;
   padding: 0.25rem 0;
   margin-bottom: 0.25rem;
+  padding-left: 2.75rem; /* align with message content: avatar 2rem + gap 0.75rem */
 }
 
 .turn-speaker {
@@ -958,7 +959,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 100%;
+  flex: 1;
   color: var(--text-secondary, #8b8b8b);
   font-size: 0.875rem;
   text-align: center;
@@ -1510,15 +1511,69 @@
   background: var(--bg-hover, rgba(255, 255, 255, 0.03));
 }
 
-.enhanced-sprint-panel .story-item .story-title {
+.enhanced-sprint-panel .story-item .story-info {
   flex: 1;
   min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.enhanced-sprint-panel .story-item .story-title {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   font-size: 0.75rem;
 }
 
+.enhanced-sprint-panel .story-item .story-meta {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.enhanced-sprint-panel .story-item .story-assignee {
+  font-size: 0.625rem;
+  color: var(--text-tertiary, #6b6b6b);
+  font-style: italic;
+}
+
+.enhanced-sprint-panel .story-item .story-workflow-badge {
+  font-size: 0.5625rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-secondary, #8b8b8b);
+  background: var(--bg-tertiary, #2d2d2d);
+  padding: 0 4px;
+  border-radius: 2px;
+}
+
+.enhanced-sprint-panel .story-item .story-completed-date {
+  font-size: 0.625rem;
+  font-variant-numeric: tabular-nums;
+  font-family: var(--font-mono, monospace);
+  color: var(--text-tertiary, #6b6b6b);
+}
+
+.enhanced-sprint-panel .story-item .priority-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.enhanced-sprint-panel .story-item .priority-dot.priority-p0 {
+  background: var(--error-color, #f14c4c);
+}
+
+.enhanced-sprint-panel .story-item .priority-dot.priority-p1 {
+  background: var(--warning-color, #cca700);
+}
+
+.enhanced-sprint-panel .story-item .priority-dot.priority-p2 {
+  background: var(--text-tertiary, #6b6b6b);
+}
+
 .enhanced-sprint-panel .story-item .story-points {
   font-size: 0.65rem;
   color: var(--text-secondary, #8b8b8b);
@@ -1791,42 +1846,25 @@
   margin-bottom: 4px;
 }
 
-/* Develop behind warning */
-.git-panel .develop-behind-warning {
-  display: flex;
+/* Sync develop button — subtle icon inline with sync counts */
+.git-panel .sync-develop-btn {
+  display: inline-flex;
   align-items: center;
-  gap: 6px;
-  padding: 6px 8px;
-  margin-bottom: 8px;
-  background: rgba(204, 167, 0, 0.15);
-  border: 1px solid var(--warning-color, #cca700);
-  border-radius: 4px;
-  font-size: 0.75rem;
-}
-
-.git-panel .develop-behind-warning .warning-icon {
-  flex-shrink: 0;
-}
-
-.git-panel .develop-behind-warning .warning-text {
-  flex: 1;
-  color: var(--warning-color, #cca700);
-}
-
-.git-panel .develop-behind-warning .pull-develop-btn {
-  padding: 2px 8px;
-  background: var(--warning-color, #cca700);
-  color: #000;
+  gap: 3px;
+  padding: 1px 5px;
   border: none;
   border-radius: 3px;
+  background: none;
+  color: var(--status-warning, #cca700);
   font-size: 0.7rem;
-  font-weight: 600;
+  font-family: var(--font-mono);
   cursor: pointer;
-  text-transform: uppercase;
+  transition: background-color 0.15s ease, color 0.15s ease;
 }
 
-.git-panel .develop-behind-warning .pull-develop-btn:hover {
-  opacity: 0.9;
+.git-panel .sync-develop-btn:hover {
+  background: rgba(204, 167, 0, 0.15);
+  color: var(--text-primary);
 }
 
 .git-panel .repo-status .file-status {
@@ -2196,38 +2234,6 @@
   padding: 8px 0;
 }
 
-/* AC content within Progress panel */
-.ac-content {
-  padding: 4px 0;
-}
-
-.ac-content .ac-list {
-  margin-top: 8px;
-}
-
-.ac-content .ac-item {
-  display: flex;
-  align-items: flex-start;
-  gap: 6px;
-  padding: 4px 0;
-  font-size: 0.8rem;
-  color: var(--text-primary, #d4d4d4);
-}
-
-.ac-content .ac-item.ac-done {
-  color: var(--success-color, #4ec9b0);
-}
-
-.ac-content .ac-icon {
-  flex-shrink: 0;
-  width: 14px;
-}
-
-.ac-content .ac-text {
-  flex: 1;
-  line-height: 1.3;
-}
-
 /* Todo content wrapper */
 .todo-content {
   padding: 4px 0;
@@ -2626,6 +2632,14 @@
   font-family: var(--font-mono, 'SF Mono', Monaco, monospace);
 }
 
+/* Tool launcher - MSSCI-14443 */
+.debug-panel .tool-launcher {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 4px;
+}
+
 /* Settings panel */
 .settings-panel {
   padding: 8px;
@@ -4017,15 +4031,13 @@
   border-color: var(--text-secondary, #8b8b8b);
 }
 
-.btn-toggle .toggle-icon {
-  font-size: 1rem;
-  line-height: 1;
-  filter: grayscale(100%) opacity(0.5);
-  transition: filter 0.15s ease;
+.btn-toggle svg {
+  opacity: 0.5;
+  transition: opacity 0.15s ease;
 }
 
-.btn-toggle:hover .toggle-icon {
-  filter: grayscale(50%) opacity(0.8);
+.btn-toggle:hover svg {
+  opacity: 0.8;
 }
 
 /* Bell mode active */
@@ -4034,8 +4046,8 @@
   border-color: var(--color-warning, #f59e0b);
 }
 
-.btn-toggle.bell-toggle.active .toggle-icon {
-  filter: none;
+.btn-toggle.bell-toggle.active svg {
+  opacity: 1;
 }
 
 /* Relay mode active */
@@ -4044,8 +4056,8 @@
   border-color: var(--color-purple, #8b5cf6);
 }
 
-.btn-toggle.relay-toggle.active .toggle-icon {
-  filter: none;
+.btn-toggle.relay-toggle.active svg {
+  opacity: 1;
 }
 
 /* Active toggle colors (no animation - too distracting) */
@@ -4063,8 +4075,8 @@
   border-color: var(--color-cyan, #06b6d4);
 }
 
-.btn-toggle.pump-toggle .toggle-icon {
-  filter: none;
+.btn-toggle.pump-toggle svg {
+  opacity: 1;
 }
 
 /* TirePump warning state at 70%+ context */
@@ -4074,8 +4086,8 @@
   animation: pump-pulse 1.5s ease-in-out infinite;
 }
 
-.btn-toggle.pump-toggle.warning .toggle-icon {
-  filter: none;
+.btn-toggle.pump-toggle.warning svg {
+  opacity: 1;
 }
 
 @keyframes pump-pulse {

package/src/public/utils/messageFilters.ts

@@ -3,8 +3,10 @@
  *
  * Story MSSCI-12783 - Bug: Skill Content Displayed as User Message
  *
- * Functions to detect and filter skill/command content from user messages.
+ * Functions to detect and filter skill content from user messages.
  * Skill content is meant for Claude's context, not for display in the UI.
+ * Detected skill invocations are replaced with a short label (e.g. "reviewer")
+ * so the user sees what happened without the raw skill dump.
  */
 
 /**
@@ -18,6 +20,36 @@ const SKILL_CONTENT_MARKERS = [
   'Launching skill:',
 ] as const;
 
+/**
+ * Patterns that detect skill body content leaked as separate user messages.
+ * These are the raw skill markdown bodies that Claude Code sends as user messages
+ * after the initial <command-message> wrapper.
+ */
+const SKILL_BODY_PATTERNS = [
+  /^```bash\s*\npf agent start\b/,      // Agent activation bash block
+  /^pf agent start\b/,                   // Bare agent start command
+  /^<purpose>/,                           // Skill body XML tags
+  /^<when-to-use>/,
+  /^<execution>/,
+  /^<critical>\s*\n/,                     // Skill body starting with critical block
+] as const;
+
+/**
+ * Agent name to human-readable label mapping.
+ */
+const AGENT_LABELS: Record<string, string> = {
+  sm: 'Scrum Master',
+  tea: 'Test Engineer',
+  dev: 'Developer',
+  reviewer: 'Reviewer',
+  architect: 'Architect',
+  pm: 'Product Manager',
+  'tech-writer': 'Tech Writer',
+  'ux-designer': 'UX Designer',
+  devops: 'DevOps',
+  orchestrator: 'Orchestrator',
+};
+
 /**
  * Check if a message content string contains skill/command content
  * that should be filtered from user message display.
@@ -26,13 +58,54 @@ const SKILL_CONTENT_MARKERS = [
  * @returns true if the content contains skill markers and should be filtered
  */
 export function isSkillContent(content: string | null | undefined): boolean {
-  // Handle null/undefined/empty gracefully
   if (!content || typeof content !== 'string') {
     return false;
   }
 
-  // Check for any skill content marker
-  return SKILL_CONTENT_MARKERS.some(marker => content.includes(marker));
+  if (SKILL_CONTENT_MARKERS.some(marker => content.includes(marker))) {
+    return true;
+  }
+
+  const trimmed = content.trimStart();
+  return SKILL_BODY_PATTERNS.some(pattern => pattern.test(trimmed));
+}
+
+/**
+ * Extract the skill/agent name from skill content for labeling.
+ * Returns a human-readable label like "Scrum Master" or the raw skill name.
+ */
+export function extractSkillLabel(content: string | null | undefined): string | null {
+  if (!content || typeof content !== 'string') return null;
+
+  // Match <command-name>/foo</command-name>
+  const cmdMatch = content.match(/<command-name>\/?([^<]+)<\/command-name>/);
+  if (cmdMatch) {
+    const name = cmdMatch[1].trim();
+    return AGENT_LABELS[name] || name;
+  }
+
+  // Match <command-message>foo</command-message>
+  const msgMatch = content.match(/<command-message>([^<]+)<\/command-message>/);
+  if (msgMatch) {
+    const name = msgMatch[1].trim();
+    return AGENT_LABELS[name] || name;
+  }
+
+  // Match pf agent start "foo"
+  const agentMatch = content.match(/pf agent start\s+"([^"]+)"/);
+  if (agentMatch) {
+    const name = agentMatch[1].trim();
+    return AGENT_LABELS[name] || name;
+  }
+
+  // Match "Launching skill: foo"
+  const launchMatch = content.match(/Launching skill:\s*(\S+)/);
+  if (launchMatch) {
+    const name = launchMatch[1].trim();
+    return AGENT_LABELS[name] || name;
+  }
+
+  return null;
 }
 
 /**
@@ -46,11 +119,9 @@ export function filterSkillContentMessages<T extends { type: string; content?: s
   messages: T[]
 ): T[] {
   return messages.filter(msg => {
-    // Only filter user messages
     if (msg.type !== 'user') {
       return true;
     }
-    // Filter out skill content
     return !isSkillContent(msg.content);
   });
 }

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

@@ -88,10 +88,6 @@ export const SLASH_COMMANDS: SlashCommand[] = [
     "name": "/create-branches-from-story",
     "description": "Create feature branches in both repos from a story"
   },
-  {
-    "name": "/create-theme",
-    "description": "Create a new custom persona theme"
-  },
   {
     "name": "/dev",
     "description": "Developer - Feature implementation and coding"
@@ -128,10 +124,6 @@ export const SLASH_COMMANDS: SlashCommand[] = [
     "name": "/job-fair",
     "description": "Discover which characters in a theme excel at each role"
   },
-  {
-    "name": "/list-themes",
-    "description": "List all available persona themes"
-  },
   {
     "name": "/login",
     "description": "Authenticate with Anthropic"
@@ -208,18 +200,10 @@ export const SLASH_COMMANDS: SlashCommand[] = [
     "name": "/run-ci",
     "description": "Detect and run CI locally"
   },
-  {
-    "name": "/set-theme",
-    "description": "Set the active persona theme"
-  },
   {
     "name": "/setup",
     "description": "setup"
   },
-  {
-    "name": "/show-theme",
-    "description": "Show details of a theme including all agent personas"
-  },
   {
     "name": "/sm",
     "description": "Scrum Master - Story coordination and sprint management"
@@ -269,8 +253,8 @@ export const SLASH_COMMANDS: SlashCommand[] = [
     "description": "Configure terminal"
   },
   {
-    "name": "/theme-maker",
-    "description": "Interactive wizard for creating custom persona themes"
+    "name": "/theme",
+    "description": "Manage persona themes - list, show, set, create, or interactive wizard"
   },
   {
     "name": "/update-domain-docs",

package/src/public/utils/subagent-display.ts

@@ -18,6 +18,7 @@ export interface TaskInput {
 export interface Helper {
   name: string;
   style: string;
+  plural?: boolean;
 }
 
 // Cache for helper lookups
@@ -119,7 +120,8 @@ const SUBAGENT_TYPE_MESSAGES: Record<string, string> = {
   'Bash': 'Running commands',
 };
 
-export function generateFriendlyMessage(context: TaskInput): string {
+export function generateFriendlyMessage(context: TaskInput, options?: { plural?: boolean }): string {
+  const verb = options?.plural ? 'are' : 'is';
   // If we have a description, include it
   const description = context.description;
 
@@ -127,10 +129,11 @@ export function generateFriendlyMessage(context: TaskInput): string {
   const subagentType = context.subagent_type;
   if (subagentType && SUBAGENT_TYPE_MESSAGES[subagentType]) {
     const action = SUBAGENT_TYPE_MESSAGES[subagentType];
+    const lowerAction = action.charAt(0).toLowerCase() + action.slice(1);
     if (description) {
-      return `${action}: ${description}`;
+      return `${verb} ${lowerAction}: ${description}`;
     }
-    return action;
+    return `${verb} ${lowerAction}`;
   }
 
   // Fall back to description if available

package/LICENSE

@@ -1,14 +0,0 @@
-Copyright (c) 2026 1898 & Co.
-
-All rights reserved.
-
-This software and associated documentation files (the "Software") are proprietary
-and confidential. No part of this Software may be reproduced, distributed, or
-transmitted in any form or by any means, including photocopying, recording, or
-other electronic or mechanical methods, without the prior written permission of
-the copyright holder.
-
-Unauthorized copying, modification, distribution, or use of this Software, via
-any medium, is strictly prohibited.
-
-For licensing inquiries, contact: 1898 & Co.

package/src/public/components/AskUserQuestionBlock.tsx

@@ -1,162 +0,0 @@
-/**
- * AskUserQuestionBlock Component
- *
- * Renders interactive buttons for AskUserQuestion tool_use messages.
- * Uses the existing ClaudeContext to send responses back via WebSocket.
- *
- * Story: MSSCI-14395 - Render AskUserQuestion tool via Reflector QuickActions
- */
-
-import React, { useState, useCallback } from 'react';
-import { Button } from '@/components/ui/button';
-import { Badge } from '@/components/ui/badge';
-import { useClaudeContext } from '../contexts/ClaudeContext';
-
-interface QuestionOption {
-  label: string;
-  description: string;
-}
-
-interface Question {
-  question: string;
-  header: string;
-  options: QuestionOption[];
-  multiSelect: boolean;
-}
-
-interface AskUserQuestionToolUse {
-  type: 'tool_use';
-  tool_name: string;
-  tool_id: string;
-  input: {
-    questions: Question[];
-  };
-  timestamp: number;
-}
-
-interface AskUserQuestionBlockProps {
-  toolUse: AskUserQuestionToolUse;
-}
-
-function SingleSelectQuestion({ question, onSubmit, disabled }: {
-  question: Question;
-  onSubmit: (answer: string) => void;
-  disabled: boolean;
-}) {
-  return (
-    <div className="ask-question-group">
-      <Badge variant="secondary" className="ask-question-header">{question.header}</Badge>
-      <p className="ask-question-text">{question.question}</p>
-      <div className="ask-question-options">
-        {question.options.map((opt) => (
-          <Button
-            key={opt.label}
-            variant="secondary"
-            size="sm"
-            className="ask-question-option"
-            onClick={() => onSubmit(opt.label)}
-            disabled={disabled}
-          >
-            <span className="ask-option-label">{opt.label}</span>
-            <span className="ask-option-desc">{opt.description}</span>
-          </Button>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-function MultiSelectQuestion({ question, onSubmit, disabled }: {
-  question: Question;
-  onSubmit: (answers: string[]) => void;
-  disabled: boolean;
-}) {
-  const [selected, setSelected] = useState<Set<string>>(new Set());
-
-  const toggleOption = useCallback((label: string) => {
-    setSelected(prev => {
-      const next = new Set(prev);
-      if (next.has(label)) {
-        next.delete(label);
-      } else {
-        next.add(label);
-      }
-      return next;
-    });
-  }, []);
-
-  const handleSubmit = useCallback(() => {
-    onSubmit(Array.from(selected));
-  }, [selected, onSubmit]);
-
-  return (
-    <div className="ask-question-group">
-      <Badge variant="secondary" className="ask-question-header">{question.header}</Badge>
-      <p className="ask-question-text">{question.question}</p>
-      <div className="ask-question-options">
-        {question.options.map((opt) => (
-          <Button
-            key={opt.label}
-            variant="secondary"
-            size="sm"
-            className="ask-question-option"
-            onClick={() => toggleOption(opt.label)}
-            disabled={disabled}
-            aria-pressed={selected.has(opt.label)}
-          >
-            <span className="ask-option-label">{opt.label}</span>
-            <span className="ask-option-desc">{opt.description}</span>
-          </Button>
-        ))}
-      </div>
-      <Button
-        variant="default"
-        size="sm"
-        className="ask-question-submit"
-        onClick={handleSubmit}
-        disabled={disabled || selected.size === 0}
-        aria-label="Confirm"
-      >
-        Confirm
-      </Button>
-    </div>
-  );
-}
-
-export function AskUserQuestionBlock({ toolUse }: AskUserQuestionBlockProps): React.ReactElement {
-  const { send } = useClaudeContext();
-  const [isDisabled, setIsDisabled] = useState(false);
-  const questions = toolUse.input?.questions || [];
-
-  const handleSingleSelect = useCallback((answer: string) => {
-    setIsDisabled(true);
-    send(answer, []);
-  }, [send]);
-
-  const handleMultiSelect = useCallback((answers: string[]) => {
-    setIsDisabled(true);
-    send(answers.join(', '), []);
-  }, [send]);
-
-  return (
-    <div className="ask-user-question-block">
-      {questions.map((q, i) => (
-        q.multiSelect ? (
-          <MultiSelectQuestion
-            key={i}
-            question={q}
-            onSubmit={handleMultiSelect}
-            disabled={isDisabled}
-          />
-        ) : (
-          <SingleSelectQuestion
-            key={i}
-            question={q}
-            onSubmit={handleSingleSelect}
-            disabled={isDisabled}
-          />
-        )
-      ))}
-    </div>
-  );
-}

package/src/public/utils/askUserQuestion.ts

@@ -1,21 +0,0 @@
-/**
- * AskUserQuestion Utility
- *
- * Utility functions for detecting AskUserQuestion tool_use messages.
- *
- * Story: MSSCI-14395 - Render AskUserQuestion tool via Reflector QuickActions
- */
-
-interface ToolUseMessage {
-  type: string;
-  tool_name?: string;
-  tool_id?: string;
-  input?: Record<string, unknown>;
-}
-
-/**
- * Check if a tool_use message is an AskUserQuestion tool call.
- */
-export function isAskUserQuestion(toolUse: ToolUseMessage): boolean {
-  return toolUse.tool_name === 'AskUserQuestion';
-}