nucleo000/agent-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: scope lifecycle notifications to active session, remove mock mode

Browse Source 
- Only show hookHistory/lifecycleEvent when viewing the agent's current
  live session, preventing notification leaking to historical sessions
- Reset notifications on SessionStart (like hookHistory already does)
- Remove mock/demo animation mode from SessionLifecycleStatus
- Delete dead useHooksApproval composable (never imported)
This commit is contained in:
josedario87
2026-02-24 11:58:05 -06:00
parent 08e73a1eb6
commit 509ec1847b
5 changed files with 319 additions and 300 deletions
Download Patch File Download Diff File Expand all files Collapse all files

247
frontend/src/components/transcript-debug/ChatContainer.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, computed, watch, nextTick } from 'vue'
import { ref, computed, watch, nextTick, TransitionGroup } from 'vue'
import type {
ParsedConversation,
ParsedUserMessage,
@@ -16,6 +16,7 @@ import AssistantMessageBubble from './AssistantMessageBubble.vue'
import ProgressEvent from './ProgressEvent.vue'
import SystemMessage from './SystemMessage.vue'
import TurnEndDivider from './TurnEndDivider.vue'
import CompactBoundaryDivider from './CompactBoundaryDivider.vue'
import UserInput from './UserInput.vue'
import SessionLifecycleStatus from './SessionLifecycleStatus.vue'
import ResumeTerminalButton from './ResumeTerminalButton.vue'
@@ -49,17 +50,17 @@ const props = defineProps<{
// ── Agent status display ──
const sessionStore = useSessionState()
const STATUS_DISPLAY: Record<AgentStatus, { color: string; label: string }> = {
idle: { color: '#6b7280', label: 'Available' },
thinking: { color: '#60a5fa', label: 'Thinking...' },
reading: { color: '#22d3ee', label: 'Reading' },
writing: { color: '#4ade80', label: 'Writing' },
toolUse: { color: '#fbbf24', label: 'Using' },
permissionRequest: { color: '#fb923c', label: 'Waiting approval' },
interrupted: { color: '#f87171', label: 'Interrupted' },
error: { color: '#f87171', label: 'Error' },
sessionStart: { color: '#60a5fa', label: 'Starting' },
sessionEnd: { color: '#6b7280', label: 'Session ended' },
const STATUS_DISPLAY: Record<AgentStatus, { color: string; label: string; icon: string; filled?: boolean; processing?: boolean }> = {
idle: { color: '#6b7280', label: 'Available', icon: 'M12 12m-2 0a2 2 0 1 0 4 0 2 2 0 1 0-4 0', filled: true },
thinking: { color: '#60a5fa', label: 'Thinking...', icon: 'M12 4v2m0 12v2m-8-8H2m20 0h-2m-2.9-5.1l-1.4 1.4m-9.4 9.4l-1.4 1.4m0-12.8l1.4 1.4m9.4 9.4l1.4 1.4', processing: true },
reading: { color: '#22d3ee', label: 'Reading', icon: 'M2 4h6a4 4 0 0 1 4 4v12a3 3 0 0 0-3-3H2zm20 0h-6a4 4 0 0 0-4 4v12a3 3 0 0 1 3-3h7z' },
writing: { color: '#4ade80', label: 'Writing', icon: 'M17 3l4 4L7 21H3v-4z', processing: true },
toolUse: { color: '#fbbf24', label: 'Using', icon: 'M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z', processing: true },
permissionRequest: { color: '#fb923c', label: 'Waiting approval', icon: 'M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z', processing: true },
interrupted: { color: '#f87171', label: 'Interrupted', icon: 'M10 4h4v8h-4zm0 12h4v4h-4z', filled: true },
error: { color: '#f87171', label: 'Error', icon: 'M12 2L2 22h20zm0 7v6m0 2v2' },
sessionStart: { color: '#60a5fa', label: 'Starting', icon: 'M5 3l14 9-14 9z', filled: true, processing: true },
sessionEnd: { color: '#6b7280', label: 'Session ended', icon: 'M18 6L6 18M6 6l12 12' },
}
const agentStatus = computed(() => {
@@ -70,26 +71,43 @@ const agentStatus = computed(() => {
const display = STATUS_DISPLAY[state.status] || STATUS_DISPLAY.idle
const toolSuffix = state.currentTool ? ` ${state.currentTool.name}` : ''
return {
...display,
label: display.label + toolSuffix,
color: display.color,
icon: display.icon,
filled: !!display.filled,
processing: !!display.processing,
tooltip: display.label + toolSuffix,
status: state.status,
}
})
// ── Lifecycle hook event (for SessionLifecycleStatus) ──
// Only show live hook data when viewing the agent's current active session
const isLiveSession = computed(() => {
const agent = props.selectedAgent
if (!agent) return false
const agentState = sessionStore.agents[agent]
if (!agentState?.sessionId) return false
// If no session selected, assume live
if (!props.selectedSessionId) return true
return props.selectedSessionId === agentState.sessionId
})
const lifecycleEvent = computed(() => {
if (!isLiveSession.value) return null
const agent = props.selectedAgent
if (!agent) return null
return sessionStore.agents[agent]?.lastHookEvent ?? null
})
const lifecycleDetail = computed(() => {
if (!isLiveSession.value) return ''
const agent = props.selectedAgent
if (!agent) return ''
return sessionStore.agents[agent]?.lastHookDetail ?? ''
})
const hookHistory = computed(() => {
if (!isLiveSession.value) return []
const agent = props.selectedAgent
if (!agent) return []
return sessionStore.agents[agent]?.hookHistory ?? []
@@ -97,6 +115,20 @@ const hookHistory = computed(() => {
// ── Derived display values ──
const permissionMode = computed(() => props.hookPermissionMode || '')
const PERMISSION_ICONS: Record<string, { icon: string; color: string; label: string; filled?: boolean }> = {
default: { icon: 'M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z', color: '#6b7280', label: 'Default — asks before risky actions' },
acceptEdits: { icon: 'M17 3l4 4L7 21H3v-4z', color: '#4ade80', label: 'Accept Edits — auto-approves file changes' },
plan: { icon: 'M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8zm11-3a3 3 0 1 0 0 6 3 3 0 0 0 0-6z', color: '#60a5fa', label: 'Plan — read-only, proposes before acting' },
bypassPermissions: { icon: 'M13 2L3 14h9l-1 8 10-12h-9z', color: '#f87171', label: 'Bypass — auto-approves everything', filled: true },
dontAsk: { icon: 'M18 6L6 18M6 6l12 12', color: '#fb923c', label: 'Don\'t Ask — denies unless pre-approved' },
}
const permissionIcon = computed(() => {
const mode = permissionMode.value
if (!mode) return null
return PERMISSION_ICONS[mode] || { icon: 'M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z', color: '#94a3b8', label: mode }
})
const fullCwd = computed(() => props.conversation.metadata.cwd || '')
const displayCwd = computed(() => {
const cwd = fullCwd.value
@@ -374,22 +406,44 @@ watch(userUuids, (newUuids) => {
collapsedSections.value = new Set(newUuids.slice(0, -1))
})
// Pre-filtered visible messages for TransitionGroup (no v-if needed in template)
const visibleMessages = computed(() => {
const filtered = props.conversation.messages.filter(msg => !isCollapsedChild(msg))
return filtered.map((msg, i) => ({
msg,
isAssistantContinuation: msg.kind === 'assistant' && i > 0 && filtered[i - 1].kind === 'assistant'
}))
})
defineExpose({ selectMode, toggleSelectMode, allCollapsed, collapseAllExceptLast })
// Track messages that just resolved from optimistic → real
// These skip the bounce animation and get a smooth transition instead
const resolvedUuids = ref(new Set<string>())
// Force scroll to the absolute bottom of the container
// Force scroll to the absolute bottom of the container.
// Multiple passes: rAF covers content-visibility reflow,
// delayed pass covers CSS transition height settle (350ms outer + 300ms inner).
let scrollRafId = 0
let scrollTimerId = 0
function scrollToBottom() {
if (!scrollContainer.value) return
const el = scrollContainer.value
el.scrollTop = el.scrollHeight
// Second pass: content-visibility: auto can cause reflow after initial paint,
// so re-scroll after the browser finishes layout
requestAnimationFrame(() => {
cancelAnimationFrame(scrollRafId)
clearTimeout(scrollTimerId)
scrollRafId = requestAnimationFrame(() => {
el.scrollTop = el.scrollHeight
requestAnimationFrame(() => {
el.scrollTop = el.scrollHeight
})
})
// Final pass after transitions settle
scrollTimerId = window.setTimeout(() => {
el.scrollTop = el.scrollHeight
}, 350)
}
// Scroll to bottom when a new transcript is loaded
@@ -402,9 +456,12 @@ watch(
{ immediate: true }
)
// Auto-scroll to bottom when messages change (every WS update)
// Auto-scroll to bottom on every WS update.
// Watch the array reference (not .length) because parseJsonl creates a new array
// each time — even when messages.length stays the same (e.g. assistant content
// appended to an existing message, tool results resolved, etc.)
watch(
() => props.conversation.messages.length,
() => props.conversation.messages,
async () => {
await nextTick()
scrollToBottom()
@@ -593,16 +650,14 @@ function formatDuration(start: string, end: string): string {
</div>
</div>
<div ref="scrollContainer" class="messages-scroll">
<template
v-for="(msg, idx) in conversation.messages"
:key="msg.uuid"
>
<TransitionGroup name="msg">
<div
v-if="!isCollapsedChild(msg)"
v-for="{ msg, isAssistantContinuation } in visibleMessages"
:key="msg.uuid"
:class="['message-wrapper', {
resolved: resolvedUuids.has(msg.uuid),
selected: selectedUuids.has(msg.uuid),
'assistant-continuation': msg.kind === 'assistant' && idx > 0 && conversation.messages[idx - 1].kind === 'assistant' && !isCollapsedChild(conversation.messages[idx - 1])
'assistant-continuation': isAssistantContinuation
}]"
>
<!-- Select checkbox -->
@@ -629,7 +684,7 @@ function formatDuration(start: string, end: string): string {
<AssistantMessageBubble
v-else-if="msg.kind === 'assistant'"
:message="msg"
:show-header="!(idx > 0 && conversation.messages[idx - 1].kind === 'assistant')"
:show-header="!isAssistantContinuation"
/>
<ProgressEvent
v-else-if="msg.kind === 'progress'"
@@ -639,13 +694,17 @@ function formatDuration(start: string, end: string): string {
v-else-if="msg.kind === 'system' && msg.subtype === 'turn_end'"
:message="msg"
/>
<CompactBoundaryDivider
v-else-if="msg.kind === 'system' && msg.subtype === 'compact_boundary'"
:message="msg"
/>
<SystemMessage
v-else-if="msg.kind === 'system'"
:message="msg"
/>
</div>
</div>
</template>
</TransitionGroup>
</div>
<!-- Selection floating bar -->
@@ -694,7 +753,22 @@ function formatDuration(start: string, end: string): string {
/>
<div class="status-bar">
<span v-if="permissionMode" class="meta-badge mode">{{ permissionMode }}</span>
<span v-if="agentStatus" class="agent-status-icon" :class="{ processing: agentStatus.processing }">
<svg width="12" height="12" viewBox="0 0 24 24"
:fill="agentStatus.filled ? agentStatus.color : 'none'"
:stroke="agentStatus.filled ? 'none' : agentStatus.color"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
><path :d="agentStatus.icon" /></svg>
<span class="agent-status-tooltip">{{ agentStatus.tooltip }}</span>
</span>
<span v-if="permissionIcon" class="perm-icon-wrap">
<svg width="12" height="12" viewBox="0 0 24 24"
:fill="permissionIcon.filled ? permissionIcon.color : 'none'"
:stroke="permissionIcon.filled ? 'none' : permissionIcon.color"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
><path :d="permissionIcon.icon" /></svg>
<span class="perm-tooltip">{{ permissionIcon.label }}</span>
</span>
<span v-if="displayCwd" class="meta-badge origin" tabindex="0">{{ fullCwd }}</span>
<span class="meta-count">{{ conversation.messages.length }} msgs</span>
<button class="new-session-status-btn" @click="emit('createSession')" title="New session">
@@ -839,6 +913,87 @@ function formatDuration(start: string, end: string): string {
flex-shrink: 0;
}
/* ── Agent status icon ── */
.agent-status-icon {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
flex-shrink: 0;
cursor: default;
}
.agent-status-icon.processing svg {
animation: agent-pulse 1.5s ease-in-out infinite;
}
@keyframes agent-pulse {
0%, 100% { opacity: 0.45; transform: scale(0.85); }
50% { opacity: 1; transform: scale(1.1); }
}
.agent-status-tooltip {
position: absolute;
bottom: calc(100% + 5px);
left: 50%;
transform: translateX(-50%);
padding: 3px 7px;
background: rgba(10, 10, 18, 0.95);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 4px;
font-size: 9px;
font-weight: 600;
font-family: 'Courier New', monospace;
color: rgba(255, 255, 255, 0.85);
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity 0.15s ease;
z-index: 20;
}
.agent-status-icon:hover .agent-status-tooltip {
opacity: 1;
}
/* ── Permission mode icon ── */
.perm-icon-wrap {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
flex-shrink: 0;
cursor: default;
}
.perm-tooltip {
position: absolute;
bottom: calc(100% + 5px);
left: 50%;
transform: translateX(-50%);
padding: 3px 7px;
background: rgba(10, 10, 18, 0.95);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 4px;
font-size: 9px;
font-weight: 600;
font-family: 'Courier New', monospace;
color: rgba(255, 255, 255, 0.85);
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity 0.15s ease;
z-index: 20;
}
.perm-icon-wrap:hover .perm-tooltip {
opacity: 1;
}
.new-session-status-btn {
display: inline-flex;
align-items: center;
@@ -1001,7 +1156,6 @@ function formatDuration(start: string, end: string): string {
}
.message-wrapper {
animation: fadeIn 0.15s ease-out;
display: flex;
align-items: flex-start;
gap: 0.4rem;
@@ -1010,6 +1164,7 @@ function formatDuration(start: string, end: string): string {
contain-intrinsic-size: auto 120px;
}
.message-wrapper.selected {
background: rgba(99, 102, 241, 0.06);
border-radius: 8px;
@@ -1145,11 +1300,6 @@ function formatDuration(start: string, end: string): string {
transform: translateX(-50%) translateY(8px);
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes resolveIn {
from { opacity: 0.7; }
to { opacity: 1; }
@@ -1386,6 +1536,29 @@ function formatDuration(start: string, end: string): string {
text-align: right;
flex-shrink: 0;
}
</style>
<!-- Non-scoped: TransitionGroup classes must reach child components -->
<style>
.msg-enter-active {
transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
/* Override content-visibility during transition so browser doesn't skip frames */
content-visibility: visible !important;
}
.msg-enter-from {
opacity: 0;
transform: translateY(10px);
}
.msg-leave-active {
transition: opacity 0.15s ease, transform 0.15s ease;
content-visibility: visible !important;
}
.msg-leave-to {
opacity: 0;
transform: translateY(-4px);
}
</style>

251
frontend/src/components/transcript-debug/SessionLifecycleStatus.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'
import { computed } from 'vue'
type LifecycleEvent =
| 'SessionStart' | 'UserPromptSubmit'
@@ -13,66 +13,52 @@ type Category = 'session' | 'user' | 'tool' | 'agent' | 'system'
interface LifecycleInfo {
color: string
label: string
icon: string
category: Category
processing?: boolean
}
// SVG path data for each icon (14x14 viewBox)
const ICON = {
play: 'M4 2 L12 7 L4 12Z',
chat: 'M2 2h10v7H6l-2 2v-2H2z',
wrench: 'M10 2 L8 4 9 5 5 9 4 8 2 10 4 12 6 10 5 9 9 5 10 6 12 4z',
lock: 'M4 6V4a3 3 0 0 1 6 0v2h1v6H3V6zm2-2v2h2V4a1 1 0 0 0-2 0z',
check: 'M2 7 L5 10 L12 3',
xmark: 'M3 3 L11 11 M11 3 L3 11',
bell: 'M7 1a1 1 0 0 0-1 1v1A4 4 0 0 0 3 7v3l-1 1v1h10v-1l-1-1V7a4 4 0 0 0-3-4V2a1 1 0 0 0-1-1zm-1 12a1 1 0 0 0 2 0z',
fork: 'M4 2v5a3 3 0 0 0 3 3h0a3 3 0 0 0 3-3V2 M4 5h6 M7 10v2',
merge: 'M4 12V7a3 3 0 0 1 3-3h0a3 3 0 0 1 3 3v5 M4 9h6 M7 4V2',
moon: 'M9 2A5 5 0 1 0 9 12 4 4 0 0 1 9 2z',
trophy: 'M4 2h6v5a3 3 0 0 1-6 0z M2 2h2 M10 2h2 M5 10h4v2H5z M2 3v2a2 2 0 0 0 2 2 M12 3v2a2 2 0 0 1-2 2',
gear: 'M7 1l1 2h-2l1-2zM7 13l-1-2h2l-1 2zM1 7l2-1v2l-2-1zM13 7l-2 1V6l2 1zM2.5 3l2 .5-1 1.5-1-2zM11.5 11l-2-.5 1-1.5 1 2zM3 11.5l.5-2 1.5 1-2 1zM11 2.5l-.5 2-1.5-1 2-1zM7 5a2 2 0 1 0 0 4 2 2 0 0 0 0-4z',
compress: 'M2 5h4V1 M12 9H8v4 M2 9h4v4 M12 5H8V1',
power: 'M7 1v5 M4 3A5 5 0 1 0 10 3',
stop: 'M3 3h8v8H3z',
} as const
const LIFECYCLE_DISPLAY: Record<LifecycleEvent, LifecycleInfo> = {
SessionStart: { color: '#60a5fa', label: 'Session started', category: 'session' },
UserPromptSubmit: { color: '#a78bfa', label: 'Prompt submitted', category: 'user' },
PreToolUse: { color: '#fbbf24', label: 'Tool starting', category: 'tool', processing: true },
PermissionRequest: { color: '#fb923c', label: 'Permission required', category: 'tool', processing: true },
PostToolUse: { color: '#4ade80', label: 'Tool completed', category: 'tool' },
PostToolUseFailure: { color: '#f87171', label: 'Tool failed', category: 'tool' },
Notification: { color: '#38bdf8', label: 'Notification', category: 'system' },
SubagentStart: { color: '#c084fc', label: 'Subagent spawned', category: 'agent', processing: true },
SubagentStop: { color: '#a855f7', label: 'Subagent finished', category: 'agent' },
Stop: { color: '#22d3ee', label: 'Response complete', category: 'session' },
TeammateIdle: { color: '#94a3b8', label: 'Teammate idle', category: 'agent' },
TaskCompleted: { color: '#34d399', label: 'Task completed', category: 'system' },
ConfigChange: { color: '#e879f9', label: 'Config changed', category: 'system' },
PreCompact: { color: '#f59e0b', label: 'Compacting context', category: 'system', processing: true },
SessionEnd: { color: '#6b7280', label: 'Session ended', category: 'session' },
SessionStart: { color: '#60a5fa', label: 'Session started', icon: 'play', category: 'session' },
UserPromptSubmit: { color: '#a78bfa', label: 'Prompt submitted', icon: 'chat', category: 'user' },
PreToolUse: { color: '#fbbf24', label: 'Tool starting', icon: 'wrench', category: 'tool', processing: true },
PermissionRequest: { color: '#fb923c', label: 'Permission required', icon: 'lock', category: 'tool', processing: true },
PostToolUse: { color: '#4ade80', label: 'Tool completed', icon: 'check', category: 'tool' },
PostToolUseFailure: { color: '#f87171', label: 'Tool failed', icon: 'xmark', category: 'tool' },
Notification: { color: '#38bdf8', label: 'Notification', icon: 'bell', category: 'system' },
SubagentStart: { color: '#c084fc', label: 'Subagent spawned', icon: 'fork', category: 'agent', processing: true },
SubagentStop: { color: '#a855f7', label: 'Subagent finished', icon: 'merge', category: 'agent' },
Stop: { color: '#22d3ee', label: 'Response complete', icon: 'stop', category: 'session' },
TeammateIdle: { color: '#94a3b8', label: 'Teammate idle', icon: 'moon', category: 'agent' },
TaskCompleted: { color: '#34d399', label: 'Task completed', icon: 'trophy', category: 'system' },
ConfigChange: { color: '#e879f9', label: 'Config changed', icon: 'gear', category: 'system' },
PreCompact: { color: '#f59e0b', label: 'Compacting context', icon: 'compress', category: 'system', processing: true },
SessionEnd: { color: '#6b7280', label: 'Session ended', icon: 'power', category: 'session' },
}
const CATEGORY_ORDER: Record<Category, number> = {
session: 0, user: 1, tool: 2, agent: 3, system: 4
}
interface MockStep {
event: LifecycleEvent
duration: number
detail?: string
}
const MOCK_SEQUENCE: MockStep[] = [
{ event: 'SessionStart', duration: 2000, detail: 'claude-opus-4-6' },
{ event: 'UserPromptSubmit', duration: 1500, detail: '"Fix the login bug"' },
{ event: 'PreToolUse', duration: 800, detail: 'Grep' },
{ event: 'PostToolUse', duration: 1200, detail: 'Grep' },
{ event: 'PreToolUse', duration: 600, detail: 'Read' },
{ event: 'PostToolUse', duration: 1000, detail: 'Read' },
{ event: 'PreToolUse', duration: 500, detail: 'Edit' },
{ event: 'PermissionRequest', duration: 3000, detail: 'Edit src/auth.ts' },
{ event: 'PostToolUse', duration: 1500, detail: 'Edit' },
{ event: 'PreToolUse', duration: 400, detail: 'Bash' },
{ event: 'PermissionRequest', duration: 2500, detail: 'npm test' },
{ event: 'PostToolUseFailure', duration: 2000, detail: 'Bash (exit 1)' },
{ event: 'Notification', duration: 1500, detail: 'Test failed, retrying' },
{ event: 'PreToolUse', duration: 500, detail: 'Edit' },
{ event: 'PostToolUse', duration: 1000, detail: 'Edit' },
{ event: 'PreToolUse', duration: 400, detail: 'Bash' },
{ event: 'PostToolUse', duration: 1500, detail: 'Bash (tests pass)' },
{ event: 'SubagentStart', duration: 1000, detail: 'code-review' },
{ event: 'SubagentStop', duration: 1500, detail: 'code-review' },
{ event: 'PreCompact', duration: 2000 },
{ event: 'TaskCompleted', duration: 1500, detail: 'Login bug fixed' },
{ event: 'Stop', duration: 3000, detail: 'Done' },
{ event: 'TeammateIdle', duration: 1500 },
{ event: 'ConfigChange', duration: 1200, detail: '.claude/settings.json' },
{ event: 'SessionEnd', duration: 4000 },
]
interface HookHistoryEntry {
event: string
timestamp: number
@@ -91,24 +77,29 @@ const props = defineProps<{
hookHistory?: HookHistoryEntry[]
}>()
const isMock = computed(() => !props.currentEvent || !(props.currentEvent in LIFECYCLE_DISPLAY))
const hasEvent = computed(() => !!props.currentEvent && props.currentEvent in LIFECYCLE_DISPLAY)
const mockIndex = ref(0)
const mockHistory = ref<{ event: string }[]>([])
let mockTimer: ReturnType<typeof setTimeout> | null = null
const activeEvent = computed<LifecycleEvent>(() => {
if (!isMock.value) return props.currentEvent as LifecycleEvent
return MOCK_SEQUENCE[mockIndex.value].event
const activeEvent = computed<LifecycleEvent | null>(() => {
if (!hasEvent.value) return null
return props.currentEvent as LifecycleEvent
})
const activeDetail = computed(() => {
if (!isMock.value) return props.eventDetail || ''
return MOCK_SEQUENCE[mockIndex.value].detail || ''
})
const activeDetail = computed(() => props.eventDetail || '')
const displayInfo = computed(() => LIFECYCLE_DISPLAY[activeEvent.value])
const isProcessing = computed(() => !!displayInfo.value.processing)
const displayInfo = computed(() => activeEvent.value ? LIFECYCLE_DISPLAY[activeEvent.value] : null)
const isProcessing = computed(() => !!displayInfo.value?.processing)
const iconPath = computed(() => displayInfo.value ? ICON[displayInfo.value.icon as keyof typeof ICON] : '')
const isFilled = computed(() => {
if (!displayInfo.value) return false
const i = displayInfo.value.icon
return i === 'play' || i === 'chat' || i === 'bell' || i === 'moon' || i === 'stop'
})
const tooltipText = computed(() => {
if (!displayInfo.value) return ''
const label = displayInfo.value.label
const detail = activeDetail.value
return detail ? `${label} — ${detail}` : label
})
// ── Badge counts ──
@@ -141,57 +132,11 @@ function countEvents(entries: { event: string }[]): EventCountEntry[] {
return result
}
const realCounts = computed(() => countEvents(props.hookHistory || []))
const mockCounts = computed(() => countEvents(mockHistory.value))
const displayCounts = computed(() => isMock.value ? mockCounts.value : realCounts.value)
// ── Mock mode ──
function advanceMock() {
const nextIndex = (mockIndex.value + 1) % MOCK_SEQUENCE.length
const nextEvent = MOCK_SEQUENCE[nextIndex].event
if (nextEvent === 'SessionStart') {
mockHistory.value = []
}
mockHistory.value = [...mockHistory.value, { event: nextEvent }]
mockIndex.value = nextIndex
scheduleMock()
}
function scheduleMock() {
if (mockTimer) clearTimeout(mockTimer)
mockTimer = setTimeout(advanceMock, MOCK_SEQUENCE[mockIndex.value].duration)
}
watch(isMock, (mock) => {
if (mock) {
mockHistory.value = [{ event: MOCK_SEQUENCE[mockIndex.value].event }]
scheduleMock()
} else if (mockTimer) {
clearTimeout(mockTimer)
mockTimer = null
}
})
onMounted(() => {
if (isMock.value) {
mockHistory.value = [{ event: MOCK_SEQUENCE[mockIndex.value].event }]
scheduleMock()
}
})
onBeforeUnmount(() => {
if (mockTimer) {
clearTimeout(mockTimer)
mockTimer = null
}
})
const displayCounts = computed(() => countEvents(props.hookHistory || []))
</script>
<template>
<div class="lifecycle-ribbon" :class="['category-' + displayInfo.category]">
<div v-if="displayInfo" class="lifecycle-ribbon" :class="['category-' + displayInfo.category]">
<!-- Badge counts -->
<div class="lc-badges" v-if="displayCounts.length > 0">
<TransitionGroup name="badge">
@@ -209,16 +154,21 @@ onBeforeUnmount(() => {
</TransitionGroup>
</div>
<!-- Current event display -->
<!-- Current event icon + tooltip -->
<Transition name="lc" mode="out-in">
<div class="lc-content" :key="activeEvent + activeDetail">
<span
class="lc-dot"
:class="{ processing: isProcessing }"
:style="{ background: displayInfo.color }"
/>
<span class="lc-event" :style="{ color: displayInfo.color }">{{ activeEvent }}</span>
<span v-if="activeDetail" class="lc-detail">{{ activeDetail }}</span>
<div class="lc-icon-wrap" :key="activeEvent + activeDetail" :class="{ processing: isProcessing }">
<svg
class="lc-icon"
width="14" height="14" viewBox="0 0 14 14"
:fill="isFilled ? displayInfo.color : 'none'"
:stroke="isFilled ? 'none' : displayInfo.color"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
>
<path :d="iconPath" />
</svg>
<span class="lc-tooltip">{{ tooltipText }}</span>
</div>
</Transition>
</div>
@@ -288,49 +238,54 @@ onBeforeUnmount(() => {
transition: transform 0.2s ease;
}
/* ── Current event ── */
/* ── Icon + tooltip ── */
.lc-content {
.lc-icon-wrap {
position: relative;
display: flex;
align-items: center;
gap: 5px;
flex: 1;
min-width: 0;
}
.lc-dot {
width: 5px;
height: 5px;
justify-content: center;
width: 18px;
height: 18px;
flex-shrink: 0;
border-radius: 0;
transition: background 0.3s ease;
cursor: default;
}
.lc-dot.processing {
animation: pulse-lifecycle 1.5s ease-in-out infinite;
.lc-icon {
transition: transform 0.2s ease, filter 0.2s ease;
}
@keyframes pulse-lifecycle {
0%, 100% { opacity: 0.5; transform: scale(0.8); }
50% { opacity: 1; transform: scale(1.2); }
.lc-icon-wrap.processing .lc-icon {
animation: pulse-icon 1.5s ease-in-out infinite;
}
.lc-event {
@keyframes pulse-icon {
0%, 100% { opacity: 0.5; transform: scale(0.85); }
50% { opacity: 1; transform: scale(1.1); }
}
.lc-tooltip {
position: absolute;
bottom: calc(100% + 4px);
left: 50%;
transform: translateX(-50%);
padding: 3px 6px;
background: rgba(15, 15, 25, 0.95);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 4px;
font-size: 9px;
font-weight: 600;
font-family: 'Courier New', monospace;
color: rgba(255, 255, 255, 0.8);
white-space: nowrap;
transition: color 0.3s ease;
pointer-events: none;
opacity: 0;
transition: opacity 0.15s ease;
z-index: 20;
}
.lc-detail {
font-size: 9px;
font-family: 'Courier New', monospace;
color: rgba(255, 255, 255, 0.3);
white-space: nowrap;
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
.lc-icon-wrap:hover .lc-tooltip {
opacity: 1;
}
/* Transition classes */

1
frontend/src/composables/transcript-debug/index.ts
View File

@@ -1,2 +1 @@
export { useTranscriptDebug } from './useTranscriptDebug'
export { useHooksApproval } from './useHooksApproval'

112
frontend/src/composables/transcript-debug/useHooksApproval.ts
View File

@@ -1,112 +0,0 @@
import { ref } from 'vue'
import { apiFetch } from '@/lib/tauri'
import type { HooksApprovalPermissionRequest, HooksApprovalPlanRequest } from '@/types/hooks-approval'
export function useHooksApproval() {
const pendingPermissions = ref<HooksApprovalPermissionRequest[]>([])
const pendingPlans = ref<HooksApprovalPlanRequest[]>([])
// ── WS message handler (called from useTranscriptDebug) ──
function handleApprovalMessage(msg: { type: string; [key: string]: unknown }) {
if (msg.type === 'hooks-approval-permission') {
pendingPermissions.value.push({
requestId: msg.requestId as string,
tool_name: msg.tool_name as string | undefined,
tool_input: msg.tool_input,
agent_name: msg.agent_name as string | undefined,
session_id: msg.session_id as string | undefined,
cwd: msg.cwd as string | undefined,
timestamp: msg.timestamp as number
})
} else if (msg.type === 'hooks-approval-plan') {
pendingPlans.value.push({
requestId: msg.requestId as string,
session_id: msg.session_id as string | undefined,
permission_mode: msg.permission_mode as string | undefined,
lastAssistantText: (msg.lastAssistantText as string) || '',
timestamp: msg.timestamp as number
})
}
}
// ── Respond to permission ──
async function respondPermission(requestId: string, decision: 'allow' | 'deny') {
try {
await apiFetch('/api/hooks-approval/respond', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ requestId, decision })
})
} catch (e) {
console.error('[HooksApproval] Failed to respond permission:', e)
}
pendingPermissions.value = pendingPermissions.value.filter(p => p.requestId !== requestId)
}
// ── Respond to plan ──
async function respondPlan(requestId: string, decision: 'approve' | 'reject' | 'edit', reason?: string) {
try {
await apiFetch('/api/hooks-approval/respond-plan', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ requestId, decision, reason })
})
} catch (e) {
console.error('[HooksApproval] Failed to respond plan:', e)
}
pendingPlans.value = pendingPlans.value.filter(p => p.requestId !== requestId)
}
// ── Fetch pending on page load (state recovery) ──
async function fetchPending() {
try {
const res = await apiFetch('/api/hooks-approval')
if (!res.ok) return
const data = await res.json()
if (Array.isArray(data.permissions)) {
for (const p of data.permissions) {
if (!pendingPermissions.value.some(e => e.requestId === p.requestId)) {
pendingPermissions.value.push({
requestId: p.requestId,
tool_name: p.tool_name,
tool_input: p.tool_input,
agent_name: p.agent_name,
session_id: p.session_id,
timestamp: p.createdAt
})
}
}
}
if (Array.isArray(data.plans)) {
for (const p of data.plans) {
if (!pendingPlans.value.some(e => e.requestId === p.requestId)) {
pendingPlans.value.push({
requestId: p.requestId,
session_id: p.session_id,
permission_mode: p.permission_mode,
lastAssistantText: p.lastAssistantText || '',
timestamp: p.createdAt
})
}
}
}
} catch (e) {
console.error('[HooksApproval] Failed to fetch pending:', e)
}
}
return {
pendingPermissions,
pendingPlans,
handleApprovalMessage,
respondPermission,
respondPlan,
fetchPending
}
}