@fonlan/dsh-task-kanban 0.1.0 → 0.2.0

package/src/client/board.css

@@ -1,4 +1,7 @@
-/* @fonlan/dsh-task-kanban board styles (kb- prefixed, plain CSS) */
+/* @fonlan/dsh-task-kanban board styles (kb- prefixed, plain CSS).
+   Surfaces use the DSH theme tokens (--dsw-alias-*) so they follow the
+   shell's selected light/dark appearance; the var() fallbacks cover shells
+   that do not define them. */
 .kb-board {
   height: 100%;
   display: flex;
@@ -6,8 +9,8 @@
   box-sizing: border-box;
   padding: 12px 16px;
   overflow: hidden;
-  color: var(--dsh-fg, #e6e6e6);
-  background: var(--dsh-bg, #141418);
+  color: var(--dsw-alias-label-primary, var(--dsh-fg, #e6e6e6));
+  background: var(--dsw-alias-bg-base, var(--dsh-bg, #141418));
   font: 14px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
 }
 .kb-empty {
@@ -18,14 +21,20 @@
 .kb-board-header {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   gap: 12px;
   padding-bottom: 10px;
   border-bottom: 1px solid rgba(128, 128, 128, 0.25);
   flex: 0 0 auto;
 }
-.kb-board-actions { display: flex; gap: 8px; align-items: center; flex: none; }
-.kb-board-actions .kb-btn { flex: none; }
+/* Left-aligned group: workspace selector + new-task button sit adjacent. */
+.kb-board-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  flex: 0 1 auto;
+}
+.kb-board-title .kb-btn { flex: none; }
 .kb-ws-select {
   max-width: 320px;
   min-width: 0;
@@ -81,7 +90,7 @@
   padding: 8px 10px;
   font-weight: 600;
   font-size: 13px;
-  color: var(--dsh-fg-soft, #b8b8c0);
+  color: var(--dsw-alias-label-secondary, var(--dsh-fg-soft, #b8b8c0));
   border-bottom: 1px solid rgba(128, 128, 128, 0.12);
   flex: 0 0 auto;
 }
@@ -121,6 +130,11 @@
 .kb-card-running .kb-card-badge { background: rgba(59, 130, 246, 0.3); }
 .kb-card-error .kb-card-badge { background: rgba(239, 68, 68, 0.3); }
 .kb-card-phase { opacity: 0.8; }
+.kb-card-skill {
+  background: rgba(139, 92, 246, 0.22);
+  border-radius: 4px;
+  padding: 1px 6px;
+}
 .kb-card-model { opacity: 0.55; }
 .kb-card-error-text { margin-top: 6px; font-size: 12px; color: #f87171; word-break: break-all; }
 .kb-card-worktree { margin-top: 4px; font-size: 11px; opacity: 0.5; word-break: break-all; }
@@ -129,9 +143,9 @@
   left: 50%;
   bottom: 24px;
   transform: translateX(-50%);
-  background: rgba(30, 30, 36, 0.95);
-  border: 1px solid rgba(128, 128, 128, 0.4);
-  color: #eee;
+  background: var(--dsw-alias-bg-layer-2);
+  border: 1px solid var(--dsw-alias-border-l2);
+  color: var(--dsw-alias-label-primary);
   padding: 8px 16px;
   border-radius: 8px;
   font-size: 13px;
@@ -152,11 +166,11 @@
   max-width: 90vw;
   max-height: 85vh;
   overflow-y: auto;
-  background: #1c1c22;
-  border: 1px solid rgba(128, 128, 128, 0.35);
+  background: var(--dsw-alias-bg-layer-1);
+  border: 1px solid var(--dsw-alias-border-l1);
   border-radius: 12px;
   padding: 18px;
-  color: #e6e6e6;
+  color: var(--dsw-alias-label-primary);
 }
 .kb-modal-wide { width: 640px; }
 /* Task-detail bottom panel: docks at the bottom of the board page, fills the
@@ -168,11 +182,11 @@
   display: flex;
   flex-direction: column;
   margin-top: 10px;
-  background: #1c1c22;
-  border: 1px solid rgba(128, 128, 128, 0.35);
+  background: var(--dsw-alias-bg-layer-2);
+  border: 1px solid var(--dsw-alias-border-l1);
   border-radius: 12px;
   overflow: hidden;
-  color: #e6e6e6;
+  color: var(--dsw-alias-label-primary);
 }
 .kb-detail-panel-head {
   display: flex;
@@ -210,6 +224,53 @@
 .kb-modal-title { font-size: 16px; font-weight: 700; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
 .kb-field { display: block; margin-bottom: 12px; }
 .kb-field > span { display: block; font-size: 12px; opacity: 0.75; margin-bottom: 4px; }
+.kb-field-hint {
+  display: block;
+  font-size: 11px;
+  opacity: 0.55;
+  margin-top: 4px;
+}
+.kb-field-hint-skill {
+  opacity: 0.9;
+  color: #a78bfa;
+}
+.kb-skill-menu-wrap { position: relative; }
+.kb-skill-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 20;
+  margin: 2px 0 0;
+  padding: 4px;
+  list-style: none;
+  max-height: 180px;
+  overflow-y: auto;
+  border-radius: 8px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  background: var(--dsw-alias-bg-overlay);
+  color: var(--dsw-alias-label-primary);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
+}
+.kb-skill-menu-item {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 6px 8px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 12px;
+  color: var(--dsw-alias-label-primary);
+}
+.kb-skill-menu-item-active { background: var(--dsw-alias-interactive-bg-hover); }
+.kb-skill-menu-name { font-weight: 600; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
+.kb-skill-menu-desc {
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 11px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 .kb-field-row { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
 .kb-input {
   width: 100%;
@@ -226,6 +287,14 @@
 .kb-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
 .kb-detail-section { margin-bottom: 12px; }
 .kb-detail-label { font-size: 12px; opacity: 0.65; margin-bottom: 4px; }
+.kb-detail-skill {
+  display: inline-block;
+  font-size: 11px;
+  background: rgba(139, 92, 246, 0.22);
+  border-radius: 4px;
+  padding: 1px 6px;
+  margin-bottom: 4px;
+}
 .kb-detail-text { white-space: pre-wrap; word-break: break-all; font-size: 13px; }
 .kb-detail-error .kb-detail-text { color: #f87171; }
 .kb-detail-status {
@@ -239,16 +308,46 @@
 .kb-status-error { background: rgba(239, 68, 68, 0.3) !important; color: #f87171; }
 .kb-status-merged { background: rgba(34, 197, 94, 0.3) !important; }
 .kb-plan-summary { font-size: 13px; margin-bottom: 10px; }
-.kb-plan-phases { margin: 0; padding-left: 20px; }
-.kb-plan-phase { margin-bottom: 10px; }
-.kb-plan-phase-current .kb-plan-phase-title { color: #60a5fa; }
-.kb-plan-phase-head { display: flex; gap: 8px; align-items: baseline; }
+/* Phase cards: each plan phase is a card with an ordered number (kept from the
+   parent <ol>) and three labeled sections (goal / sessions / conclusion) split
+   by section titles and thin divider lines. */
+.kb-plan-phases { margin: 0; padding-left: 24px; }
+.kb-plan-phase {
+  margin-bottom: 10px;
+  padding: 8px 10px;
+  background: rgba(128, 128, 128, 0.08);
+  border: 1px solid rgba(128, 128, 128, 0.2);
+  border-radius: 8px;
+}
+.kb-plan-phase-head {
+  display: flex;
+  gap: 8px;
+  align-items: baseline;
+  padding-bottom: 6px;
+  margin-bottom: 6px;
+  border-bottom: 1px solid rgba(128, 128, 128, 0.16);
+}
 .kb-plan-phase-title { font-weight: 600; font-size: 13px; }
 .kb-plan-phase-id { font-size: 11px; opacity: 0.5; }
-.kb-plan-phase-goal { font-size: 12px; opacity: 0.85; margin: 2px 0 6px; white-space: pre-wrap; }
+.kb-plan-phase-body { display: flex; flex-direction: column; }
+/* Section isolation: label on top, thin divider between adjacent sections. */
+.kb-plan-phase-section { display: flex; flex-direction: column; }
+.kb-plan-phase-section + .kb-plan-phase-section {
+  margin-top: 6px;
+  padding-top: 6px;
+  border-top: 1px solid rgba(128, 128, 128, 0.14);
+}
+.kb-plan-phase-section-title { font-size: 11px; opacity: 0.55; margin-bottom: 3px; }
+.kb-plan-phase-goal { font-size: 12px; opacity: 0.85; white-space: pre-wrap; word-break: break-all; }
+.kb-plan-phase-sessions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
+.kb-plan-phase-conclusion { font-size: 12px; opacity: 0.85; white-space: pre-wrap; word-break: break-all; }
+.kb-plan-phase-conclusion-item + .kb-plan-phase-conclusion-item { margin-top: 6px; }
+/* Running phase keeps the blue highlight; completed phases get success color. */
+.kb-plan-phase-current { border-color: rgba(59, 130, 246, 0.6); background: rgba(59, 130, 246, 0.08); }
+.kb-plan-phase-current .kb-plan-phase-title { color: #60a5fa; }
+.kb-plan-phase-completed { border-color: rgba(34, 197, 94, 0.45); background: rgba(34, 197, 94, 0.06); }
+.kb-plan-phase-completed .kb-plan-phase-title { color: #4ade80; }
 .kb-session-links { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
-.kb-session-attempt { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
-.kb-session-summary { font-size: 12px; opacity: 0.75; }
 .kb-settings { display: flex; flex-direction: column; gap: 12px; max-width: 420px; }
 .kb-settings-saved { font-size: 12px; color: #4ade80; }
 .kb-footer-action {
@@ -280,11 +379,10 @@
   font-size: 14px;
   line-height: 22px;
 }
-@media (prefers-color-scheme: light) {
-  .kb-board { color: #1c1c22; background: #f5f5f7; }
-  .kb-modal { background: #ffffff; color: #1c1c22; }
-  .kb-detail-panel { background: #ffffff; color: #1c1c22; }
-}
+/* Theme following is handled by the --dsw-alias-* tokens above: they change
+   value with the shell's selected light/dark appearance, so no OS-level
+   prefers-color-scheme override is needed (and one would fight the app
+   theme when the two disagree). */
 /* Same-line placement WITHOUT moving any DOM: the sidebar foot area becomes
    a reversed flex row, so its LAST child (the settings area) renders on the
    LEFT and the FIRST child (footer actions = the kanban button) on the RIGHT

package/src/client/board.tsx

@@ -1,7 +1,7 @@
-import { useCallback, useEffect, useMemo, useState } from 'react'
-import type { KanbanCard, Lane } from '../shared/card'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import type { KanbanCard, Lane, PhaseAttempt, PlanPhase } from '../shared/card'
 import { DROP_RULES, laneOf } from '../shared/lanes'
-import { api } from './api'
+import { api, gatewaySkillList, type SkillOption } from './api'
 import { exitBoard, getClient } from './kanban-state'
 import { en, zh } from './locales'
 import './board.css'
@@ -9,12 +9,28 @@ import './board.css'
 interface BoardProps {
   t?: (key: string, params?: Record<string, unknown>) => string
   useWorkspaces?: (selector: (state: unknown) => unknown) => unknown
+  useSessions?: (selector: (state: unknown) => unknown) => unknown
+}
+
+/** Session-list snapshot shape the standard `useSessions` feed carries. */
+interface SessionListStateLike {
+  current?: string
 }
 
 function firstLine(text: string): string {
   return text.split('\n').find((l) => l.trim() !== '')?.trim() ?? ''
 }
 
+/** The leading `/skill-name` gesture at the start of the requirement input. */
+const SKILL_GESTURE = /^\s*\/([a-z0-9]+(?:-[a-z0-9]+)*)(?=\s|$)/
+
+/** Extract a leading `/skill-name` token plus the cleaned remainder. */
+function parseSkillGesture(raw: string): { skill?: string; requirement: string } {
+  const m = SKILL_GESTURE.exec(raw)
+  if (m === null) return { requirement: raw.trim() }
+  return { skill: m[1], requirement: raw.slice(m[0].length).trim() }
+}
+
 function statusLabel(card: KanbanCard, t: (key: string) => string): string {
   if (card.status === 'error') {
     switch (card.error?.kind) {
@@ -64,6 +80,9 @@ export function BoardRoot(props: BoardProps): JSX.Element {
   const useWorkspaces = props.useWorkspaces
   const wsState = useWorkspaces !== undefined ? (useWorkspaces((s: unknown) => s) as { items?: WorkspaceRow[] } | undefined) : undefined
   const items: WorkspaceRow[] = wsState?.items ?? []
+  const useSessions = props.useSessions
+  const sessionState = useSessions !== undefined ? (useSessions((s: unknown) => s) as SessionListStateLike | undefined) : undefined
+  const currentSessionId = sessionState?.current
 
   const [selectedPath, setSelectedPath] = useState<string>(() => {
     try {
@@ -170,8 +189,6 @@ export function BoardRoot(props: BoardProps): JSX.Element {
               <option key={w.workspaceId} value={w.path}>{w.title}</option>
             ))}
           </select>
-        </div>
-        <div className="kb-board-actions">
           <button type="button" className="kb-btn kb-btn-primary" onClick={() => setNewTaskOpen(true)}>{t('newTask')}</button>
         </div>
       </div>
@@ -211,6 +228,7 @@ export function BoardRoot(props: BoardProps): JSX.Element {
           t={t}
           workspaces={items}
           selectedPath={selectedPath}
+          sessionId={currentSessionId}
           onClose={() => setNewTaskOpen(false)}
           onCreated={() => {
             setNewTaskOpen(false)
@@ -264,6 +282,7 @@ function CardView({ card, t, onToggle }: CardViewProps): JSX.Element {
       <div className="kb-card-meta">
         <span className="kb-card-badge">{badge}</span>
         {phaseInfo !== '' && <span className="kb-card-phase">{phaseInfo}</span>}
+        {card.skill !== undefined && card.skill !== '' && <span className="kb-card-skill">/ {card.skill}</span>}
         {card.model !== '' && <span className="kb-card-model">{card.model}</span>}
       </div>
       {card.status === 'error' && card.error !== undefined && (
@@ -280,18 +299,27 @@ interface NewTaskModalProps {
   t: (key: string, params?: Record<string, unknown>) => string
   workspaces: WorkspaceRow[]
   selectedPath: string
+  /** Current session id, scoping the host skill.list catalog lookup. */
+  sessionId?: string
   onClose: () => void
   onCreated: () => void
   onError: (message: string) => void
 }
 
-function NewTaskModal({ t, workspaces, selectedPath, onClose, onCreated, onError }: NewTaskModalProps): JSX.Element {
+/** An in-progress leading `/query` token (menu-open state). */
+const SKILL_MENU_RE = /^\s*\/([a-z0-9-]*)$/
+
+function NewTaskModal({ t, workspaces, selectedPath, sessionId, onClose, onCreated, onError }: NewTaskModalProps): JSX.Element {
   const [requirement, setRequirement] = useState('')
   const [project, setProject] = useState(selectedPath)
   const [model, setModel] = useState('')
   const [modelProvider, setModelProvider] = useState('')
   const [models, setModels] = useState<Array<{ provider: string; id: string; name?: string }>>([])
+  const [skills, setSkills] = useState<SkillOption[]>([])
+  const [menuQuery, setMenuQuery] = useState<string | null>(null)
+  const [menuIndex, setMenuIndex] = useState(0)
   const [busy, setBusy] = useState(false)
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null)
 
   useEffect(() => {
     let alive = true
@@ -308,6 +336,73 @@ function NewTaskModal({ t, workspaces, selectedPath, onClose, onCreated, onError
     return () => { alive = false }
   }, [])
 
+  // Load the host skill catalog once (scoped to the current session), the
+  // same feed DSH's chat input uses for its /-autocomplete.
+  useEffect(() => {
+    if (sessionId === undefined) return
+    let alive = true
+    gatewaySkillList(sessionId)
+      .then((list) => { if (alive) setSkills(list) })
+      .catch(() => { if (alive) setSkills([]) })
+    return () => { alive = false }
+  }, [sessionId])
+
+  const matches = skills.filter((s) => s.name.startsWith(menuQuery ?? ''))
+  const menuVisible = menuQuery !== null && matches.length > 0
+  const selected = menuVisible ? matches[Math.min(menuIndex, matches.length - 1)] : undefined
+
+  /** Re-evaluate the leading-token menu state from the current value + caret. */
+  const syncMenu = (value: string, caret: number): void => {
+    const head = value.slice(0, caret)
+    const m = SKILL_MENU_RE.exec(head)
+    if (m !== null) {
+      setMenuQuery(m[1])
+      setMenuIndex(0)
+      return
+    }
+    setMenuQuery(null)
+  }
+
+  const selectSkill = (name: string): void => {
+    const el = textareaRef.current
+    const caret = el?.selectionStart ?? requirement.length
+    const head = requirement.slice(0, caret)
+    const m = SKILL_MENU_RE.exec(head)
+    // Replace the leading `/query` token with `/name `.
+    const inserted = `/${name} `
+    const newValue = m !== null ? inserted + requirement.slice(caret) : inserted + requirement
+    setRequirement(newValue)
+    setMenuQuery(null)
+    requestAnimationFrame(() => {
+      const next = textareaRef.current
+      if (next !== null) {
+        next.focus()
+        const pos = inserted.length
+        next.setSelectionRange(pos, pos)
+      }
+    })
+  }
+
+  const onKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>): void => {
+    if (!menuVisible) return
+    if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      setMenuIndex((i) => (i + 1) % matches.length)
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      setMenuIndex((i) => (i - 1 + matches.length) % matches.length)
+    } else if (e.key === 'Enter') {
+      e.preventDefault()
+      if (selected !== undefined) selectSkill(selected.name)
+    } else if (e.key === 'Escape') {
+      e.preventDefault()
+      setMenuQuery(null)
+    } else if (e.key === 'Tab') {
+      e.preventDefault()
+      if (selected !== undefined) selectSkill(selected.name)
+    }
+  }
+
   const submit = async (): Promise<void> => {
     if (requirement.trim() === '') {
       onError(t('requirementLabel') + ' ' + t('error'))
@@ -317,9 +412,10 @@ function NewTaskModal({ t, workspaces, selectedPath, onClose, onCreated, onError
       onError(t('noWorkspace'))
       return
     }
+    const parsed = parseSkillGesture(requirement)
     setBusy(true)
     try {
-      await api.create(project, requirement.trim(), model, modelProvider)
+      await api.create(project, parsed.requirement, model, modelProvider, parsed.skill)
       onCreated()
     } catch (error) {
       onError(error instanceof Error ? error.message : String(error))
@@ -327,18 +423,52 @@ function NewTaskModal({ t, workspaces, selectedPath, onClose, onCreated, onError
     }
   }
 
+  const activeSkill = parseSkillGesture(requirement).skill
+
   return (
     <div className="kb-modal-backdrop" onClick={busy ? undefined : onClose}>
       <div className="kb-modal" onClick={(e) => e.stopPropagation()}>
         <div className="kb-modal-title">{t('newTask')}</div>
         <label className="kb-field">
           <span>{t('requirementLabel')}</span>
-          <textarea
-            className="kb-input kb-textarea"
-            value={requirement}
-            placeholder={t('requirementPlaceholder')}
-            onChange={(e) => setRequirement(e.target.value)}
-          />
+          <div className="kb-skill-menu-wrap">
+            <textarea
+              ref={textareaRef}
+              className="kb-input kb-textarea"
+              value={requirement}
+              placeholder={t('requirementPlaceholder')}
+              onChange={(e) => {
+                const value = e.target.value
+                setRequirement(value)
+                syncMenu(value, e.target.selectionStart ?? value.length)
+              }}
+              onKeyDown={onKeyDown}
+            />
+            {menuVisible && (
+              <ul className="kb-skill-menu" role="listbox">
+                {matches.map((s, i) => (
+                  <li
+                    key={s.name}
+                    role="option"
+                    aria-selected={i === menuIndex}
+                    className={'kb-skill-menu-item' + (i === menuIndex ? ' kb-skill-menu-item-active' : '')}
+                    onMouseDown={(e) => { e.preventDefault(); selectSkill(s.name) }}
+                    onMouseEnter={() => setMenuIndex(i)}
+                  >
+                    <span className="kb-skill-menu-name">/{s.name}</span>
+                    <span className="kb-skill-menu-desc">
+                      {s.modelInvocable ? s.description : `${t('skillMenuUserOnly')} · ${s.description}`}
+                    </span>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+          {activeSkill !== undefined ? (
+            <span className="kb-field-hint kb-field-hint-skill">{t('skillHint', { skill: activeSkill })}</span>
+          ) : (
+            <span className="kb-field-hint">{t('skillGestureHint')}</span>
+          )}
         </label>
         <label className="kb-field">
           <span>{t('project')}</span>
@@ -419,6 +549,9 @@ function DetailPanel({ card, t, onClose, onChanged, onToast, onOpenSession }: De
       <div className="kb-detail-panel-body">
         <div className="kb-detail-section">
           <div className="kb-detail-label">{t('requirement')}</div>
+          {card.skill !== undefined && card.skill !== '' && (
+            <div className="kb-detail-skill">{t('skillBadge', { skill: card.skill })}</div>
+          )}
           <div className="kb-detail-text">{card.requirement}</div>
         </div>
 
@@ -429,14 +562,14 @@ function DetailPanel({ card, t, onClose, onChanged, onToast, onOpenSession }: De
               <div className="kb-plan-summary">{card.plan.summary}</div>
               <ol className="kb-plan-phases">
                 {card.plan.phases.map((phase, i) => (
-                  <li key={phase.id} className={'kb-plan-phase' + (i === card.currentPhase && card.status === 'running' ? ' kb-plan-phase-current' : '')}>
-                    <div className="kb-plan-phase-head">
-                      <span className="kb-plan-phase-title">{phase.title}</span>
-                      <span className="kb-plan-phase-id">{phase.id}</span>
-                    </div>
-                    <div className="kb-plan-phase-goal">{phase.goal}</div>
-                    <PhaseSessions phaseIndex={i} card={card} t={t} onOpenSession={onOpenSession} />
-                  </li>
+                  <PhaseCard
+                    key={phase.id}
+                    phase={phase}
+                    phaseIndex={i}
+                    card={card}
+                    t={t}
+                    onOpenSession={onOpenSession}
+                  />
                 ))}
               </ol>
             </div>
@@ -493,23 +626,68 @@ function DetailPanel({ card, t, onClose, onChanged, onToast, onOpenSession }: De
   )
 }
 
-function PhaseSessions({ phaseIndex, card, t, onOpenSession }: {
+/** One plan phase rendered as a card with goal / sessions / conclusion sections. */
+function PhaseCard({ phase, phaseIndex, card, t, onOpenSession }: {
+  phase: PlanPhase
   phaseIndex: number
   card: KanbanCard
-  t: (key: string) => string
+  t: (key: string, params?: Record<string, unknown>) => string
   onOpenSession: (sessionId: string) => void
-}): JSX.Element | null {
+}): JSX.Element {
   const attempts = card.sessions.phases.filter((a) => a.phaseIndex === phaseIndex)
-  if (attempts.length === 0) return null
+  const summaries = attempts
+    .filter((a) => a.summary !== undefined && a.summary.trim() !== '')
+    .map((a) => a.summary as string)
+  const isCurrent = phaseIndex === card.currentPhase && card.status === 'running'
+  // A phase with at least one concluded attempt counts as completed.
+  const isCompleted = summaries.length > 0
+  const cls = 'kb-plan-phase'
+    + (isCurrent ? ' kb-plan-phase-current' : '')
+    + (isCompleted ? ' kb-plan-phase-completed' : '')
+  return (
+    <li className={cls}>
+      <div className="kb-plan-phase-head">
+        <span className="kb-plan-phase-title">{phase.title}</span>
+        <span className="kb-plan-phase-id">{phase.id}</span>
+      </div>
+      <div className="kb-plan-phase-body">
+        <div className="kb-plan-phase-section">
+          <div className="kb-plan-phase-section-title">{t('phaseGoal')}</div>
+          <div className="kb-plan-phase-goal">{phase.goal}</div>
+        </div>
+        {attempts.length > 0 && (
+          <div className="kb-plan-phase-section">
+            <div className="kb-plan-phase-section-title">{t('phaseSessions')}</div>
+            <PhaseSessions attempts={attempts} t={t} onOpenSession={onOpenSession} />
+          </div>
+        )}
+        {summaries.length > 0 && (
+          <div className="kb-plan-phase-section">
+            <div className="kb-plan-phase-section-title">{t('phaseConclusion')}</div>
+            <div className="kb-plan-phase-conclusion">
+              {summaries.map((s, idx) => (
+                <div key={idx} className="kb-plan-phase-conclusion-item">{s}</div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </li>
+  )
+}
+
+/** Open-session buttons for one phase's attempts (retries append more). */
+function PhaseSessions({ attempts, t, onOpenSession }: {
+  attempts: PhaseAttempt[]
+  t: (key: string) => string
+  onOpenSession: (sessionId: string) => void
+}): JSX.Element {
   return (
-    <div className="kb-session-links">
+    <div className="kb-plan-phase-sessions">
       {attempts.map((a) => (
-        <span key={a.sessionId} className="kb-session-attempt">
-          <button type="button" className="kb-btn kb-btn-small" onClick={() => onOpenSession(a.sessionId)}>
-            {t('openSession')} · {a.sessionId.slice(0, 13)}
-          </button>
-          {a.summary !== undefined && <span className="kb-session-summary">{a.summary}</span>}
-        </span>
+        <button key={a.sessionId} type="button" className="kb-btn kb-btn-small" onClick={() => onOpenSession(a.sessionId)}>
+          {t('openSession')} · {a.sessionId.slice(0, 13)}
+        </button>
       ))}
     </div>
   )