@shepai/cli 1.113.0 → 1.114.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (152) hide show
  1. package/dist/src/presentation/web/components/common/feature-drawer-tabs/event-log-viewer.d.ts +5 -0
  2. package/dist/src/presentation/web/components/common/feature-drawer-tabs/event-log-viewer.d.ts.map +1 -0
  3. package/dist/src/presentation/web/components/common/feature-drawer-tabs/event-log-viewer.js +115 -0
  4. package/dist/src/presentation/web/components/common/feature-drawer-tabs/event-log-viewer.stories.d.ts +18 -0
  5. package/dist/src/presentation/web/components/common/feature-drawer-tabs/event-log-viewer.stories.d.ts.map +1 -0
  6. package/dist/src/presentation/web/components/common/feature-drawer-tabs/event-log-viewer.stories.js +88 -0
  7. package/dist/src/presentation/web/components/common/feature-drawer-tabs/log-tab.d.ts.map +1 -1
  8. package/dist/src/presentation/web/components/common/feature-drawer-tabs/log-tab.js +10 -2
  9. package/dist/src/presentation/web/components/common/feature-drawer-tabs/log-tab.stories.d.ts +5 -3
  10. package/dist/src/presentation/web/components/common/feature-drawer-tabs/log-tab.stories.d.ts.map +1 -1
  11. package/dist/src/presentation/web/components/common/feature-drawer-tabs/log-tab.stories.js +92 -9
  12. package/dist/src/presentation/web/lib/parse-log-line.d.ts +49 -0
  13. package/dist/src/presentation/web/lib/parse-log-line.d.ts.map +1 -0
  14. package/dist/src/presentation/web/lib/parse-log-line.js +126 -0
  15. package/dist/tsconfig.build.tsbuildinfo +1 -1
  16. package/package.json +1 -1
  17. package/web/.next/BUILD_ID +1 -1
  18. package/web/.next/build-manifest.json +2 -2
  19. package/web/.next/fallback-build-manifest.json +2 -2
  20. package/web/.next/prerender-manifest.json +3 -3
  21. package/web/.next/required-server-files.js +2 -2
  22. package/web/.next/required-server-files.json +2 -2
  23. package/web/.next/server/app/(dashboard)/@drawer/create/page/server-reference-manifest.json +20 -20
  24. package/web/.next/server/app/(dashboard)/@drawer/create/page.js.nft.json +1 -1
  25. package/web/.next/server/app/(dashboard)/@drawer/create/page_client-reference-manifest.js +1 -1
  26. package/web/.next/server/app/(dashboard)/@drawer/feature/[featureId]/[tab]/page/server-reference-manifest.json +26 -26
  27. package/web/.next/server/app/(dashboard)/@drawer/feature/[featureId]/[tab]/page.js.nft.json +1 -1
  28. package/web/.next/server/app/(dashboard)/@drawer/feature/[featureId]/[tab]/page_client-reference-manifest.js +1 -1
  29. package/web/.next/server/app/(dashboard)/@drawer/feature/[featureId]/page/server-reference-manifest.json +26 -26
  30. package/web/.next/server/app/(dashboard)/@drawer/feature/[featureId]/page.js.nft.json +1 -1
  31. package/web/.next/server/app/(dashboard)/@drawer/feature/[featureId]/page_client-reference-manifest.js +1 -1
  32. package/web/.next/server/app/(dashboard)/@drawer/repository/[repositoryId]/page/server-reference-manifest.json +18 -18
  33. package/web/.next/server/app/(dashboard)/@drawer/repository/[repositoryId]/page.js.nft.json +1 -1
  34. package/web/.next/server/app/(dashboard)/@drawer/repository/[repositoryId]/page_client-reference-manifest.js +1 -1
  35. package/web/.next/server/app/(dashboard)/create/page/server-reference-manifest.json +20 -20
  36. package/web/.next/server/app/(dashboard)/create/page.js.nft.json +1 -1
  37. package/web/.next/server/app/(dashboard)/create/page_client-reference-manifest.js +1 -1
  38. package/web/.next/server/app/(dashboard)/feature/[featureId]/[tab]/page/server-reference-manifest.json +26 -26
  39. package/web/.next/server/app/(dashboard)/feature/[featureId]/[tab]/page.js.nft.json +1 -1
  40. package/web/.next/server/app/(dashboard)/feature/[featureId]/[tab]/page_client-reference-manifest.js +1 -1
  41. package/web/.next/server/app/(dashboard)/feature/[featureId]/page/server-reference-manifest.json +26 -26
  42. package/web/.next/server/app/(dashboard)/feature/[featureId]/page.js.nft.json +1 -1
  43. package/web/.next/server/app/(dashboard)/feature/[featureId]/page_client-reference-manifest.js +1 -1
  44. package/web/.next/server/app/(dashboard)/page/server-reference-manifest.json +18 -18
  45. package/web/.next/server/app/(dashboard)/page.js.nft.json +1 -1
  46. package/web/.next/server/app/(dashboard)/page_client-reference-manifest.js +1 -1
  47. package/web/.next/server/app/(dashboard)/repository/[repositoryId]/page/server-reference-manifest.json +18 -18
  48. package/web/.next/server/app/(dashboard)/repository/[repositoryId]/page.js.nft.json +1 -1
  49. package/web/.next/server/app/(dashboard)/repository/[repositoryId]/page_client-reference-manifest.js +1 -1
  50. package/web/.next/server/app/_global-error.html +2 -2
  51. package/web/.next/server/app/_global-error.rsc +1 -1
  52. package/web/.next/server/app/_global-error.segments/__PAGE__.segment.rsc +1 -1
  53. package/web/.next/server/app/_global-error.segments/_full.segment.rsc +1 -1
  54. package/web/.next/server/app/_global-error.segments/_head.segment.rsc +1 -1
  55. package/web/.next/server/app/_global-error.segments/_index.segment.rsc +1 -1
  56. package/web/.next/server/app/_global-error.segments/_tree.segment.rsc +1 -1
  57. package/web/.next/server/app/_not-found/page/server-reference-manifest.json +1 -1
  58. package/web/.next/server/app/_not-found/page_client-reference-manifest.js +1 -1
  59. package/web/.next/server/app/api/attachments/preview/route.js.nft.json +1 -1
  60. package/web/.next/server/app/api/cli-upgrade/route.js +2 -2
  61. package/web/.next/server/app/api/evidence/route.js.nft.json +1 -1
  62. package/web/.next/server/app/settings/page/server-reference-manifest.json +5 -5
  63. package/web/.next/server/app/settings/page.js.nft.json +1 -1
  64. package/web/.next/server/app/settings/page_client-reference-manifest.js +1 -1
  65. package/web/.next/server/app/skills/page/server-reference-manifest.json +6 -6
  66. package/web/.next/server/app/skills/page.js.nft.json +1 -1
  67. package/web/.next/server/app/skills/page_client-reference-manifest.js +1 -1
  68. package/web/.next/server/app/tools/page/server-reference-manifest.json +6 -6
  69. package/web/.next/server/app/tools/page.js.nft.json +1 -1
  70. package/web/.next/server/app/tools/page_client-reference-manifest.js +1 -1
  71. package/web/.next/server/app/version/page/server-reference-manifest.json +1 -1
  72. package/web/.next/server/app/version/page_client-reference-manifest.js +1 -1
  73. package/web/.next/server/chunks/[root-of-the-server]__a402b567._.js +1 -1
  74. package/web/.next/server/chunks/[root-of-the-server]__d2c18946._.js +2 -2
  75. package/web/.next/server/chunks/ssr/744ca_web_components_common_control-center-drawer_create-drawer-client_tsx_5e26fc0a._.js +1 -1
  76. package/web/.next/server/chunks/ssr/744ca_web_components_common_control-center-drawer_create-drawer-client_tsx_5e26fc0a._.js.map +1 -1
  77. package/web/.next/server/chunks/ssr/8ba4b_server_app_(dashboard)_@drawer_repository_[repositoryId]_page_actions_a1104008.js +1 -1
  78. package/web/.next/server/chunks/ssr/8ba4b_server_app_(dashboard)_@drawer_repository_[repositoryId]_page_actions_a1104008.js.map +1 -1
  79. package/web/.next/server/chunks/ssr/8ba4b_server_app_(dashboard)_repository_[repositoryId]_page_actions_92642200.js +1 -1
  80. package/web/.next/server/chunks/ssr/8ba4b_server_app_(dashboard)_repository_[repositoryId]_page_actions_92642200.js.map +1 -1
  81. package/web/.next/server/chunks/ssr/[root-of-the-server]__039967e3._.js +1 -1
  82. package/web/.next/server/chunks/ssr/[root-of-the-server]__039967e3._.js.map +1 -1
  83. package/web/.next/server/chunks/ssr/[root-of-the-server]__07a39ff2._.js +1 -1
  84. package/web/.next/server/chunks/ssr/[root-of-the-server]__11033878._.js +1 -1
  85. package/web/.next/server/chunks/ssr/[root-of-the-server]__11033878._.js.map +1 -1
  86. package/web/.next/server/chunks/ssr/[root-of-the-server]__24dd0927._.js +2 -2
  87. package/web/.next/server/chunks/ssr/[root-of-the-server]__2773312c._.js +1 -1
  88. package/web/.next/server/chunks/ssr/[root-of-the-server]__2773312c._.js.map +1 -1
  89. package/web/.next/server/chunks/ssr/[root-of-the-server]__5d87af2e._.js +1 -1
  90. package/web/.next/server/chunks/ssr/[root-of-the-server]__6367aea0._.js +1 -1
  91. package/web/.next/server/chunks/ssr/[root-of-the-server]__6367aea0._.js.map +1 -1
  92. package/web/.next/server/chunks/ssr/[root-of-the-server]__89e8a5cc._.js +2 -2
  93. package/web/.next/server/chunks/ssr/[root-of-the-server]__aad040c0._.js +2 -2
  94. package/web/.next/server/chunks/ssr/[root-of-the-server]__aad040c0._.js.map +1 -1
  95. package/web/.next/server/chunks/ssr/[root-of-the-server]__b1e68e34._.js +3 -0
  96. package/web/.next/server/chunks/ssr/{[root-of-the-server]__d91fdd51._.js.map → [root-of-the-server]__b1e68e34._.js.map} +1 -1
  97. package/web/.next/server/chunks/ssr/[root-of-the-server]__cbd8062c._.js +1 -1
  98. package/web/.next/server/chunks/ssr/[root-of-the-server]__cbd8062c._.js.map +1 -1
  99. package/web/.next/server/chunks/ssr/[root-of-the-server]__e70c5627._.js +1 -1
  100. package/web/.next/server/chunks/ssr/[root-of-the-server]__e70c5627._.js.map +1 -1
  101. package/web/.next/server/chunks/ssr/[root-of-the-server]__fdc75809._.js +1 -1
  102. package/web/.next/server/chunks/ssr/[root-of-the-server]__fdc75809._.js.map +1 -1
  103. package/web/.next/server/chunks/ssr/{_e6b5ebbd._.js → _10942246._.js} +2 -2
  104. package/web/.next/server/chunks/ssr/{_e6b5ebbd._.js.map → _10942246._.js.map} +1 -1
  105. package/web/.next/server/chunks/ssr/_135edb9c._.js +1 -1
  106. package/web/.next/server/chunks/ssr/_135edb9c._.js.map +1 -1
  107. package/web/.next/server/chunks/ssr/{_fcfc1141._.js → _7deb4af9._.js} +2 -2
  108. package/web/.next/server/chunks/ssr/{_fcfc1141._.js.map → _7deb4af9._.js.map} +1 -1
  109. package/web/.next/server/chunks/ssr/_8dacd1e7._.js +1 -1
  110. package/web/.next/server/chunks/ssr/_8dacd1e7._.js.map +1 -1
  111. package/web/.next/server/chunks/ssr/_cc77a143._.js +1 -1
  112. package/web/.next/server/chunks/ssr/_cc77a143._.js.map +1 -1
  113. package/web/.next/server/chunks/ssr/{_88e359a0._.js → _f0432d1b._.js} +2 -2
  114. package/web/.next/server/chunks/ssr/{_88e359a0._.js.map → _f0432d1b._.js.map} +1 -1
  115. package/web/.next/server/chunks/ssr/b1a17_presentation_web_components_features_settings_settings-page-client_tsx_6ed9d5f8._.js +1 -1
  116. package/web/.next/server/chunks/ssr/b1a17_presentation_web_components_features_settings_settings-page-client_tsx_6ed9d5f8._.js.map +1 -1
  117. package/web/.next/server/chunks/ssr/src_presentation_web__next-internal_server_app_(dashboard)_page_actions_888633e1.js +1 -1
  118. package/web/.next/server/chunks/ssr/src_presentation_web__next-internal_server_app_(dashboard)_page_actions_888633e1.js.map +1 -1
  119. package/web/.next/server/chunks/ssr/src_presentation_web__next-internal_server_app_skills_page_actions_1fa8042e.js +1 -1
  120. package/web/.next/server/chunks/ssr/src_presentation_web__next-internal_server_app_skills_page_actions_1fa8042e.js.map +1 -1
  121. package/web/.next/server/chunks/ssr/src_presentation_web__next-internal_server_app_tools_page_actions_24684200.js +1 -1
  122. package/web/.next/server/chunks/ssr/src_presentation_web__next-internal_server_app_tools_page_actions_24684200.js.map +1 -1
  123. package/web/.next/server/chunks/ssr/src_presentation_web_ce7cbc3c._.js +2 -2
  124. package/web/.next/server/chunks/ssr/src_presentation_web_ce7cbc3c._.js.map +1 -1
  125. package/web/.next/server/chunks/ssr/src_presentation_web_components_bf50c527._.js +1 -1
  126. package/web/.next/server/chunks/ssr/src_presentation_web_components_de814675._.js +1 -1
  127. package/web/.next/server/chunks/ssr/src_presentation_web_components_features_control-center_7ac3562e._.js +1 -1
  128. package/web/.next/server/chunks/ssr/src_presentation_web_components_features_control-center_7ac3562e._.js.map +1 -1
  129. package/web/.next/server/chunks/ssr/src_presentation_web_e2604413._.js +2 -2
  130. package/web/.next/server/chunks/ssr/src_presentation_web_e2604413._.js.map +1 -1
  131. package/web/.next/server/pages/500.html +2 -2
  132. package/web/.next/server/server-reference-manifest.js +1 -1
  133. package/web/.next/server/server-reference-manifest.json +31 -31
  134. package/web/.next/static/chunks/0c701494594b6134.js +1 -0
  135. package/web/.next/static/chunks/{9bfafbbd2d362548.js → 31b1f992247624f8.js} +2 -2
  136. package/web/.next/static/chunks/57b45edf86522369.css +1 -0
  137. package/web/.next/static/chunks/{7249bab754695c9b.js → 6b61a250047ee0b4.js} +2 -2
  138. package/web/.next/static/chunks/{0e3793f87c0d2be4.js → 6cb5c415171426e8.js} +1 -1
  139. package/web/.next/static/chunks/{af4d18c173729fc0.js → 6fbd2c45d85eba3a.js} +1 -1
  140. package/web/.next/static/chunks/{1213d5af738d8e44.js → 8d067c0e7cabc222.js} +1 -1
  141. package/web/.next/static/chunks/{e870d8454835338c.js → 9fce0a460a0e89bc.js} +1 -1
  142. package/web/.next/static/chunks/b1f3c0e8e9872ef8.js +1 -0
  143. package/web/.next/static/chunks/{45687d169255cd7a.js → bcd3e54e075de2cb.js} +1 -1
  144. package/web/.next/static/chunks/{d3ae2e0768e0361a.js → e3d8ee066c7e996d.js} +1 -1
  145. package/web/.next/static/chunks/{ebf7b7a1414b813f.js → fec29583d5cc1bed.js} +1 -1
  146. package/web/.next/server/chunks/ssr/[root-of-the-server]__d91fdd51._.js +0 -3
  147. package/web/.next/static/chunks/07b853e29af1e5f2.js +0 -1
  148. package/web/.next/static/chunks/694fc9a1173043d8.css +0 -1
  149. package/web/.next/static/chunks/e7d33f2288fea0d0.js +0 -1
  150. /package/web/.next/static/{f-Ju5FEgjPPi1hAjRWRoZ → oI7zSl_ThcdDPhNbok2i3}/_buildManifest.js +0 -0
  151. /package/web/.next/static/{f-Ju5FEgjPPi1hAjRWRoZ → oI7zSl_ThcdDPhNbok2i3}/_clientMiddlewareManifest.json +0 -0
  152. /package/web/.next/static/{f-Ju5FEgjPPi1hAjRWRoZ → oI7zSl_ThcdDPhNbok2i3}/_ssgManifest.js +0 -0
@@ -0,0 +1,5 @@
1
+ export interface EventLogViewerProps {
2
+ content: string;
3
+ }
4
+ export declare function EventLogViewer({ content }: EventLogViewerProps): import("react/jsx-runtime").JSX.Element | null;
5
+ //# sourceMappingURL=event-log-viewer.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"event-log-viewer.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer-tabs/event-log-viewer.tsx"],"names":[],"mappings":"AAwBA,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,EAAE,mBAAmB,kDAa9D"}
@@ -0,0 +1,115 @@
1
+ 'use client';
2
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
+ import { useMemo } from 'react';
4
+ import { FileText, Terminal, MessageSquare, CheckCircle2, Coins, Server, FileCode, } from 'lucide-react';
5
+ import { parseLogContent, parseToolCall, parseResultMessage, parseTokensMessage, } from '../../../lib/parse-log-line.js';
6
+ export function EventLogViewer({ content }) {
7
+ const lines = useMemo(() => parseLogContent(content), [content]);
8
+ if (lines.length === 0)
9
+ return null;
10
+ return (_jsx("div", { className: "flex flex-col", children: lines.map((line, i) => (
11
+ // eslint-disable-next-line react/no-array-index-key -- append-only list, raw content not unique
12
+ _jsx(LogLineRow, { line: line }, i))) }));
13
+ }
14
+ /* ---------------------------------------------------------------------------
15
+ * Line router
16
+ * ------------------------------------------------------------------------- */
17
+ function LogLineRow({ line }) {
18
+ switch (line.tag) {
19
+ case 'tool':
20
+ return _jsx(ToolCallRow, { line: line });
21
+ case 'text':
22
+ return _jsx(TextRow, { line: line });
23
+ case 'result':
24
+ return _jsx(ResultRow, { line: line });
25
+ case 'tokens':
26
+ return _jsx(TokensRow, { line: line });
27
+ case 'worker':
28
+ return _jsx(WorkerRow, { line: line });
29
+ case 'info':
30
+ return _jsx(InfoRow, { line: line });
31
+ case 'raw':
32
+ default:
33
+ return _jsx(RawRow, { line: line });
34
+ }
35
+ }
36
+ /* ---------------------------------------------------------------------------
37
+ * Shared helpers
38
+ * ------------------------------------------------------------------------- */
39
+ function Timestamp({ value }) {
40
+ if (!value)
41
+ return null;
42
+ const time = value.replace(/^.*T/, '').replace('Z', '');
43
+ return (_jsx("span", { className: "text-muted-foreground/60 w-20 shrink-0 font-mono text-[10px]", children: time }));
44
+ }
45
+ function PhaseBadge({ phase }) {
46
+ if (!phase)
47
+ return null;
48
+ return (_jsx("span", { className: "bg-muted text-muted-foreground shrink-0 rounded px-1.5 py-0.5 font-mono text-[10px] font-medium", children: phase }));
49
+ }
50
+ /* ---------------------------------------------------------------------------
51
+ * Event-specific rows
52
+ * ------------------------------------------------------------------------- */
53
+ function ToolCallRow({ line }) {
54
+ const { toolName, args } = parseToolCall(line.message);
55
+ // Try to extract a key detail from args for common tools
56
+ const detail = getToolDetail(toolName, args);
57
+ return (_jsxs("div", { className: "hover:bg-muted/50 flex items-start gap-2 border-b border-transparent px-3 py-1.5 transition-colors", children: [_jsx(Timestamp, { value: line.timestamp }), _jsx(PhaseBadge, { phase: line.phase }), _jsxs("div", { className: "flex min-w-0 flex-1 items-start gap-1.5", children: [_jsx(ToolIcon, { toolName: toolName }), _jsx("span", { className: "text-xs font-semibold text-violet-600 dark:text-violet-400", children: toolName }), detail ? (_jsx("span", { className: "text-muted-foreground min-w-0 truncate font-mono text-xs", children: detail })) : null] })] }));
58
+ }
59
+ function ToolIcon({ toolName }) {
60
+ const lower = toolName.toLowerCase();
61
+ if (lower === 'bash')
62
+ return _jsx(Terminal, { className: "mt-0.5 h-3 w-3 shrink-0 text-violet-500" });
63
+ if (lower === 'read' || lower === 'glob' || lower === 'grep')
64
+ return _jsx(FileText, { className: "mt-0.5 h-3 w-3 shrink-0 text-violet-500" });
65
+ if (lower === 'write' || lower === 'edit')
66
+ return _jsx(FileCode, { className: "mt-0.5 h-3 w-3 shrink-0 text-violet-500" });
67
+ return _jsx(Terminal, { className: "mt-0.5 h-3 w-3 shrink-0 text-violet-500" });
68
+ }
69
+ function getToolDetail(toolName, args) {
70
+ try {
71
+ const parsed = JSON.parse(args);
72
+ if (toolName === 'Read' && parsed.file_path)
73
+ return parsed.file_path;
74
+ if (toolName === 'Write' && parsed.file_path)
75
+ return parsed.file_path;
76
+ if (toolName === 'Edit' && parsed.file_path)
77
+ return parsed.file_path;
78
+ if (toolName === 'Glob' && parsed.pattern)
79
+ return parsed.pattern;
80
+ if (toolName === 'Grep' && parsed.pattern)
81
+ return parsed.pattern;
82
+ if (toolName === 'Bash' && parsed.command) {
83
+ const cmd = parsed.command;
84
+ return cmd.length > 80 ? `${cmd.slice(0, 80)}...` : cmd;
85
+ }
86
+ if (toolName === 'Task' && parsed.description)
87
+ return parsed.description;
88
+ }
89
+ catch {
90
+ // Not JSON — show truncated raw args
91
+ if (args.length > 0)
92
+ return args.length > 80 ? `${args.slice(0, 80)}...` : args;
93
+ }
94
+ return null;
95
+ }
96
+ function TextRow({ line }) {
97
+ return (_jsxs("div", { className: "hover:bg-muted/50 flex items-start gap-2 px-3 py-1.5 transition-colors", children: [_jsx(Timestamp, { value: line.timestamp }), _jsx(PhaseBadge, { phase: line.phase }), _jsxs("div", { className: "flex min-w-0 flex-1 items-start gap-1.5", children: [_jsx(MessageSquare, { className: "mt-0.5 h-3 w-3 shrink-0 text-blue-500" }), _jsx("span", { className: "text-foreground/80 min-w-0 text-xs leading-relaxed", children: line.message })] })] }));
98
+ }
99
+ function ResultRow({ line }) {
100
+ const { chars } = parseResultMessage(line.message);
101
+ return (_jsxs("div", { className: "hover:bg-muted/50 flex items-start gap-2 px-3 py-1.5 transition-colors", children: [_jsx(Timestamp, { value: line.timestamp }), _jsx(PhaseBadge, { phase: line.phase }), _jsxs("div", { className: "flex min-w-0 flex-1 items-start gap-1.5", children: [_jsx(CheckCircle2, { className: "mt-0.5 h-3 w-3 shrink-0 text-emerald-500" }), _jsxs("span", { className: "text-xs font-medium text-emerald-600 dark:text-emerald-400", children: ["Result: ", chars.toLocaleString(), " chars"] })] })] }));
102
+ }
103
+ function TokensRow({ line }) {
104
+ const { inputTokens, outputTokens } = parseTokensMessage(line.message);
105
+ return (_jsxs("div", { className: "hover:bg-muted/50 flex items-start gap-2 px-3 py-1.5 transition-colors", children: [_jsx(Timestamp, { value: line.timestamp }), _jsx(PhaseBadge, { phase: line.phase }), _jsxs("div", { className: "flex min-w-0 flex-1 items-start gap-1.5", children: [_jsx(Coins, { className: "mt-0.5 h-3 w-3 shrink-0 text-amber-500" }), _jsxs("span", { className: "text-muted-foreground text-xs", children: [_jsx("span", { className: "text-amber-600 dark:text-amber-400", children: inputTokens.toLocaleString() }), ' in / ', _jsx("span", { className: "text-amber-600 dark:text-amber-400", children: outputTokens.toLocaleString() }), ' out'] })] })] }));
106
+ }
107
+ function WorkerRow({ line }) {
108
+ return (_jsxs("div", { className: "hover:bg-muted/50 flex items-start gap-2 bg-zinc-50 px-3 py-1.5 transition-colors dark:bg-zinc-900/50", children: [_jsx(Timestamp, { value: line.timestamp }), _jsxs("div", { className: "flex min-w-0 flex-1 items-start gap-1.5", children: [_jsx(Server, { className: "mt-0.5 h-3 w-3 shrink-0 text-zinc-500" }), _jsx("span", { className: "text-muted-foreground text-xs font-medium", children: line.message })] })] }));
109
+ }
110
+ function InfoRow({ line }) {
111
+ return (_jsxs("div", { className: "hover:bg-muted/50 flex items-start gap-2 px-3 py-1.5 transition-colors", children: [_jsx(Timestamp, { value: line.timestamp }), _jsx(PhaseBadge, { phase: line.phase }), _jsx("span", { className: "text-muted-foreground min-w-0 text-xs", children: line.message })] }));
112
+ }
113
+ function RawRow({ line }) {
114
+ return (_jsx("div", { className: "px-3 py-0.5", children: _jsx("span", { className: "text-muted-foreground/70 font-mono text-[11px] break-all whitespace-pre-wrap", children: line.raw }) }));
115
+ }
@@ -0,0 +1,18 @@
1
+ import type { Meta, StoryObj } from '@storybook/react';
2
+ import { EventLogViewer } from './event-log-viewer.js';
3
+ declare const meta: Meta<typeof EventLogViewer>;
4
+ export default meta;
5
+ type Story = StoryObj<typeof EventLogViewer>;
6
+ /** ToolCalls — various tool call types */
7
+ export declare const ToolCalls: Story;
8
+ /** TextMessages — agent thinking/analysis */
9
+ export declare const TextMessages: Story;
10
+ /** WorkerLifecycle — worker bootstrap and shutdown */
11
+ export declare const WorkerLifecycle: Story;
12
+ /** ResultsAndTokens — completion summaries */
13
+ export declare const ResultsAndTokens: Story;
14
+ /** MixedContent — all event types including raw fallback */
15
+ export declare const MixedContent: Story;
16
+ /** EmptyContent — no content */
17
+ export declare const EmptyContent: Story;
18
+ //# sourceMappingURL=event-log-viewer.stories.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"event-log-viewer.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer-tabs/event-log-viewer.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CAqBrC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,cAAc,CAAC,CAAC;AAsD7C,0CAA0C;AAC1C,eAAO,MAAM,SAAS,EAAE,KAEvB,CAAC;AAEF,6CAA6C;AAC7C,eAAO,MAAM,YAAY,EAAE,KAE1B,CAAC;AAEF,sDAAsD;AACtD,eAAO,MAAM,eAAe,EAAE,KAE7B,CAAC;AAEF,8CAA8C;AAC9C,eAAO,MAAM,gBAAgB,EAAE,KAE9B,CAAC;AAEF,4DAA4D;AAC5D,eAAO,MAAM,YAAY,EAAE,KAE1B,CAAC;AAEF,gCAAgC;AAChC,eAAO,MAAM,YAAY,EAAE,KAE1B,CAAC"}
@@ -0,0 +1,88 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { EventLogViewer } from './event-log-viewer.js';
3
+ const meta = {
4
+ title: 'Drawers/Feature/Tabs/EventLogViewer',
5
+ component: EventLogViewer,
6
+ tags: ['autodocs'],
7
+ parameters: {
8
+ layout: 'fullscreen',
9
+ },
10
+ decorators: [
11
+ (Story) => (_jsx("div", { style: {
12
+ height: '600px',
13
+ width: '480px',
14
+ border: '1px solid var(--color-border)',
15
+ overflow: 'auto',
16
+ }, children: _jsx(Story, {}) })),
17
+ ],
18
+ };
19
+ export default meta;
20
+ /* ---------------------------------------------------------------------------
21
+ * Fixtures
22
+ * ------------------------------------------------------------------------- */
23
+ const toolEvents = `[2026-03-08T10:00:08.234Z] [requirements] [claude-code|claude-sonnet-4-6] [tool] Read {"file_path": "src/main.ts"}
24
+ [2026-03-08T10:00:10.345Z] [requirements] [claude-code|claude-sonnet-4-6] [tool] Glob {"pattern": "src/**/*.ts"}
25
+ [2026-03-08T10:00:12.567Z] [requirements] [claude-code|claude-sonnet-4-6] [tool] Grep {"pattern": "interface.*Auth", "path": "src/"}
26
+ [2026-03-08T10:00:14.789Z] [requirements] [claude-code|claude-sonnet-4-6] [tool] Bash {"command": "find src -name '*.test.ts' | wc -l"}
27
+ [2026-03-08T10:00:16.012Z] [implement] [claude-code|claude-sonnet-4-6] [tool] Write {"file_path": "src/auth/oauth-provider.ts"}
28
+ [2026-03-08T10:00:18.234Z] [implement] [claude-code|claude-sonnet-4-6] [tool] Edit {"file_path": "src/auth/index.ts"}
29
+ [2026-03-08T10:00:20.456Z] [implement] [claude-code|claude-sonnet-4-6] [tool] Task {"description": "Run integration tests"}`;
30
+ const textEvents = `[2026-03-08T10:00:10.345Z] [requirements] [claude-code|claude-sonnet-4-6] [text] Analyzing the codebase structure and identifying key entry points for the authentication module
31
+ [2026-03-08T10:00:18.234Z] [requirements] [claude-code|claude-sonnet-4-6] [text] The project uses a clean architecture pattern with dependency injection
32
+ [2026-03-08T10:02:38.200Z] [plan] [claude-code|claude-sonnet-4-6] [text] Creating implementation plan with TDD approach as required by project conventions
33
+ [2026-03-08T10:05:30.000Z] [implement] [claude-code|claude-sonnet-4-6] [text] All 14 unit tests passing. Moving to integration tests`;
34
+ const workerEvents = `[2026-03-08T10:00:01.000Z] [claude-code|claude-sonnet-4-6] [WORKER] Starting worker — full command:
35
+ [2026-03-08T10:00:01.001Z] [claude-code|claude-sonnet-4-6] [WORKER] feature-agent-worker --feature-id auth-module --run-id run-123
36
+ [2026-03-08T10:00:01.010Z] [claude-code|claude-sonnet-4-6] [WORKER] Initializing container...
37
+ [2026-03-08T10:00:01.050Z] [claude-code|claude-sonnet-4-6] [WORKER] Creating executor from pinned agent type: claude-code
38
+ [2026-03-08T10:00:01.100Z] [claude-code|claude-sonnet-4-6] [WORKER] Updating status to running (PID 54321)...
39
+ [2026-03-08T10:06:00.000Z] [claude-code|claude-sonnet-4-6] [WORKER] Graph invocation completed. Error: none
40
+ [2026-03-08T10:06:00.100Z] [claude-code|claude-sonnet-4-6] [WORKER] Run marked as completed
41
+ [2026-03-08T10:06:00.200Z] [claude-code|claude-sonnet-4-6] [WORKER] Worker completed successfully, exiting.`;
42
+ const resultAndTokenEvents = `[2026-03-08T10:00:45.789Z] [requirements] [claude-code|claude-sonnet-4-6] [result] 8920 chars, session=sess-abc123def456
43
+ [2026-03-08T10:00:45.790Z] [requirements] [claude-code|claude-sonnet-4-6] [tokens] 2450 in / 4560 out
44
+ [2026-03-08T10:03:15.234Z] [plan] [claude-code|claude-sonnet-4-6] [result] 12345 chars, session=sess-abc123def456
45
+ [2026-03-08T10:03:15.235Z] [plan] [claude-code|claude-sonnet-4-6] [tokens] 8900 in / 3456 out
46
+ [2026-03-08T10:05:55.000Z] [implement] [claude-code|claude-sonnet-4-6] [result] 24560 chars, session=sess-abc123def456
47
+ [2026-03-08T10:05:55.001Z] [implement] [claude-code|claude-sonnet-4-6] [tokens] 15200 in / 9360 out`;
48
+ const mixedContent = `[2026-03-08T10:00:01.000Z] [claude-code|claude-sonnet-4-6] [WORKER] Starting worker — full command:
49
+ [2026-03-08T10:00:01.010Z] [claude-code|claude-sonnet-4-6] [WORKER] Initializing container...
50
+ [2026-03-08T10:00:05.000Z] [requirements] [claude-code|claude-sonnet-4-6] Starting...
51
+ [2026-03-08T10:00:08.234Z] [requirements] [claude-code|claude-sonnet-4-6] [tool] Read {"file_path": "src/main.ts"}
52
+ [2026-03-08T10:00:10.345Z] [requirements] [claude-code|claude-sonnet-4-6] [text] Analyzing the codebase structure
53
+ [2026-03-08T10:00:12.567Z] [requirements] [claude-code|claude-sonnet-4-6] [tool] Bash {"command": "pnpm test:unit"}
54
+ [2026-03-08T10:00:45.789Z] [requirements] [claude-code|claude-sonnet-4-6] [result] 8920 chars, session=sess-abc123
55
+ [2026-03-08T10:00:45.790Z] [requirements] [claude-code|claude-sonnet-4-6] [tokens] 2450 in / 4560 out
56
+ Some unstructured output that doesn't match the format
57
+ Another raw line from stderr
58
+ [2026-03-08T10:02:30.100Z] [plan] [claude-code|claude-sonnet-4-6] Starting...
59
+ [2026-03-08T10:02:35.100Z] [plan] [claude-code|claude-sonnet-4-6] [tool] Write {"file_path": "specs/001-auth/plan.yaml"}
60
+ [2026-03-08T10:03:15.234Z] [plan] [claude-code|claude-sonnet-4-6] [result] 12345 chars, session=sess-abc123
61
+ [2026-03-08T10:03:15.235Z] [plan] [claude-code|claude-sonnet-4-6] [tokens] 8900 in / 3456 out`;
62
+ /* ---------------------------------------------------------------------------
63
+ * Stories
64
+ * ------------------------------------------------------------------------- */
65
+ /** ToolCalls — various tool call types */
66
+ export const ToolCalls = {
67
+ args: { content: toolEvents },
68
+ };
69
+ /** TextMessages — agent thinking/analysis */
70
+ export const TextMessages = {
71
+ args: { content: textEvents },
72
+ };
73
+ /** WorkerLifecycle — worker bootstrap and shutdown */
74
+ export const WorkerLifecycle = {
75
+ args: { content: workerEvents },
76
+ };
77
+ /** ResultsAndTokens — completion summaries */
78
+ export const ResultsAndTokens = {
79
+ args: { content: resultAndTokenEvents },
80
+ };
81
+ /** MixedContent — all event types including raw fallback */
82
+ export const MixedContent = {
83
+ args: { content: mixedContent },
84
+ };
85
+ /** EmptyContent — no content */
86
+ export const EmptyContent = {
87
+ args: { content: '' },
88
+ };
@@ -1 +1 @@
1
- {"version":3,"file":"log-tab.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer-tabs/log-tab.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,OAAO,CAAC;IACrB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED,wBAAgB,MAAM,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,WAAW,2CA6ElE"}
1
+ {"version":3,"file":"log-tab.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer-tabs/log-tab.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,OAAO,CAAC;IACrB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAID,wBAAgB,MAAM,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,WAAW,2CAgHlE"}
@@ -1,10 +1,12 @@
1
1
  'use client';
2
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
3
  import { useRef, useEffect, useState, useCallback } from 'react';
4
- import { AlertCircle, Terminal, ArrowDown } from 'lucide-react';
4
+ import { AlertCircle, Terminal, ArrowDown, Code, FileText } from 'lucide-react';
5
+ import { EventLogViewer } from './event-log-viewer.js';
5
6
  export function LogTab({ content, isConnected, error }) {
6
7
  const containerRef = useRef(null);
7
8
  const [autoScroll, setAutoScroll] = useState(true);
9
+ const [viewMode, setViewMode] = useState('structured');
8
10
  const handleScroll = useCallback(() => {
9
11
  const el = containerRef.current;
10
12
  if (!el)
@@ -31,5 +33,11 @@ export function LogTab({ content, isConnected, error }) {
31
33
  if (!content) {
32
34
  return (_jsxs("div", { className: "flex flex-col items-center justify-center gap-2 p-8", children: [_jsx(Terminal, { className: "text-muted-foreground h-8 w-8" }), _jsx("p", { className: "text-muted-foreground text-sm", children: "No log output yet" }), isConnected ? (_jsx("p", { className: "text-muted-foreground text-xs", children: "Waiting for log data..." })) : null] }));
33
35
  }
34
- return (_jsxs("div", { className: "flex h-full flex-col", "data-testid": "log-tab", children: [_jsxs("div", { className: "flex items-center gap-2 border-b px-3 py-1.5", children: [_jsx("span", { className: `h-2 w-2 rounded-full ${isConnected ? 'bg-emerald-500' : 'bg-zinc-400'}` }), _jsx("span", { className: "text-muted-foreground text-xs", children: isConnected ? 'Live' : 'Disconnected' }), !autoScroll ? (_jsxs("button", { type: "button", onClick: jumpToBottom, className: "text-muted-foreground hover:text-foreground ml-auto flex items-center gap-1 text-xs", children: [_jsx(ArrowDown, { className: "h-3 w-3" }), "Jump to bottom"] })) : null] }), _jsx("div", { ref: containerRef, onScroll: handleScroll, className: "flex-1 overflow-y-auto bg-zinc-950 p-3 font-mono text-xs leading-relaxed break-all whitespace-pre-wrap text-zinc-300", children: content })] }));
36
+ return (_jsxs("div", { className: "flex h-full flex-col", "data-testid": "log-tab", children: [_jsxs("div", { className: "flex items-center gap-2 border-b px-3 py-1.5", children: [_jsx("span", { className: `h-2 w-2 rounded-full ${isConnected ? 'bg-emerald-500' : 'bg-zinc-400'}` }), _jsx("span", { className: "text-muted-foreground text-xs", children: isConnected ? 'Live' : 'Disconnected' }), _jsxs("div", { className: "ml-auto flex items-center gap-1", children: [_jsx("button", { type: "button", onClick: () => setViewMode('structured'), className: `rounded p-1 transition-colors ${viewMode === 'structured'
37
+ ? 'bg-muted text-foreground'
38
+ : 'text-muted-foreground hover:text-foreground'}`, title: "Structured view", children: _jsx(FileText, { className: "h-3.5 w-3.5" }) }), _jsx("button", { type: "button", onClick: () => setViewMode('raw'), className: `rounded p-1 transition-colors ${viewMode === 'raw'
39
+ ? 'bg-muted text-foreground'
40
+ : 'text-muted-foreground hover:text-foreground'}`, title: "Raw view", children: _jsx(Code, { className: "h-3.5 w-3.5" }) }), !autoScroll ? (_jsxs("button", { type: "button", onClick: jumpToBottom, className: "text-muted-foreground hover:text-foreground ml-1 flex items-center gap-1 text-xs", children: [_jsx(ArrowDown, { className: "h-3 w-3" }), "Jump to bottom"] })) : null] })] }), _jsx("div", { ref: containerRef, onScroll: handleScroll, className: `flex-1 overflow-y-auto ${viewMode === 'raw'
41
+ ? 'bg-zinc-950 p-3 font-mono text-xs leading-relaxed break-all whitespace-pre-wrap text-zinc-300'
42
+ : 'bg-background'}`, children: viewMode === 'structured' ? _jsx(EventLogViewer, { content: content }) : content })] }));
35
43
  }
@@ -3,10 +3,12 @@ import { LogTab } from './log-tab.js';
3
3
  declare const meta: Meta<typeof LogTab>;
4
4
  export default meta;
5
5
  type Story = StoryObj<typeof LogTab>;
6
- /** Default — typical agent log output with live connection. */
6
+ /** Default — structured agent log output with live connection (claude-code). */
7
7
  export declare const Default: Story;
8
- /** LongLog200 lines of log output to test scrolling behavior. */
9
- export declare const LongLog: Story;
8
+ /** LongStructured100 structured events to test scrolling behavior. */
9
+ export declare const LongStructured: Story;
10
+ /** RawFallback — unstructured log content falls back gracefully. */
11
+ export declare const RawFallback: Story;
10
12
  /** Disconnected — log content present but connection is lost. */
11
13
  export declare const Disconnected: Story;
12
14
  /** Empty — no log content yet, connected and waiting. */
@@ -1 +1 @@
1
- {"version":3,"file":"log-tab.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer-tabs/log-tab.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAEnC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAc7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAqCrC,+DAA+D;AAC/D,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,oEAAoE;AACpE,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,iEAAiE;AACjE,eAAO,MAAM,YAAY,EAAE,KAM1B,CAAC;AAEF,yDAAyD;AACzD,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,4DAA4D;AAC5D,eAAO,MAAM,iBAAiB,EAAE,KAM/B,CAAC;AAEF,6DAA6D;AAC7D,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC"}
1
+ {"version":3,"file":"log-tab.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer-tabs/log-tab.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAEnC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAc7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AA6GrC,gFAAgF;AAChF,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,yEAAyE;AACzE,eAAO,MAAM,cAAc,EAAE,KAM5B,CAAC;AAEF,oEAAoE;AACpE,eAAO,MAAM,WAAW,EAAE,KAMzB,CAAC;AAEF,iEAAiE;AACjE,eAAO,MAAM,YAAY,EAAE,KAM1B,CAAC;AAEF,yDAAyD;AACzD,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,4DAA4D;AAC5D,eAAO,MAAM,iBAAiB,EAAE,KAM/B,CAAC;AAEF,6DAA6D;AAC7D,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC"}
@@ -8,14 +8,61 @@ const meta = {
8
8
  layout: 'fullscreen',
9
9
  },
10
10
  decorators: [
11
- (Story) => (_jsx("div", { style: { height: '600px', width: '400px', border: '1px solid var(--color-border)' }, children: _jsx(Story, {}) })),
11
+ (Story) => (_jsx("div", { style: { height: '600px', width: '480px', border: '1px solid var(--color-border)' }, children: _jsx(Story, {}) })),
12
12
  ],
13
13
  };
14
14
  export default meta;
15
15
  /* ---------------------------------------------------------------------------
16
16
  * Data fixtures
17
17
  * ------------------------------------------------------------------------- */
18
- const typicalLogContent = `[2026-03-08T10:00:01.123Z] Starting agent run for feature "auth-module"
18
+ const structuredLogContent = `[2026-03-08T10:00:01.000Z] [claude-code|claude-sonnet-4-6] [WORKER] Starting worker full command:
19
+ [2026-03-08T10:00:01.001Z] [claude-code|claude-sonnet-4-6] [WORKER] feature-agent-worker --feature-id auth-module --run-id run-123 --repo /home/user/myproject --agent-type claude-code --model claude-sonnet-4-6
20
+ [2026-03-08T10:00:01.010Z] [claude-code|claude-sonnet-4-6] [WORKER] Initializing container...
21
+ [2026-03-08T10:00:01.050Z] [claude-code|claude-sonnet-4-6] [WORKER] Creating executor from pinned agent type: claude-code
22
+ [2026-03-08T10:00:01.100Z] [claude-code|claude-sonnet-4-6] [WORKER] Updating status to running (PID 54321)...
23
+ [2026-03-08T10:00:01.110Z] [claude-code|claude-sonnet-4-6] [WORKER] Starting graph invocation...
24
+ [2026-03-08T10:00:05.000Z] [requirements] [claude-code|claude-sonnet-4-6] Starting...
25
+ [2026-03-08T10:00:05.010Z] [requirements] [claude-code|claude-sonnet-4-6] Executing agent at cwd=/home/user/myproject
26
+ [2026-03-08T10:00:05.020Z] [requirements] [claude-code|claude-sonnet-4-6] Prompt length: 2847 chars
27
+ [2026-03-08T10:00:05.100Z] [requirements] [claude-code|claude-sonnet-4-6] Spawning: claude -p "Analyze this project..." --output-format stream-json --verbose
28
+ [2026-03-08T10:00:05.102Z] [requirements] [claude-code|claude-sonnet-4-6] Subprocess PID: 54322
29
+ [2026-03-08T10:00:08.234Z] [requirements] [claude-code|claude-sonnet-4-6] [tool] Read {"file_path": "src/main.ts"}
30
+ [2026-03-08T10:00:10.345Z] [requirements] [claude-code|claude-sonnet-4-6] [text] Analyzing the codebase structure and identifying key entry points for the authentication module
31
+ [2026-03-08T10:00:12.567Z] [requirements] [claude-code|claude-sonnet-4-6] [tool] Glob {"pattern": "src/**/*.ts"}
32
+ [2026-03-08T10:00:14.789Z] [requirements] [claude-code|claude-sonnet-4-6] [tool] Read {"file_path": "src/auth/providers.ts"}
33
+ [2026-03-08T10:00:16.012Z] [requirements] [claude-code|claude-sonnet-4-6] [tool] Grep {"pattern": "interface.*Auth", "path": "src/"}
34
+ [2026-03-08T10:00:18.234Z] [requirements] [claude-code|claude-sonnet-4-6] [text] The project uses a clean architecture pattern with dependency injection. I can see the auth interfaces are defined in the domain layer
35
+ [2026-03-08T10:00:20.456Z] [requirements] [claude-code|claude-sonnet-4-6] [tool] Bash {"command": "find src -name '*.test.ts' | wc -l"}
36
+ [2026-03-08T10:00:45.789Z] [requirements] [claude-code|claude-sonnet-4-6] [result] 8920 chars, session=sess-abc123def456
37
+ [2026-03-08T10:00:45.790Z] [requirements] [claude-code|claude-sonnet-4-6] [tokens] 2450 in / 4560 out
38
+ [2026-03-08T10:00:45.791Z] [requirements] [claude-code|claude-sonnet-4-6] Process closed with code 0, result=8920 chars
39
+ [2026-03-08T10:00:45.800Z] [requirements] [claude-code|claude-sonnet-4-6] Complete (8920 chars, 40.8s)
40
+ [2026-03-08T10:00:45.900Z] [requirements] [claude-code|claude-sonnet-4-6] Interrupting for human approval
41
+ [2026-03-08T10:02:30.000Z] [requirements] [claude-code|claude-sonnet-4-6] Phase approved, skipping re-execution
42
+ [2026-03-08T10:02:30.100Z] [plan] [claude-code|claude-sonnet-4-6] Starting...
43
+ [2026-03-08T10:02:30.110Z] [plan] [claude-code|claude-sonnet-4-6] Executing agent at cwd=/home/user/myproject
44
+ [2026-03-08T10:02:30.120Z] [plan] [claude-code|claude-sonnet-4-6] Prompt length: 15234 chars
45
+ [2026-03-08T10:02:35.100Z] [plan] [claude-code|claude-sonnet-4-6] [tool] Read {"file_path": "CLAUDE.md"}
46
+ [2026-03-08T10:02:38.200Z] [plan] [claude-code|claude-sonnet-4-6] [text] Creating implementation plan with TDD approach as required by project conventions
47
+ [2026-03-08T10:02:42.300Z] [plan] [claude-code|claude-sonnet-4-6] [tool] Write {"file_path": "specs/001-auth/plan.yaml"}
48
+ [2026-03-08T10:02:45.400Z] [plan] [claude-code|claude-sonnet-4-6] [text] Plan includes 3 phases: scaffold auth module, implement OAuth2 providers, add tests and documentation
49
+ [2026-03-08T10:03:15.234Z] [plan] [claude-code|claude-sonnet-4-6] [result] 12345 chars, session=sess-abc123def456
50
+ [2026-03-08T10:03:15.235Z] [plan] [claude-code|claude-sonnet-4-6] [tokens] 8900 in / 3456 out
51
+ [2026-03-08T10:03:15.300Z] [plan] [claude-code|claude-sonnet-4-6] Complete (12345 chars, 45.1s)
52
+ [2026-03-08T10:05:00.000Z] [implement] [claude-code|claude-sonnet-4-6] Starting...
53
+ [2026-03-08T10:05:01.000Z] [implement] [claude-code|claude-sonnet-4-6] [tool] Write {"file_path": "src/auth/oauth-provider.ts"}
54
+ [2026-03-08T10:05:03.000Z] [implement] [claude-code|claude-sonnet-4-6] [tool] Write {"file_path": "src/auth/token-manager.ts"}
55
+ [2026-03-08T10:05:05.000Z] [implement] [claude-code|claude-sonnet-4-6] [tool] Edit {"file_path": "src/auth/index.ts"}
56
+ [2026-03-08T10:05:07.000Z] [implement] [claude-code|claude-sonnet-4-6] [tool] Bash {"command": "pnpm test:unit"}
57
+ [2026-03-08T10:05:30.000Z] [implement] [claude-code|claude-sonnet-4-6] [text] All 14 unit tests passing. Moving to integration tests
58
+ [2026-03-08T10:05:35.000Z] [implement] [claude-code|claude-sonnet-4-6] [tool] Bash {"command": "pnpm test:int"}
59
+ [2026-03-08T10:05:55.000Z] [implement] [claude-code|claude-sonnet-4-6] [result] 24560 chars, session=sess-abc123def456
60
+ [2026-03-08T10:05:55.001Z] [implement] [claude-code|claude-sonnet-4-6] [tokens] 15200 in / 9360 out
61
+ [2026-03-08T10:05:55.100Z] [implement] [claude-code|claude-sonnet-4-6] Complete (24560 chars, 54.1s)
62
+ [2026-03-08T10:06:00.000Z] [claude-code|claude-sonnet-4-6] [WORKER] Graph invocation completed. Error: none
63
+ [2026-03-08T10:06:00.100Z] [claude-code|claude-sonnet-4-6] [WORKER] Run marked as completed
64
+ [2026-03-08T10:06:00.200Z] [claude-code|claude-sonnet-4-6] [WORKER] Worker completed successfully, exiting.`;
65
+ const rawLogContent = `[2026-03-08T10:00:01.123Z] Starting agent run for feature "auth-module"
19
66
  [2026-03-08T10:00:02.789Z] Agent started — analyzing codebase
20
67
  [2026-03-08T10:00:03.456Z] Scanning repository structure...
21
68
  [2026-03-08T10:00:04.012Z] Found 127 source files across 14 packages
@@ -35,22 +82,58 @@ const typicalLogContent = `[2026-03-08T10:00:01.123Z] Starting agent run for fea
35
82
  [2026-03-08T10:00:24.789Z] Phase 3: add tests and documentation
36
83
  [2026-03-08T10:00:26.456Z] Generating test suite...
37
84
  [2026-03-08T10:00:28.012Z] All phases complete — feature "auth-module" ready for review`;
38
- const longLogContent = Array.from({ length: 200 }, (_, i) => `[2026-03-08T10:${String(Math.floor(i / 60)).padStart(2, '0')}:${String(i % 60).padStart(2, '0')}.${String((i * 7) % 1000).padStart(3, '0')}Z] Step ${i + 1}: processing task batch ${Math.floor(i / 10) + 1} — file ${i + 1} of 200`).join('\n');
85
+ const longStructuredContent = Array.from({ length: 100 }, (_, i) => {
86
+ const min = String(Math.floor(i / 60)).padStart(2, '0');
87
+ const sec = String(i % 60).padStart(2, '0');
88
+ const ms = String((i * 7) % 1000).padStart(3, '0');
89
+ const ts = `2026-03-08T10:${min}:${sec}.${ms}Z`;
90
+ const phase = ['requirements', 'research', 'plan', 'implement'][i % 4];
91
+ const tags = ['[tool]', '[text]', '[tool]', '[text]', '[result]', '[tokens]'];
92
+ const tag = tags[i % tags.length];
93
+ const messages = {
94
+ '[tool]': [
95
+ 'Read {"file_path": "src/components/button.tsx"}',
96
+ 'Bash {"command": "pnpm test:unit"}',
97
+ 'Grep {"pattern": "export function", "path": "src/"}',
98
+ 'Write {"file_path": "src/new-file.ts"}',
99
+ 'Glob {"pattern": "**/*.test.ts"}',
100
+ ],
101
+ '[text]': [
102
+ 'Analyzing the component structure for potential improvements',
103
+ 'The test suite is comprehensive with good coverage',
104
+ 'Implementing the authentication flow with OAuth2 providers',
105
+ 'Refactoring to use dependency injection pattern',
106
+ ],
107
+ '[result]': ['4520 chars, session=sess-xyz789'],
108
+ '[tokens]': ['3200 in / 1800 out'],
109
+ };
110
+ const msgList = messages[tag] ?? messages['[text]'];
111
+ const msg = msgList[i % msgList.length];
112
+ return `[${ts}] [${phase}] [claude-code|claude-sonnet-4-6] ${tag} ${msg}`;
113
+ }).join('\n');
39
114
  /* ---------------------------------------------------------------------------
40
115
  * Stories
41
116
  * ------------------------------------------------------------------------- */
42
- /** Default — typical agent log output with live connection. */
117
+ /** Default — structured agent log output with live connection (claude-code). */
43
118
  export const Default = {
44
119
  args: {
45
- content: typicalLogContent,
120
+ content: structuredLogContent,
46
121
  isConnected: true,
47
122
  error: null,
48
123
  },
49
124
  };
50
- /** LongLog200 lines of log output to test scrolling behavior. */
51
- export const LongLog = {
125
+ /** LongStructured100 structured events to test scrolling behavior. */
126
+ export const LongStructured = {
52
127
  args: {
53
- content: longLogContent,
128
+ content: longStructuredContent,
129
+ isConnected: true,
130
+ error: null,
131
+ },
132
+ };
133
+ /** RawFallback — unstructured log content falls back gracefully. */
134
+ export const RawFallback = {
135
+ args: {
136
+ content: rawLogContent,
54
137
  isConnected: true,
55
138
  error: null,
56
139
  },
@@ -58,7 +141,7 @@ export const LongLog = {
58
141
  /** Disconnected — log content present but connection is lost. */
59
142
  export const Disconnected = {
60
143
  args: {
61
- content: typicalLogContent,
144
+ content: structuredLogContent,
62
145
  isConnected: false,
63
146
  error: null,
64
147
  },
@@ -0,0 +1,49 @@
1
+ /**
2
+ * Parses structured log lines from the feature agent worker process.
3
+ *
4
+ * Log format: [timestamp] [phase] [agent|model] [tag] message
5
+ * Worker format: [timestamp] [agent|model] [WORKER] message
6
+ * Fallback: raw string lines
7
+ */
8
+ export type LogEventTag = 'tool' | 'text' | 'result' | 'tokens' | 'raw' | 'worker' | 'info';
9
+ export interface ParsedLogLine {
10
+ /** ISO timestamp */
11
+ timestamp: string | null;
12
+ /** Phase name (e.g. "requirements", "implement") */
13
+ phase: string | null;
14
+ /** Agent type (e.g. "claude-code") */
15
+ agent: string | null;
16
+ /** Model name (e.g. "claude-haiku-4-5") */
17
+ model: string | null;
18
+ /** Event tag */
19
+ tag: LogEventTag;
20
+ /** The message content after tags */
21
+ message: string;
22
+ /** Original raw line */
23
+ raw: string;
24
+ }
25
+ export declare function parseLogLine(raw: string): ParsedLogLine;
26
+ /** Tool call info extracted from [tool] messages */
27
+ export interface ToolCallInfo {
28
+ toolName: string;
29
+ args: string;
30
+ }
31
+ /** Parse a [tool] message into tool name and args */
32
+ export declare function parseToolCall(message: string): ToolCallInfo;
33
+ /** Result info extracted from [result] messages */
34
+ export interface ResultInfo {
35
+ chars: number;
36
+ sessionId: string | null;
37
+ }
38
+ /** Parse a [result] message */
39
+ export declare function parseResultMessage(message: string): ResultInfo;
40
+ /** Token info extracted from [tokens] messages */
41
+ export interface TokenInfo {
42
+ inputTokens: number;
43
+ outputTokens: number;
44
+ }
45
+ /** Parse a [tokens] message */
46
+ export declare function parseTokensMessage(message: string): TokenInfo;
47
+ /** Parse all lines from raw content string */
48
+ export declare function parseLogContent(content: string): ParsedLogLine[];
49
+ //# sourceMappingURL=parse-log-line.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"parse-log-line.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/lib/parse-log-line.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE5F,MAAM,WAAW,aAAa;IAC5B,oBAAoB;IACpB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,oDAAoD;IACpD,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,sCAAsC;IACtC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,2CAA2C;IAC3C,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,gBAAgB;IAChB,GAAG,EAAE,WAAW,CAAC;IACjB,qCAAqC;IACrC,OAAO,EAAE,MAAM,CAAC;IAChB,wBAAwB;IACxB,GAAG,EAAE,MAAM,CAAC;CACb;AAgBD,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,aAAa,CAwEvD;AAED,oDAAoD;AACpD,MAAM,WAAW,YAAY;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,qDAAqD;AACrD,wBAAgB,aAAa,CAAC,OAAO,EAAE,MAAM,GAAG,YAAY,CAS3D;AAED,mDAAmD;AACnD,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B;AAED,+BAA+B;AAC/B,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,MAAM,GAAG,UAAU,CAO9D;AAED,kDAAkD;AAClD,MAAM,WAAW,SAAS;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,+BAA+B;AAC/B,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,MAAM,GAAG,SAAS,CAO7D;AAED,8CAA8C;AAC9C,wBAAgB,eAAe,CAAC,OAAO,EAAE,MAAM,GAAG,aAAa,EAAE,CAMhE"}
@@ -0,0 +1,126 @@
1
+ /**
2
+ * Parses structured log lines from the feature agent worker process.
3
+ *
4
+ * Log format: [timestamp] [phase] [agent|model] [tag] message
5
+ * Worker format: [timestamp] [agent|model] [WORKER] message
6
+ * Fallback: raw string lines
7
+ */
8
+ /**
9
+ * Regex to match structured log lines.
10
+ * Captures: timestamp, optional phase, optional agent|model, rest of message
11
+ *
12
+ * Examples:
13
+ * [2026-03-08T10:00:01.123Z] [requirements] [claude-code|claude-haiku-4-5] [tool] Read {"path":"f.ts"}
14
+ * [2026-03-08T10:00:01.123Z] [claude-code|claude-haiku-4-5] [WORKER] Starting worker
15
+ * [2026-03-08T10:00:01.123Z] [requirements] [claude-code|claude-haiku-4-5] Starting...
16
+ */
17
+ const LOG_LINE_REGEX = /^\[(\d{4}-\d{2}-\d{2}T[\d:.]+Z?)\]\s+(?:\[([^\]]+)\]\s+)?(?:\[([^\]|]+)(?:\|([^\]]+))?\]\s+)?(.*)$/;
18
+ const TAG_REGEX = /^\[(tool|text|result|tokens|raw|WORKER)\]\s*(.*)/;
19
+ export function parseLogLine(raw) {
20
+ const match = raw.match(LOG_LINE_REGEX);
21
+ if (!match) {
22
+ return {
23
+ timestamp: null,
24
+ phase: null,
25
+ agent: null,
26
+ model: null,
27
+ tag: 'raw',
28
+ message: raw,
29
+ raw,
30
+ };
31
+ }
32
+ const [, timestamp, group1, group2, group3, rest] = match;
33
+ // Determine phase, agent, model from the captured groups.
34
+ // The log format can be:
35
+ // [ts] [phase] [agent|model] message → group1=phase, group2=agent, group3=model
36
+ // [ts] [agent|model] [WORKER] message → group1="agent|model", group2=WORKER
37
+ // [ts] [phase] [agent] message → group1=phase, group2=agent
38
+ // [ts] [phase] message → group1=phase only
39
+ let phase = null;
40
+ let agent = null;
41
+ let model = null;
42
+ let message = rest ?? '';
43
+ if (group2 != null && group1 != null) {
44
+ // Two bracket groups captured
45
+ if (group1.includes('|')) {
46
+ // group1 is [agent|model], group2 is next tag (e.g. WORKER)
47
+ const [agentPart, modelPart] = group1.split('|');
48
+ agent = agentPart;
49
+ model = modelPart ?? null;
50
+ // group2 becomes part of the message to be parsed as a tag
51
+ message = `[${group2}] ${rest ?? ''}`;
52
+ }
53
+ else {
54
+ // group1 is [phase], group2|group3 is [agent|model]
55
+ phase = group1;
56
+ agent = group2;
57
+ model = group3 ?? null;
58
+ }
59
+ }
60
+ else if (group1 != null) {
61
+ // Only one bracket group
62
+ if (group1.includes('|')) {
63
+ const [agentPart, modelPart] = group1.split('|');
64
+ agent = agentPart;
65
+ model = modelPart ?? null;
66
+ }
67
+ else {
68
+ phase = group1;
69
+ }
70
+ }
71
+ // Parse tag from message
72
+ const tagMatch = message.match(TAG_REGEX);
73
+ let tag = 'info';
74
+ if (tagMatch) {
75
+ tag = tagMatch[1].toLowerCase();
76
+ message = tagMatch[2];
77
+ }
78
+ return {
79
+ timestamp: timestamp ?? null,
80
+ phase,
81
+ agent,
82
+ model,
83
+ tag,
84
+ message: message.trim(),
85
+ raw,
86
+ };
87
+ }
88
+ /** Parse a [tool] message into tool name and args */
89
+ export function parseToolCall(message) {
90
+ const spaceIdx = message.indexOf(' ');
91
+ if (spaceIdx === -1) {
92
+ return { toolName: message, args: '' };
93
+ }
94
+ return {
95
+ toolName: message.slice(0, spaceIdx),
96
+ args: message.slice(spaceIdx + 1),
97
+ };
98
+ }
99
+ /** Parse a [result] message */
100
+ export function parseResultMessage(message) {
101
+ const charsMatch = message.match(/^(\d+)\s+chars/);
102
+ const sessionMatch = message.match(/session=(\S+)/);
103
+ return {
104
+ chars: charsMatch ? parseInt(charsMatch[1], 10) : 0,
105
+ sessionId: sessionMatch ? sessionMatch[1] : null,
106
+ };
107
+ }
108
+ /** Parse a [tokens] message */
109
+ export function parseTokensMessage(message) {
110
+ const match = message.match(/^(\d+)\s+in\s*\/\s*(\d+)\s+out/);
111
+ if (!match)
112
+ return { inputTokens: 0, outputTokens: 0 };
113
+ return {
114
+ inputTokens: parseInt(match[1], 10),
115
+ outputTokens: parseInt(match[2], 10),
116
+ };
117
+ }
118
+ /** Parse all lines from raw content string */
119
+ export function parseLogContent(content) {
120
+ if (!content)
121
+ return [];
122
+ return content
123
+ .split('\n')
124
+ .filter((line) => line.trim().length > 0)
125
+ .map(parseLogLine);
126
+ }