@shepai/cli 1.112.1 → 1.113.0-pr309.5f74d64
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.
- package/dist/packages/core/src/application/use-cases/agents/approve-agent-run.use-case.d.ts.map +1 -1
- package/dist/packages/core/src/application/use-cases/agents/approve-agent-run.use-case.js +1 -0
- package/dist/packages/core/src/application/use-cases/agents/reject-agent-run.use-case.d.ts.map +1 -1
- package/dist/packages/core/src/application/use-cases/agents/reject-agent-run.use-case.js +1 -0
- package/dist/packages/core/src/infrastructure/services/agents/feature-agent/feature-agent-worker.d.ts.map +1 -1
- package/dist/packages/core/src/infrastructure/services/agents/feature-agent/feature-agent-worker.js +5 -0
- package/dist/packages/core/src/infrastructure/services/agents/feature-agent/nodes/merge/merge.node.d.ts.map +1 -1
- package/dist/packages/core/src/infrastructure/services/agents/feature-agent/nodes/merge/merge.node.js +1 -0
- package/dist/packages/core/src/infrastructure/services/agents/feature-agent/nodes/prompts/fast-implement.prompt.d.ts.map +1 -1
- package/dist/packages/core/src/infrastructure/services/agents/feature-agent/nodes/prompts/fast-implement.prompt.js +42 -2
- package/dist/src/presentation/web/app/(dashboard)/@drawer/create/page.d.ts.map +1 -1
- package/dist/src/presentation/web/app/(dashboard)/@drawer/create/page.js +9 -2
- package/dist/src/presentation/web/components/common/control-center-drawer/create-drawer-client.d.ts +3 -1
- package/dist/src/presentation/web/components/common/control-center-drawer/create-drawer-client.d.ts.map +1 -1
- package/dist/src/presentation/web/components/common/control-center-drawer/create-drawer-client.js +2 -2
- package/dist/src/presentation/web/components/common/feature-create-drawer/feature-create-drawer.d.ts +17 -1
- package/dist/src/presentation/web/components/common/feature-create-drawer/feature-create-drawer.d.ts.map +1 -1
- package/dist/src/presentation/web/components/common/feature-create-drawer/feature-create-drawer.js +96 -5
- package/dist/src/presentation/web/components/common/feature-create-drawer/feature-create-drawer.stories.d.ts +11 -0
- package/dist/src/presentation/web/components/common/feature-create-drawer/feature-create-drawer.stories.d.ts.map +1 -1
- package/dist/src/presentation/web/components/common/feature-create-drawer/feature-create-drawer.stories.js +51 -0
- package/dist/src/presentation/web/components/common/feature-create-drawer/index.d.ts +1 -1
- package/dist/src/presentation/web/components/common/feature-create-drawer/index.d.ts.map +1 -1
- package/dist/src/presentation/web/components/common/feature-create-drawer/index.js +1 -1
- package/dist/src/presentation/web/components/common/feature-create-drawer/repository-combobox.stories.d.ts +14 -0
- package/dist/src/presentation/web/components/common/feature-create-drawer/repository-combobox.stories.d.ts.map +1 -0
- package/dist/src/presentation/web/components/common/feature-create-drawer/repository-combobox.stories.js +42 -0
- package/dist/src/presentation/web/components/common/feature-drawer-tabs/event-log-viewer.d.ts +5 -0
- package/dist/src/presentation/web/components/common/feature-drawer-tabs/event-log-viewer.d.ts.map +1 -0
- package/dist/src/presentation/web/components/common/feature-drawer-tabs/event-log-viewer.js +113 -0
- package/dist/src/presentation/web/components/common/feature-drawer-tabs/event-log-viewer.stories.d.ts +18 -0
- package/dist/src/presentation/web/components/common/feature-drawer-tabs/event-log-viewer.stories.d.ts.map +1 -0
- package/dist/src/presentation/web/components/common/feature-drawer-tabs/event-log-viewer.stories.js +88 -0
- package/dist/src/presentation/web/components/common/feature-drawer-tabs/log-tab.d.ts.map +1 -1
- package/dist/src/presentation/web/components/common/feature-drawer-tabs/log-tab.js +10 -2
- package/dist/src/presentation/web/components/common/feature-drawer-tabs/log-tab.stories.d.ts +5 -3
- package/dist/src/presentation/web/components/common/feature-drawer-tabs/log-tab.stories.d.ts.map +1 -1
- package/dist/src/presentation/web/components/common/feature-drawer-tabs/log-tab.stories.js +92 -9
- package/dist/src/presentation/web/components/common/floating-action-button/floating-action-button.d.ts +22 -0
- package/dist/src/presentation/web/components/common/floating-action-button/floating-action-button.d.ts.map +1 -0
- package/dist/src/presentation/web/components/common/floating-action-button/floating-action-button.js +43 -0
- package/dist/src/presentation/web/components/common/floating-action-button/floating-action-button.stories.d.ts +10 -0
- package/dist/src/presentation/web/components/common/floating-action-button/floating-action-button.stories.d.ts.map +1 -0
- package/dist/src/presentation/web/components/common/floating-action-button/floating-action-button.stories.js +63 -0
- package/dist/src/presentation/web/components/common/floating-action-button/index.d.ts +3 -0
- package/dist/src/presentation/web/components/common/floating-action-button/index.d.ts.map +1 -0
- package/dist/src/presentation/web/components/common/floating-action-button/index.js +1 -0
- package/dist/src/presentation/web/components/common/index.d.ts +1 -0
- package/dist/src/presentation/web/components/common/index.d.ts.map +1 -1
- package/dist/src/presentation/web/components/common/index.js +1 -0
- package/dist/src/presentation/web/components/features/control-center/control-center-inner.d.ts.map +1 -1
- package/dist/src/presentation/web/components/layouts/app-shell/app-shell.d.ts.map +1 -1
- package/dist/src/presentation/web/components/layouts/app-shell/app-shell.js +35 -6
- package/dist/src/presentation/web/components/layouts/app-sidebar/app-sidebar.d.ts +1 -4
- package/dist/src/presentation/web/components/layouts/app-sidebar/app-sidebar.d.ts.map +1 -1
- package/dist/src/presentation/web/components/layouts/app-sidebar/app-sidebar.js +4 -4
- package/dist/src/presentation/web/components/layouts/app-sidebar/app-sidebar.stories.d.ts.map +1 -1
- package/dist/src/presentation/web/components/layouts/app-sidebar/app-sidebar.stories.js +0 -1
- package/dist/src/presentation/web/lib/parse-log-line.d.ts +49 -0
- package/dist/src/presentation/web/lib/parse-log-line.d.ts.map +1 -0
- package/dist/src/presentation/web/lib/parse-log-line.js +126 -0
- package/dist/tsconfig.build.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/web/.next/BUILD_ID +1 -1
- package/web/.next/build-manifest.json +2 -2
- package/web/.next/fallback-build-manifest.json +2 -2
- package/web/.next/prerender-manifest.json +3 -3
- package/web/.next/required-server-files.js +3 -3
- package/web/.next/required-server-files.json +3 -3
- package/web/.next/server/app/(dashboard)/@drawer/create/page/server-reference-manifest.json +20 -20
- package/web/.next/server/app/(dashboard)/@drawer/create/page.js.nft.json +1 -1
- package/web/.next/server/app/(dashboard)/@drawer/create/page_client-reference-manifest.js +1 -1
- package/web/.next/server/app/(dashboard)/@drawer/feature/[featureId]/[tab]/page/server-reference-manifest.json +26 -26
- package/web/.next/server/app/(dashboard)/@drawer/feature/[featureId]/[tab]/page.js.nft.json +1 -1
- package/web/.next/server/app/(dashboard)/@drawer/feature/[featureId]/[tab]/page_client-reference-manifest.js +1 -1
- package/web/.next/server/app/(dashboard)/@drawer/feature/[featureId]/page/server-reference-manifest.json +26 -26
- package/web/.next/server/app/(dashboard)/@drawer/feature/[featureId]/page.js.nft.json +1 -1
- package/web/.next/server/app/(dashboard)/@drawer/feature/[featureId]/page_client-reference-manifest.js +1 -1
- package/web/.next/server/app/(dashboard)/@drawer/repository/[repositoryId]/page/server-reference-manifest.json +18 -18
- package/web/.next/server/app/(dashboard)/@drawer/repository/[repositoryId]/page.js.nft.json +1 -1
- package/web/.next/server/app/(dashboard)/@drawer/repository/[repositoryId]/page_client-reference-manifest.js +1 -1
- package/web/.next/server/app/(dashboard)/create/page/server-reference-manifest.json +20 -20
- package/web/.next/server/app/(dashboard)/create/page.js.nft.json +1 -1
- package/web/.next/server/app/(dashboard)/create/page_client-reference-manifest.js +1 -1
- package/web/.next/server/app/(dashboard)/feature/[featureId]/[tab]/page/server-reference-manifest.json +26 -26
- package/web/.next/server/app/(dashboard)/feature/[featureId]/[tab]/page.js.nft.json +1 -1
- package/web/.next/server/app/(dashboard)/feature/[featureId]/[tab]/page_client-reference-manifest.js +1 -1
- package/web/.next/server/app/(dashboard)/feature/[featureId]/page/server-reference-manifest.json +26 -26
- package/web/.next/server/app/(dashboard)/feature/[featureId]/page.js.nft.json +1 -1
- package/web/.next/server/app/(dashboard)/feature/[featureId]/page_client-reference-manifest.js +1 -1
- package/web/.next/server/app/(dashboard)/page/server-reference-manifest.json +18 -18
- package/web/.next/server/app/(dashboard)/page.js.nft.json +1 -1
- package/web/.next/server/app/(dashboard)/page_client-reference-manifest.js +1 -1
- package/web/.next/server/app/(dashboard)/repository/[repositoryId]/page/server-reference-manifest.json +18 -18
- package/web/.next/server/app/(dashboard)/repository/[repositoryId]/page.js.nft.json +1 -1
- package/web/.next/server/app/(dashboard)/repository/[repositoryId]/page_client-reference-manifest.js +1 -1
- package/web/.next/server/app/_global-error.html +2 -2
- package/web/.next/server/app/_global-error.rsc +1 -1
- package/web/.next/server/app/_global-error.segments/__PAGE__.segment.rsc +1 -1
- package/web/.next/server/app/_global-error.segments/_full.segment.rsc +1 -1
- package/web/.next/server/app/_global-error.segments/_head.segment.rsc +1 -1
- package/web/.next/server/app/_global-error.segments/_index.segment.rsc +1 -1
- package/web/.next/server/app/_global-error.segments/_tree.segment.rsc +1 -1
- package/web/.next/server/app/_not-found/page/server-reference-manifest.json +1 -1
- package/web/.next/server/app/_not-found/page.js.nft.json +1 -1
- package/web/.next/server/app/_not-found/page_client-reference-manifest.js +1 -1
- package/web/.next/server/app/api/attachments/preview/route.js.nft.json +1 -1
- package/web/.next/server/app/api/cli-upgrade/route.js +2 -2
- package/web/.next/server/app/api/evidence/route.js.nft.json +1 -1
- package/web/.next/server/app/settings/page/server-reference-manifest.json +5 -5
- package/web/.next/server/app/settings/page.js.nft.json +1 -1
- package/web/.next/server/app/settings/page_client-reference-manifest.js +1 -1
- package/web/.next/server/app/skills/page/server-reference-manifest.json +6 -6
- package/web/.next/server/app/skills/page.js.nft.json +1 -1
- package/web/.next/server/app/skills/page_client-reference-manifest.js +1 -1
- package/web/.next/server/app/tools/page/server-reference-manifest.json +6 -6
- package/web/.next/server/app/tools/page.js.nft.json +1 -1
- package/web/.next/server/app/tools/page_client-reference-manifest.js +1 -1
- package/web/.next/server/app/version/page/server-reference-manifest.json +1 -1
- package/web/.next/server/app/version/page.js.nft.json +1 -1
- package/web/.next/server/app/version/page_client-reference-manifest.js +1 -1
- package/web/.next/server/chunks/[root-of-the-server]__a402b567._.js +1 -1
- package/web/.next/server/chunks/[root-of-the-server]__d2c18946._.js +2 -2
- package/web/.next/server/chunks/ssr/744ca_web_components_common_control-center-drawer_create-drawer-client_tsx_5e26fc0a._.js +1 -1
- package/web/.next/server/chunks/ssr/744ca_web_components_common_control-center-drawer_create-drawer-client_tsx_5e26fc0a._.js.map +1 -1
- package/web/.next/server/chunks/ssr/8ba4b_server_app_(dashboard)_@drawer_repository_[repositoryId]_page_actions_a1104008.js +1 -1
- package/web/.next/server/chunks/ssr/8ba4b_server_app_(dashboard)_@drawer_repository_[repositoryId]_page_actions_a1104008.js.map +1 -1
- package/web/.next/server/chunks/ssr/8ba4b_server_app_(dashboard)_repository_[repositoryId]_page_actions_92642200.js +1 -1
- package/web/.next/server/chunks/ssr/8ba4b_server_app_(dashboard)_repository_[repositoryId]_page_actions_92642200.js.map +1 -1
- package/web/.next/server/chunks/ssr/[root-of-the-server]__039967e3._.js +1 -1
- package/web/.next/server/chunks/ssr/[root-of-the-server]__039967e3._.js.map +1 -1
- package/web/.next/server/chunks/ssr/[root-of-the-server]__07a39ff2._.js +1 -1
- package/web/.next/server/chunks/ssr/[root-of-the-server]__11033878._.js +1 -1
- package/web/.next/server/chunks/ssr/[root-of-the-server]__11033878._.js.map +1 -1
- package/web/.next/server/chunks/ssr/[root-of-the-server]__24dd0927._.js +2 -2
- package/web/.next/server/chunks/ssr/[root-of-the-server]__2773312c._.js +1 -1
- package/web/.next/server/chunks/ssr/[root-of-the-server]__2773312c._.js.map +1 -1
- package/web/.next/server/chunks/ssr/[root-of-the-server]__5d87af2e._.js +1 -1
- package/web/.next/server/chunks/ssr/[root-of-the-server]__5edfc56b._.js +1 -1
- package/web/.next/server/chunks/ssr/{[root-of-the-server]__845a9d2a._.js → [root-of-the-server]__6367aea0._.js} +2 -2
- package/web/.next/server/chunks/ssr/[root-of-the-server]__6367aea0._.js.map +1 -0
- package/web/.next/server/chunks/ssr/[root-of-the-server]__89e8a5cc._.js +2 -2
- package/web/.next/server/chunks/ssr/[root-of-the-server]__aad040c0._.js +2 -2
- package/web/.next/server/chunks/ssr/[root-of-the-server]__aad040c0._.js.map +1 -1
- package/web/.next/server/chunks/ssr/[root-of-the-server]__b1e68e34._.js +3 -0
- package/web/.next/server/chunks/ssr/{[root-of-the-server]__d91fdd51._.js.map → [root-of-the-server]__b1e68e34._.js.map} +1 -1
- package/web/.next/server/chunks/ssr/[root-of-the-server]__c9777776._.js +1 -1
- package/web/.next/server/chunks/ssr/[root-of-the-server]__c9777776._.js.map +1 -1
- package/web/.next/server/chunks/ssr/[root-of-the-server]__cbd8062c._.js +1 -1
- package/web/.next/server/chunks/ssr/[root-of-the-server]__cbd8062c._.js.map +1 -1
- package/web/.next/server/chunks/ssr/[root-of-the-server]__e70c5627._.js +1 -1
- package/web/.next/server/chunks/ssr/[root-of-the-server]__e70c5627._.js.map +1 -1
- package/web/.next/server/chunks/ssr/[root-of-the-server]__fdc75809._.js +1 -1
- package/web/.next/server/chunks/ssr/[root-of-the-server]__fdc75809._.js.map +1 -1
- package/web/.next/server/chunks/ssr/_0e506641._.js +7 -0
- package/web/.next/server/chunks/ssr/{_e6f2da4f._.js.map → _0e506641._.js.map} +1 -1
- package/web/.next/server/chunks/ssr/_135edb9c._.js +1 -1
- package/web/.next/server/chunks/ssr/_135edb9c._.js.map +1 -1
- package/web/.next/server/chunks/ssr/_8dacd1e7._.js +1 -1
- package/web/.next/server/chunks/ssr/_8dacd1e7._.js.map +1 -1
- package/web/.next/server/chunks/ssr/{_573c7402._.js → _b1b15045._.js} +2 -2
- package/web/.next/server/chunks/ssr/{_573c7402._.js.map → _b1b15045._.js.map} +1 -1
- package/web/.next/server/chunks/ssr/{_6b105fbc._.js → _ba407880._.js} +2 -2
- package/web/.next/server/chunks/ssr/{_6b105fbc._.js.map → _ba407880._.js.map} +1 -1
- package/web/.next/server/chunks/ssr/_cc77a143._.js +1 -1
- package/web/.next/server/chunks/ssr/_cc77a143._.js.map +1 -1
- package/web/.next/server/chunks/ssr/{_07178808._.js → _db90b2b7._.js} +2 -2
- package/web/.next/server/chunks/ssr/_db90b2b7._.js.map +1 -0
- package/web/.next/server/chunks/ssr/b1a17_presentation_web_components_features_settings_settings-page-client_tsx_6ed9d5f8._.js +1 -1
- package/web/.next/server/chunks/ssr/b1a17_presentation_web_components_features_settings_settings-page-client_tsx_6ed9d5f8._.js.map +1 -1
- package/web/.next/server/chunks/ssr/src_presentation_web__next-internal_server_app_(dashboard)_page_actions_888633e1.js +1 -1
- package/web/.next/server/chunks/ssr/src_presentation_web__next-internal_server_app_(dashboard)_page_actions_888633e1.js.map +1 -1
- package/web/.next/server/chunks/ssr/src_presentation_web__next-internal_server_app_skills_page_actions_1fa8042e.js +1 -1
- package/web/.next/server/chunks/ssr/src_presentation_web__next-internal_server_app_skills_page_actions_1fa8042e.js.map +1 -1
- package/web/.next/server/chunks/ssr/src_presentation_web__next-internal_server_app_tools_page_actions_24684200.js +1 -1
- package/web/.next/server/chunks/ssr/src_presentation_web__next-internal_server_app_tools_page_actions_24684200.js.map +1 -1
- package/web/.next/server/chunks/ssr/src_presentation_web_ce7cbc3c._.js +2 -2
- package/web/.next/server/chunks/ssr/src_presentation_web_ce7cbc3c._.js.map +1 -1
- package/web/.next/server/chunks/ssr/src_presentation_web_components_bf50c527._.js +1 -1
- package/web/.next/server/chunks/ssr/src_presentation_web_components_de814675._.js +1 -1
- package/web/.next/server/chunks/ssr/src_presentation_web_components_e599bb8c._.js +1 -1
- package/web/.next/server/chunks/ssr/src_presentation_web_components_e599bb8c._.js.map +1 -1
- package/web/.next/server/chunks/ssr/src_presentation_web_components_features_control-center_7ac3562e._.js +1 -1
- package/web/.next/server/chunks/ssr/src_presentation_web_components_features_control-center_7ac3562e._.js.map +1 -1
- package/web/.next/server/chunks/ssr/src_presentation_web_e2604413._.js +2 -2
- package/web/.next/server/chunks/ssr/src_presentation_web_e2604413._.js.map +1 -1
- package/web/.next/server/pages/500.html +2 -2
- package/web/.next/server/server-reference-manifest.js +1 -1
- package/web/.next/server/server-reference-manifest.json +31 -31
- package/web/.next/static/chunks/2c6789f959f18490.js +2 -0
- package/web/.next/static/chunks/2d9f596cf5386ed5.js +1 -0
- package/web/.next/static/chunks/57b45edf86522369.css +1 -0
- package/web/.next/static/chunks/{9de58b31821657a7.js → 5e8b4448da8d10fb.js} +1 -1
- package/web/.next/static/chunks/619af41a8d3232e5.js +1 -0
- package/web/.next/static/chunks/69cd24994583dd11.js +11 -0
- package/web/.next/static/chunks/6c34312f58b0a487.js +1 -0
- package/web/.next/static/chunks/a1fa7b461f672982.js +1 -0
- package/web/.next/static/chunks/{ea5af66e7cd1d64c.js → a697872409df9c84.js} +1 -1
- package/web/.next/static/chunks/a704e5331b195b85.js +1 -0
- package/web/.next/static/chunks/b1f3c0e8e9872ef8.js +1 -0
- package/web/.next/static/chunks/{49edfaea86bca4d4.js → db48807b552e76bf.js} +1 -1
- package/web/.next/static/chunks/e43b8d510180ead2.js +1 -0
- package/web/.next/server/chunks/ssr/[root-of-the-server]__845a9d2a._.js.map +0 -1
- package/web/.next/server/chunks/ssr/[root-of-the-server]__d91fdd51._.js +0 -3
- package/web/.next/server/chunks/ssr/_07178808._.js.map +0 -1
- package/web/.next/server/chunks/ssr/_e6f2da4f._.js +0 -7
- package/web/.next/static/chunks/07b853e29af1e5f2.js +0 -1
- package/web/.next/static/chunks/3a785cd8a96b8402.js +0 -1
- package/web/.next/static/chunks/5025b973997eb889.js +0 -1
- package/web/.next/static/chunks/5543614d36607aef.js +0 -1
- package/web/.next/static/chunks/5558a658fa82a01f.css +0 -1
- package/web/.next/static/chunks/a9357597e52bd4bc.js +0 -1
- package/web/.next/static/chunks/ac1fcc4b433cdbbf.js +0 -1
- package/web/.next/static/chunks/e04a5e18ea5fd053.js +0 -1
- package/web/.next/static/chunks/f02fe16cf143e186.js +0 -11
- package/web/.next/static/chunks/fc7dda19227ec43d.js +0 -2
- /package/web/.next/static/{h5YMwar8bSq9VnHhJNqVt → fdYy5R5NeVUozI8q8VtVL}/_buildManifest.js +0 -0
- /package/web/.next/static/{h5YMwar8bSq9VnHhJNqVt → fdYy5R5NeVUozI8q8VtVL}/_clientMiddlewareManifest.json +0 -0
- /package/web/.next/static/{h5YMwar8bSq9VnHhJNqVt → fdYy5R5NeVUozI8q8VtVL}/_ssgManifest.js +0 -0
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useState } from 'react';
|
|
3
|
+
import { RepositoryCombobox } from './feature-create-drawer.js';
|
|
4
|
+
const SAMPLE_REPOSITORIES = [
|
|
5
|
+
{ id: 'repo-001', name: 'my-app', path: '/Users/dev/projects/my-app' },
|
|
6
|
+
{ id: 'repo-002', name: 'api-service', path: '/Users/dev/projects/api-service' },
|
|
7
|
+
{ id: 'repo-003', name: 'shared-lib', path: '/Users/dev/libs/shared-lib' },
|
|
8
|
+
{ id: 'repo-004', name: 'docs-site', path: '/Users/dev/projects/docs-site' },
|
|
9
|
+
];
|
|
10
|
+
const meta = {
|
|
11
|
+
title: 'Drawers/Feature/RepositoryCombobox',
|
|
12
|
+
component: RepositoryCombobox,
|
|
13
|
+
tags: ['autodocs'],
|
|
14
|
+
parameters: {
|
|
15
|
+
layout: 'centered',
|
|
16
|
+
},
|
|
17
|
+
};
|
|
18
|
+
export default meta;
|
|
19
|
+
function RepositoryComboboxWrapper({ repositories: initialRepos, initialValue, disabled, }) {
|
|
20
|
+
const [repos, setRepos] = useState(initialRepos);
|
|
21
|
+
const [value, setValue] = useState(initialValue);
|
|
22
|
+
return (_jsxs("div", { className: "w-80", children: [_jsx(RepositoryCombobox, { repositories: repos, value: value, onChange: setValue, onAddRepository: (repo) => {
|
|
23
|
+
setRepos((prev) => [...prev, repo]);
|
|
24
|
+
setValue(repo.path);
|
|
25
|
+
}, disabled: disabled }), value ? _jsxs("p", { className: "text-muted-foreground mt-2 text-xs", children: ["Selected: ", value] }) : null] }));
|
|
26
|
+
}
|
|
27
|
+
/** Default state with multiple repositories available for selection. */
|
|
28
|
+
export const WithRepositories = {
|
|
29
|
+
render: () => _jsx(RepositoryComboboxWrapper, { repositories: SAMPLE_REPOSITORIES }),
|
|
30
|
+
};
|
|
31
|
+
/** Empty list — shows "No repositories found." message and "Add new repository..." option. */
|
|
32
|
+
export const EmptyList = {
|
|
33
|
+
render: () => _jsx(RepositoryComboboxWrapper, { repositories: [] }),
|
|
34
|
+
};
|
|
35
|
+
/** Pre-selected repository — trigger button shows the selected repo name. */
|
|
36
|
+
export const PreSelected = {
|
|
37
|
+
render: () => (_jsx(RepositoryComboboxWrapper, { repositories: SAMPLE_REPOSITORIES, initialValue: "/Users/dev/projects/api-service" })),
|
|
38
|
+
};
|
|
39
|
+
/** Disabled state — combobox trigger button is non-interactive. */
|
|
40
|
+
export const Disabled = {
|
|
41
|
+
render: () => _jsx(RepositoryComboboxWrapper, { repositories: SAMPLE_REPOSITORIES, disabled: true }),
|
|
42
|
+
};
|
package/dist/src/presentation/web/components/common/feature-drawer-tabs/event-log-viewer.d.ts.map
ADDED
|
@@ -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,kDAY9D"}
|
|
@@ -0,0 +1,113 @@
|
|
|
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) => (_jsx(LogLineRow, { line: line }, line.raw))) }));
|
|
11
|
+
}
|
|
12
|
+
/* ---------------------------------------------------------------------------
|
|
13
|
+
* Line router
|
|
14
|
+
* ------------------------------------------------------------------------- */
|
|
15
|
+
function LogLineRow({ line }) {
|
|
16
|
+
switch (line.tag) {
|
|
17
|
+
case 'tool':
|
|
18
|
+
return _jsx(ToolCallRow, { line: line });
|
|
19
|
+
case 'text':
|
|
20
|
+
return _jsx(TextRow, { line: line });
|
|
21
|
+
case 'result':
|
|
22
|
+
return _jsx(ResultRow, { line: line });
|
|
23
|
+
case 'tokens':
|
|
24
|
+
return _jsx(TokensRow, { line: line });
|
|
25
|
+
case 'worker':
|
|
26
|
+
return _jsx(WorkerRow, { line: line });
|
|
27
|
+
case 'info':
|
|
28
|
+
return _jsx(InfoRow, { line: line });
|
|
29
|
+
case 'raw':
|
|
30
|
+
default:
|
|
31
|
+
return _jsx(RawRow, { line: line });
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
/* ---------------------------------------------------------------------------
|
|
35
|
+
* Shared helpers
|
|
36
|
+
* ------------------------------------------------------------------------- */
|
|
37
|
+
function Timestamp({ value }) {
|
|
38
|
+
if (!value)
|
|
39
|
+
return null;
|
|
40
|
+
const time = value.replace(/^.*T/, '').replace('Z', '');
|
|
41
|
+
return (_jsx("span", { className: "text-muted-foreground/60 w-20 shrink-0 font-mono text-[10px]", children: time }));
|
|
42
|
+
}
|
|
43
|
+
function PhaseBadge({ phase }) {
|
|
44
|
+
if (!phase)
|
|
45
|
+
return null;
|
|
46
|
+
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 }));
|
|
47
|
+
}
|
|
48
|
+
/* ---------------------------------------------------------------------------
|
|
49
|
+
* Event-specific rows
|
|
50
|
+
* ------------------------------------------------------------------------- */
|
|
51
|
+
function ToolCallRow({ line }) {
|
|
52
|
+
const { toolName, args } = parseToolCall(line.message);
|
|
53
|
+
// Try to extract a key detail from args for common tools
|
|
54
|
+
const detail = getToolDetail(toolName, args);
|
|
55
|
+
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] })] }));
|
|
56
|
+
}
|
|
57
|
+
function ToolIcon({ toolName }) {
|
|
58
|
+
const lower = toolName.toLowerCase();
|
|
59
|
+
if (lower === 'bash')
|
|
60
|
+
return _jsx(Terminal, { className: "mt-0.5 h-3 w-3 shrink-0 text-violet-500" });
|
|
61
|
+
if (lower === 'read' || lower === 'glob' || lower === 'grep')
|
|
62
|
+
return _jsx(FileText, { className: "mt-0.5 h-3 w-3 shrink-0 text-violet-500" });
|
|
63
|
+
if (lower === 'write' || lower === 'edit')
|
|
64
|
+
return _jsx(FileCode, { className: "mt-0.5 h-3 w-3 shrink-0 text-violet-500" });
|
|
65
|
+
return _jsx(Terminal, { className: "mt-0.5 h-3 w-3 shrink-0 text-violet-500" });
|
|
66
|
+
}
|
|
67
|
+
function getToolDetail(toolName, args) {
|
|
68
|
+
try {
|
|
69
|
+
const parsed = JSON.parse(args);
|
|
70
|
+
if (toolName === 'Read' && parsed.file_path)
|
|
71
|
+
return parsed.file_path;
|
|
72
|
+
if (toolName === 'Write' && parsed.file_path)
|
|
73
|
+
return parsed.file_path;
|
|
74
|
+
if (toolName === 'Edit' && parsed.file_path)
|
|
75
|
+
return parsed.file_path;
|
|
76
|
+
if (toolName === 'Glob' && parsed.pattern)
|
|
77
|
+
return parsed.pattern;
|
|
78
|
+
if (toolName === 'Grep' && parsed.pattern)
|
|
79
|
+
return parsed.pattern;
|
|
80
|
+
if (toolName === 'Bash' && parsed.command) {
|
|
81
|
+
const cmd = parsed.command;
|
|
82
|
+
return cmd.length > 80 ? `${cmd.slice(0, 80)}...` : cmd;
|
|
83
|
+
}
|
|
84
|
+
if (toolName === 'Task' && parsed.description)
|
|
85
|
+
return parsed.description;
|
|
86
|
+
}
|
|
87
|
+
catch {
|
|
88
|
+
// Not JSON — show truncated raw args
|
|
89
|
+
if (args.length > 0)
|
|
90
|
+
return args.length > 80 ? `${args.slice(0, 80)}...` : args;
|
|
91
|
+
}
|
|
92
|
+
return null;
|
|
93
|
+
}
|
|
94
|
+
function TextRow({ line }) {
|
|
95
|
+
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 })] })] }));
|
|
96
|
+
}
|
|
97
|
+
function ResultRow({ line }) {
|
|
98
|
+
const { chars } = parseResultMessage(line.message);
|
|
99
|
+
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"] })] })] }));
|
|
100
|
+
}
|
|
101
|
+
function TokensRow({ line }) {
|
|
102
|
+
const { inputTokens, outputTokens } = parseTokensMessage(line.message);
|
|
103
|
+
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'] })] })] }));
|
|
104
|
+
}
|
|
105
|
+
function WorkerRow({ line }) {
|
|
106
|
+
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 })] })] }));
|
|
107
|
+
}
|
|
108
|
+
function InfoRow({ line }) {
|
|
109
|
+
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 })] }));
|
|
110
|
+
}
|
|
111
|
+
function RawRow({ line }) {
|
|
112
|
+
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 }) }));
|
|
113
|
+
}
|
|
@@ -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"}
|
package/dist/src/presentation/web/components/common/feature-drawer-tabs/event-log-viewer.stories.js
ADDED
|
@@ -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":"
|
|
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' }),
|
|
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
|
}
|
package/dist/src/presentation/web/components/common/feature-drawer-tabs/log-tab.stories.d.ts
CHANGED
|
@@ -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 —
|
|
6
|
+
/** Default — structured agent log output with live connection (claude-code). */
|
|
7
7
|
export declare const Default: Story;
|
|
8
|
-
/**
|
|
9
|
-
export declare const
|
|
8
|
+
/** LongStructured — 100 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. */
|
package/dist/src/presentation/web/components/common/feature-drawer-tabs/log-tab.stories.d.ts.map
CHANGED
|
@@ -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;
|
|
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: '
|
|
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
|
|
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
|
|
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 —
|
|
117
|
+
/** Default — structured agent log output with live connection (claude-code). */
|
|
43
118
|
export const Default = {
|
|
44
119
|
args: {
|
|
45
|
-
content:
|
|
120
|
+
content: structuredLogContent,
|
|
46
121
|
isConnected: true,
|
|
47
122
|
error: null,
|
|
48
123
|
},
|
|
49
124
|
};
|
|
50
|
-
/**
|
|
51
|
-
export const
|
|
125
|
+
/** LongStructured — 100 structured events to test scrolling behavior. */
|
|
126
|
+
export const LongStructured = {
|
|
52
127
|
args: {
|
|
53
|
-
content:
|
|
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:
|
|
144
|
+
content: structuredLogContent,
|
|
62
145
|
isConnected: false,
|
|
63
146
|
error: null,
|
|
64
147
|
},
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
export interface FloatingActionButtonAction {
|
|
2
|
+
/** Unique key for the action. */
|
|
3
|
+
id: string;
|
|
4
|
+
/** Accessible label shown next to the icon. */
|
|
5
|
+
label: string;
|
|
6
|
+
/** Lucide icon component. */
|
|
7
|
+
icon: React.ReactNode;
|
|
8
|
+
/** Called when the action is clicked. */
|
|
9
|
+
onClick: () => void;
|
|
10
|
+
/** Whether the action is currently loading. */
|
|
11
|
+
loading?: boolean;
|
|
12
|
+
/** Whether the action is disabled. */
|
|
13
|
+
disabled?: boolean;
|
|
14
|
+
}
|
|
15
|
+
export interface FloatingActionButtonProps {
|
|
16
|
+
/** Action items shown when the FAB is expanded. */
|
|
17
|
+
actions: FloatingActionButtonAction[];
|
|
18
|
+
/** Additional CSS classes for the container. */
|
|
19
|
+
className?: string;
|
|
20
|
+
}
|
|
21
|
+
export declare function FloatingActionButton({ actions, className }: FloatingActionButtonProps): import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
//# sourceMappingURL=floating-action-button.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"floating-action-button.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/floating-action-button/floating-action-button.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,0BAA0B;IACzC,iCAAiC;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,+CAA+C;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,yCAAyC;IACzC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,yBAAyB;IACxC,mDAAmD;IACnD,OAAO,EAAE,0BAA0B,EAAE,CAAC;IACtC,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAQD,wBAAgB,oBAAoB,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,yBAAyB,2CAiHrF"}
|
package/dist/src/presentation/web/components/common/floating-action-button/floating-action-button.js
ADDED
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
|
+
import { useEffect, useState } from 'react';
|
|
4
|
+
import { Plus, Loader2, X } from 'lucide-react';
|
|
5
|
+
import { cn } from '../../../lib/utils.js';
|
|
6
|
+
import { Button } from '../../ui/button.js';
|
|
7
|
+
/** Stagger delay between each item animation in ms. */
|
|
8
|
+
const STAGGER_MS = 50;
|
|
9
|
+
/** Total animation duration in ms. */
|
|
10
|
+
const DURATION_MS = 250;
|
|
11
|
+
export function FloatingActionButton({ actions, className }) {
|
|
12
|
+
const [open, setOpen] = useState(false);
|
|
13
|
+
// Close on Escape key
|
|
14
|
+
useEffect(() => {
|
|
15
|
+
if (!open)
|
|
16
|
+
return;
|
|
17
|
+
function handleKeyDown(e) {
|
|
18
|
+
if (e.key === 'Escape') {
|
|
19
|
+
setOpen(false);
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
document.addEventListener('keydown', handleKeyDown);
|
|
23
|
+
return () => document.removeEventListener('keydown', handleKeyDown);
|
|
24
|
+
}, [open]);
|
|
25
|
+
// Reversed actions so bottom-most item in stack = first action
|
|
26
|
+
const reversedActions = [...actions].reverse();
|
|
27
|
+
return (_jsxs(_Fragment, { children: [open ? (_jsx("div", { "data-testid": "fab-overlay", className: "fixed inset-0 z-40", onClick: () => setOpen(false), "aria-hidden": "true" })) : null, _jsxs("div", { "data-testid": "floating-action-button", className: cn('fixed right-6 bottom-6 z-50', className), children: [_jsx("div", { className: "absolute right-0 bottom-16 flex flex-col-reverse items-end gap-3", "data-testid": "fab-actions", children: reversedActions.map((action, reversedIndex) => {
|
|
28
|
+
const originalIndex = actions.length - 1 - reversedIndex;
|
|
29
|
+
// Stagger: bottom items appear first (closest to FAB)
|
|
30
|
+
const openDelay = originalIndex * STAGGER_MS;
|
|
31
|
+
// Close: top items disappear first
|
|
32
|
+
const closeDelay = reversedIndex * STAGGER_MS;
|
|
33
|
+
return (_jsxs("button", { "data-testid": `fab-action-${action.id}`, "aria-label": action.label, disabled: action.disabled ?? action.loading, className: cn('flex items-center gap-3 rounded-full px-4 py-2.5', 'bg-background text-foreground shadow-lg', 'border-border border', 'transition-all ease-out', 'hover:bg-accent hover:text-accent-foreground', 'disabled:pointer-events-none disabled:opacity-50', open
|
|
34
|
+
? 'translate-y-0 scale-100 opacity-100'
|
|
35
|
+
: 'pointer-events-none translate-y-4 scale-95 opacity-0'), style: {
|
|
36
|
+
transitionDuration: `${DURATION_MS}ms`,
|
|
37
|
+
transitionDelay: open ? `${openDelay}ms` : `${closeDelay}ms`,
|
|
38
|
+
}, onClick: () => {
|
|
39
|
+
action.onClick();
|
|
40
|
+
setOpen(false);
|
|
41
|
+
}, children: [_jsx("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center", children: action.loading ? _jsx(Loader2, { className: "h-5 w-5 animate-spin" }) : action.icon }), _jsx("span", { className: "text-sm font-medium whitespace-nowrap", children: action.label })] }, action.id));
|
|
42
|
+
}) }), _jsxs(Button, { size: "icon", "data-testid": "fab-trigger", "aria-label": open ? 'Close actions' : 'Open actions', className: cn('relative h-12 w-12 rounded-full shadow-lg', 'transition-colors duration-200'), onClick: () => setOpen((prev) => !prev), children: [_jsx(Plus, { className: cn('absolute h-5 w-5 transition-all', open ? 'scale-0 rotate-90 opacity-0' : 'scale-100 rotate-0 opacity-100'), style: { transitionDuration: `${DURATION_MS}ms` } }), _jsx(X, { className: cn('absolute h-5 w-5 transition-all', open ? 'scale-100 rotate-0 opacity-100' : 'scale-0 -rotate-90 opacity-0'), style: { transitionDuration: `${DURATION_MS}ms` } })] })] })] }));
|
|
43
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { FloatingActionButton } from './floating-action-button.js';
|
|
3
|
+
declare const meta: Meta<typeof FloatingActionButton>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof meta>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
export declare const WithLoadingAction: Story;
|
|
8
|
+
export declare const SingleAction: Story;
|
|
9
|
+
export declare const ThreeActions: Story;
|
|
10
|
+
//# sourceMappingURL=floating-action-button.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"floating-action-button.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/floating-action-button/floating-action-button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,oBAAoB,EAAmC,MAAM,0BAA0B,CAAC;AAiBjG,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,oBAAoB,CAiB3C,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAU/B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAI1B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAY1B,CAAC"}
|