@shepai/cli 1.162.0 → 1.163.0-pr505.35c41df

package/dist/src/presentation/web/components/features/feature-tree-table/feature-tree-table.js

@@ -0,0 +1,176 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useCallback } from 'react';
+import { TabulatorFull as Tabulator } from 'tabulator-tables';
+import { cn } from '../../../lib/utils.js';
+import './feature-tree-table.css';
+const STATUS_COLORS = {
+    'action-needed': '#f59e0b',
+    'in-progress': '#3b82f6',
+    pending: '#94a3b8',
+    blocked: '#9ca3af',
+    error: '#ef4444',
+    done: '#10b981',
+};
+const STATUS_LABELS = {
+    'action-needed': 'Action Needed',
+    'in-progress': 'In Progress',
+    pending: 'Pending',
+    blocked: 'Blocked',
+    error: 'Error',
+    done: 'Done',
+};
+function statusFormatter(cell) {
+    const row = cell.getRow().getData();
+    if (row._isRepoGroup)
+        return '';
+    const value = cell.getValue();
+    const color = STATUS_COLORS[value] ?? '#94a3b8';
+    const label = STATUS_LABELS[value] ?? value;
+    return `<span style="display:inline-flex;align-items:center;gap:6px;"><span style="width:8px;height:8px;border-radius:50%;background:${color};display:inline-block;"></span>${label}</span>`;
+}
+function buildColumns(onFeatureClick) {
+    return [
+        {
+            title: 'Name',
+            field: 'name',
+            widthGrow: 3,
+            ...(onFeatureClick && {
+                cellClick: (_e, cell) => {
+                    const data = cell.getRow().getData();
+                    if (data._isRepoGroup)
+                        return;
+                    onFeatureClick(data.id);
+                },
+                cssClass: 'cursor-pointer',
+            }),
+        },
+        {
+            title: 'Status',
+            field: 'status',
+            widthGrow: 1.5,
+            formatter: statusFormatter,
+        },
+        {
+            title: 'Lifecycle',
+            field: 'lifecycle',
+            widthGrow: 1.5,
+            formatter: (cell) => {
+                const row = cell.getRow().getData();
+                if (row._isRepoGroup)
+                    return '';
+                return cell.getValue();
+            },
+        },
+        {
+            title: 'Branch',
+            field: 'branch',
+            widthGrow: 2,
+            formatter: (cell) => {
+                const row = cell.getRow().getData();
+                if (row._isRepoGroup)
+                    return '';
+                return cell.getValue();
+            },
+        },
+    ];
+}
+/**
+ * Build tree-structured data grouped by repository.
+ * Each repository becomes a parent node with its features as children.
+ * Features that have parent-child relationships are nested within their repository group.
+ */
+export function buildTreeData(flatData) {
+    if (flatData.length === 0)
+        return [];
+    // Group features by repository
+    const byRepo = new Map();
+    for (const item of flatData) {
+        const repoName = item.repositoryName || 'Unknown';
+        if (!byRepo.has(repoName)) {
+            byRepo.set(repoName, []);
+        }
+        byRepo.get(repoName).push(item);
+    }
+    const roots = [];
+    for (const [repoName, features] of byRepo) {
+        // Build parent-child relationships within this repo group
+        const lookup = new Map();
+        const repoChildren = [];
+        for (const item of features) {
+            lookup.set(item.id, { ...item, _children: [] });
+        }
+        for (const item of features) {
+            const node = lookup.get(item.id);
+            if (item.parentId && lookup.has(item.parentId)) {
+                lookup.get(item.parentId)._children.push(node);
+            }
+            else {
+                repoChildren.push(node);
+            }
+        }
+        // Clean up empty _children arrays
+        for (const node of lookup.values()) {
+            if (node._children?.length === 0) {
+                delete node._children;
+            }
+        }
+        // If there's only one repo, skip the group wrapper
+        if (byRepo.size === 1) {
+            roots.push(...repoChildren);
+        }
+        else {
+            // Create a repo group node
+            const repoGroup = {
+                id: `repo-${repoName}`,
+                name: repoName,
+                status: 'pending',
+                lifecycle: '',
+                branch: '',
+                repositoryName: repoName,
+                _isRepoGroup: true,
+                _children: repoChildren,
+            };
+            roots.push(repoGroup);
+        }
+    }
+    return roots;
+}
+export function FeatureTreeTable({ data, className, onFeatureClick }) {
+    const containerRef = useRef(null);
+    const tabulatorRef = useRef(null);
+    const onFeatureClickRef = useRef(onFeatureClick);
+    onFeatureClickRef.current = onFeatureClick;
+    const stableOnFeatureClick = useCallback((featureId) => {
+        onFeatureClickRef.current?.(featureId);
+    }, []);
+    useEffect(() => {
+        if (!containerRef.current)
+            return;
+        const treeData = buildTreeData(data);
+        const columns = buildColumns(stableOnFeatureClick);
+        const table = new Tabulator(containerRef.current, {
+            data: treeData,
+            columns,
+            dataTree: true,
+            dataTreeStartExpanded: true,
+            layout: 'fitColumns',
+            height: '100%',
+            placeholder: 'No features found',
+            headerSortClickElement: 'icon',
+            rowHeight: 40,
+            rowFormatter: (row) => {
+                const rowData = row.getData();
+                if (rowData._isRepoGroup) {
+                    row.getElement().classList.add('tabulator-row-repo-group');
+                }
+            },
+        });
+        tabulatorRef.current = table;
+        return () => {
+            table.destroy();
+            tabulatorRef.current = null;
+        };
+    }, [data, stableOnFeatureClick]);
+    return (_jsx("div", { "data-testid": "feature-tree-table", className: cn('h-full w-full', className), ref: containerRef }));
+}

package/dist/src/presentation/web/components/features/feature-tree-table/feature-tree-table.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { FeatureTreeTable } from './feature-tree-table.js';
+declare const meta: Meta<typeof FeatureTreeTable>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const SingleRepository: Story;
+export declare const Empty: Story;
+export declare const WithClickHandler: Story;
+export declare const DeeplyNested: Story;
+//# sourceMappingURL=feature-tree-table.stories.d.ts.map

package/dist/src/presentation/web/components/features/feature-tree-table/feature-tree-table.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"feature-tree-table.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/feature-tree-table/feature-tree-table.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAGxD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAcvC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAmEnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAI9B,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAInB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAK9B,CAAC;AAwCF,eAAO,MAAM,YAAY,EAAE,KAI1B,CAAC"}

package/dist/src/presentation/web/components/features/feature-tree-table/feature-tree-table.stories.js

@@ -0,0 +1,140 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FeatureTreeTable } from './feature-tree-table.js';
+const meta = {
+    title: 'Features/FeatureTreeTable',
+    component: FeatureTreeTable,
+    parameters: {
+        layout: 'padded',
+    },
+    tags: ['autodocs'],
+    decorators: [
+        (Story) => (_jsx("div", { style: { height: '500px', width: '100%' }, children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+const singleRepoFeatures = [
+    {
+        id: 'feat-1',
+        name: 'Authentication System',
+        status: 'done',
+        lifecycle: 'Maintain',
+        branch: 'feat/auth-system',
+        repositoryName: 'my-app',
+    },
+    {
+        id: 'feat-2',
+        name: 'OAuth2 Provider',
+        status: 'in-progress',
+        lifecycle: 'Implementation',
+        branch: 'feat/oauth2-provider',
+        repositoryName: 'my-app',
+        parentId: 'feat-1',
+    },
+    {
+        id: 'feat-3',
+        name: 'JWT Token Refresh',
+        status: 'pending',
+        lifecycle: 'Planning',
+        branch: 'feat/jwt-refresh',
+        repositoryName: 'my-app',
+        parentId: 'feat-1',
+    },
+    {
+        id: 'feat-4',
+        name: 'Payment Integration',
+        status: 'action-needed',
+        lifecycle: 'Review',
+        branch: 'feat/payments',
+        repositoryName: 'my-app',
+    },
+];
+const multiRepoFeatures = [
+    ...singleRepoFeatures,
+    {
+        id: 'feat-5',
+        name: 'Dashboard Widgets',
+        status: 'blocked',
+        lifecycle: 'Blocked',
+        branch: 'feat/dashboard-widgets',
+        repositoryName: 'admin-portal',
+    },
+    {
+        id: 'feat-6',
+        name: 'Stripe Checkout',
+        status: 'error',
+        lifecycle: 'Implementation',
+        branch: 'feat/stripe-checkout',
+        repositoryName: 'admin-portal',
+    },
+    {
+        id: 'feat-7',
+        name: 'API Gateway',
+        status: 'in-progress',
+        lifecycle: 'Implementation',
+        branch: 'feat/api-gateway',
+        repositoryName: 'infrastructure',
+    },
+];
+export const Default = {
+    args: {
+        data: multiRepoFeatures,
+    },
+};
+export const SingleRepository = {
+    args: {
+        data: singleRepoFeatures,
+    },
+};
+export const Empty = {
+    args: {
+        data: [],
+    },
+};
+export const WithClickHandler = {
+    args: {
+        data: multiRepoFeatures,
+        onFeatureClick: (id) => alert(`Clicked feature: ${id}`),
+    },
+};
+const deeplyNestedFeatures = [
+    {
+        id: 'root-1',
+        name: 'Platform Overhaul',
+        status: 'in-progress',
+        lifecycle: 'Implementation',
+        branch: 'feat/platform-overhaul',
+        repositoryName: 'platform',
+    },
+    {
+        id: 'child-1',
+        name: 'API Redesign',
+        status: 'in-progress',
+        lifecycle: 'Implementation',
+        branch: 'feat/api-redesign',
+        repositoryName: 'platform',
+        parentId: 'root-1',
+    },
+    {
+        id: 'grandchild-1',
+        name: 'REST to GraphQL Migration',
+        status: 'pending',
+        lifecycle: 'Planning',
+        branch: 'feat/graphql-migration',
+        repositoryName: 'platform',
+        parentId: 'child-1',
+    },
+    {
+        id: 'child-2',
+        name: 'Database Migration',
+        status: 'done',
+        lifecycle: 'Maintain',
+        branch: 'feat/db-migration',
+        repositoryName: 'platform',
+        parentId: 'root-1',
+    },
+];
+export const DeeplyNested = {
+    args: {
+        data: deeplyNestedFeatures,
+    },
+};

package/dist/src/presentation/web/components/features/feature-tree-table/index.d.ts

@@ -0,0 +1,3 @@
+export { FeatureTreeTable, buildTreeData } from './feature-tree-table.js';
+export type { FeatureTreeTableProps, FeatureTreeRow } from './feature-tree-table.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/presentation/web/components/features/feature-tree-table/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/feature-tree-table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACvE,YAAY,EAAE,qBAAqB,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/src/presentation/web/components/features/feature-tree-table/index.js

@@ -0,0 +1 @@
+export { FeatureTreeTable, buildTreeData } from './feature-tree-table.js';

package/dist/src/presentation/web/components/features/settings/settings-page-client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"settings-page-client.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/settings/settings-page-client.tsx"],"names":[],"mappings":"AA2CA,OAAO,KAAK,EACV,QAAQ,EAIT,MAAM,sCAAsC,CAAC;AAC9C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AA6B/E,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,QAAQ,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,iBAAiB,EAAE,CAAC;CAC1C;AA+QD,wBAAgB,kBAAkB,CAAC,EACjC,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,kBAAkB,GACnB,EAAE,uBAAuB,2CAm1CzB"}
+{"version":3,"file":"settings-page-client.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/settings/settings-page-client.tsx"],"names":[],"mappings":"AA4CA,OAAO,KAAK,EACV,QAAQ,EAKT,MAAM,sCAAsC,CAAC;AAC9C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AA8B/E,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,QAAQ,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,iBAAiB,EAAE,CAAC;CAC1C;AA+QD,wBAAgB,kBAAkB,CAAC,EACjC,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,kBAAkB,GACnB,EAAE,uBAAuB,2CAi3CzB"}

package/dist/src/presentation/web/components/features/settings/settings-page-client.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useTransition, useRef, useEffect, useCallback } from 'react';
-import { Check, Bot, Terminal, GitBranch, Activity, Bell, Flag, Database, Globe, Minus, Plus, ExternalLink, Settings2, Timer, MessageSquare, } from 'lucide-react';
+import { Check, Bot, Terminal, GitBranch, Activity, Bell, Flag, Database, Globe, Minus, Plus, ExternalLink, Settings2, Timer, MessageSquare, LayoutGrid, } from 'lucide-react';
 import { toast } from 'sonner';
 import { useTranslation } from 'react-i18next';
 import { cn } from '../../../lib/utils.js';
@@ -36,6 +36,7 @@ const SECTIONS = [
     { id: 'notifications', labelKey: 'settings.sections.notifications', icon: Bell },
     { id: 'feature-flags', labelKey: 'settings.sections.flags', icon: Flag },
     { id: 'interactive-agent', labelKey: 'settings.sections.chat', icon: MessageSquare },
+    { id: 'fab-layout', labelKey: 'settings.sections.layout', icon: LayoutGrid },
     { id: 'database', labelKey: 'settings.sections.database', icon: Database },
 ];
 function useSaveIndicator() {
@@ -190,6 +191,9 @@ export function SettingsPageClient({ settings, shepHome, dbFileSize, availableTe
     const [interactiveEnabled, setInteractiveEnabled] = useState(interactiveAgentConfig.enabled);
     const [interactiveTimeout, setInteractiveTimeout] = useState(String(interactiveAgentConfig.autoTimeoutMinutes));
     const [interactiveSessions, setInteractiveSessions] = useState(String(interactiveAgentConfig.maxConcurrentSessions));
+    // FAB layout state
+    const fabLayoutConfig = settings.fabLayout ?? { swapPosition: false };
+    const [fabSwapPosition, setFabSwapPosition] = useState(fabLayoutConfig.swapPosition);
     // Notification state
     const [inApp, setInApp] = useState(settings.notifications.inApp.enabled);
     const [events, setEvents] = useState({ ...settings.notifications.events });
@@ -588,7 +592,10 @@ export function SettingsPageClient({ settings, shepHome, dbFileSize, availableTe
                                                         maxConcurrentSessions: clamped,
                                                     },
                                                 });
-                                            } }) })] }), _jsx(SectionHint, { children: t('settings.interactiveAgent.hint') })] }), _jsxs("div", { id: "section-database", className: "grid scroll-mt-18 grid-cols-1 gap-x-5 rounded-lg lg:grid-cols-[1fr_280px]", children: [_jsxs(SettingsSection, { icon: Database, title: t('settings.database.title'), description: t('settings.database.sectionDescription'), testId: "database-settings-section", children: [_jsx(SettingsRow, { label: t('settings.database.location'), description: t('settings.database.locationDescription'), children: _jsx("span", { className: "text-muted-foreground max-w-50 truncate font-mono text-xs", "data-testid": "shep-home-path", children: shepHome }) }), _jsx(SettingsRow, { label: t('settings.database.size'), children: _jsx("span", { className: "text-muted-foreground text-xs", "data-testid": "db-file-size", children: dbFileSize }) })] }), _jsx(SectionHint, { links: [
+                                            } }) })] }), _jsx(SectionHint, { children: t('settings.interactiveAgent.hint') })] }), _jsxs("div", { id: "section-fab-layout", className: "grid scroll-mt-18 grid-cols-1 gap-x-5 rounded-lg lg:grid-cols-[1fr_280px]", children: [_jsx(SettingsSection, { icon: LayoutGrid, title: t('settings.fabLayout.title'), description: t('settings.fabLayout.description'), testId: "fab-layout-settings-section", children: _jsx(SwitchRow, { label: t('settings.fabLayout.swapPosition'), description: t('settings.fabLayout.swapPositionDescription'), id: "fab-swap-position", testId: "switch-fab-swap-position", checked: fabSwapPosition, onChange: (v) => {
+                                        setFabSwapPosition(v);
+                                        save({ fabLayout: { swapPosition: v } });
+                                    } }) }), _jsx(SectionHint, { children: t('settings.fabLayout.hint') })] }), _jsxs("div", { id: "section-database", className: "grid scroll-mt-18 grid-cols-1 gap-x-5 rounded-lg lg:grid-cols-[1fr_280px]", children: [_jsxs(SettingsSection, { icon: Database, title: t('settings.database.title'), description: t('settings.database.sectionDescription'), testId: "database-settings-section", children: [_jsx(SettingsRow, { label: t('settings.database.location'), description: t('settings.database.locationDescription'), children: _jsx("span", { className: "text-muted-foreground max-w-50 truncate font-mono text-xs", "data-testid": "shep-home-path", children: shepHome }) }), _jsx(SettingsRow, { label: t('settings.database.size'), children: _jsx("span", { className: "text-muted-foreground text-xs", "data-testid": "db-file-size", children: dbFileSize }) })] }), _jsx(SectionHint, { links: [
                                     {
                                         label: t('settings.database.links.settingsService'),
                                         href: 'https://github.com/shep-ai/shep/blob/main/docs/architecture/settings-service.md',

package/dist/src/presentation/web/components/layouts/app-sidebar/app-sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app-sidebar.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/layouts/app-sidebar/app-sidebar.tsx"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2CAA2C,CAAC;AAI/E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAE7D,MAAM,WAAW,WAAW;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,YAAY,EAAE,iBAAiB,CAAC;IAEhC,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C;AAED,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,YAAY,EAEZ,cAAc,GACf,EAAE,eAAe,2CA6OjB"}
+{"version":3,"file":"app-sidebar.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/layouts/app-sidebar/app-sidebar.tsx"],"names":[],"mappings":"AAyCA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2CAA2C,CAAC;AAI/E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAE7D,MAAM,WAAW,WAAW;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,YAAY,EAAE,iBAAiB,CAAC;IAEhC,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C;AAED,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,YAAY,EAEZ,cAAc,GACf,EAAE,eAAe,2CAmPjB"}

package/dist/src/presentation/web/components/layouts/app-sidebar/app-sidebar.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { usePathname } from 'next/navigation';
-import { Home, Moon, Sun, Volume2, VolumeOff, Wrench, Puzzle, Settings } from 'lucide-react';
+import { Home, Moon, Sun, Volume2, VolumeOff, Wrench, Puzzle, Settings, TableProperties, } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { Sidebar, SidebarHeader, SidebarContent, SidebarFooter, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarRail, useSidebar, } from '../../ui/sidebar.js';
 import { ScrollArea } from '../../ui/scroll-area.js';
@@ -62,7 +62,7 @@ export function AppSidebar({ features, featureFlags, onFeatureClick, }) {
                                             'flex min-w-0 flex-1 items-center gap-2 overflow-hidden px-2',
                                             'transition-opacity duration-200 ease-out',
                                             expandedVisible ? 'opacity-100' : 'opacity-0',
-                                        ].join(' '), "aria-hidden": !expandedVisible, children: [_jsx(ShepLogo, { className: "shrink-0", size: 20, variant: versionData.isDev ? 'dev' : 'default' }), _jsx("span", { className: "truncate text-sm font-semibold tracking-tight", children: "Shep" }), _jsx(VersionBadge, { version: versionData.version, branch: versionData.branch || undefined, commitHash: versionData.commitHash || undefined, isDev: versionData.isDev, packageName: versionData.packageName, description: versionData.description, instancePath: versionData.instancePath || undefined })] })) : null, _jsx(SidebarCollapseToggle, { className: "shrink-0 transition-all duration-200" })] }) }), _jsx(SidebarNavItem, { icon: Home, label: t('navigation.controlCenter'), href: "/", active: pathname === '/' }), _jsx(SidebarNavItem, { icon: Wrench, label: t('navigation.tools'), href: "/tools", active: pathname === '/tools' }), featureFlags.skills ? (_jsx(SidebarNavItem, { icon: Puzzle, label: t('navigation.skills'), href: "/skills", active: pathname === '/skills' })) : null, _jsx(SidebarNavItem, { icon: Settings, label: t('navigation.settings'), href: "/settings", active: pathname === '/settings' })] }) }), _jsx(SidebarContent, { children: showExpanded ? (_jsxs("div", { className: [
+                                        ].join(' '), "aria-hidden": !expandedVisible, children: [_jsx(ShepLogo, { className: "shrink-0", size: 20, variant: versionData.isDev ? 'dev' : 'default' }), _jsx("span", { className: "truncate text-sm font-semibold tracking-tight", children: "Shep" }), _jsx(VersionBadge, { version: versionData.version, branch: versionData.branch || undefined, commitHash: versionData.commitHash || undefined, isDev: versionData.isDev, packageName: versionData.packageName, description: versionData.description, instancePath: versionData.instancePath || undefined })] })) : null, _jsx(SidebarCollapseToggle, { className: "shrink-0 transition-all duration-200" })] }) }), _jsx(SidebarNavItem, { icon: Home, label: t('navigation.controlCenter'), href: "/", active: pathname === '/' }), _jsx(SidebarNavItem, { icon: TableProperties, label: t('navigation.features'), href: "/features", active: pathname === '/features' }), _jsx(SidebarNavItem, { icon: Wrench, label: t('navigation.tools'), href: "/tools", active: pathname === '/tools' }), featureFlags.skills ? (_jsx(SidebarNavItem, { icon: Puzzle, label: t('navigation.skills'), href: "/skills", active: pathname === '/skills' })) : null, _jsx(SidebarNavItem, { icon: Settings, label: t('navigation.settings'), href: "/settings", active: pathname === '/settings' })] }) }), _jsx(SidebarContent, { children: showExpanded ? (_jsxs("div", { className: [
                         'flex min-h-0 flex-1 flex-col overflow-hidden transition-opacity duration-200 ease-out',
                         '[&_[data-sidebar=group-label]]:!mt-0 [&_[data-sidebar=group-label]]:!opacity-100 [&_[data-sidebar=group-label]]:!transition-none',
                         expandedVisible ? 'opacity-100' : 'opacity-0',

package/dist/src/presentation/web/hooks/fab-layout-context.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode } from 'react';
+import type { FabLayoutState } from '../lib/fab-layout.js';
+interface FabLayoutProviderProps {
+    children: ReactNode;
+    layout: FabLayoutState;
+}
+/**
+ * Provides server-resolved FAB layout configuration to all client components.
+ * Initialized in the root layout with values from the DB singleton.
+ */
+export declare function FabLayoutProvider({ children, layout }: FabLayoutProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Read FAB layout config from context. Returns default (not swapped)
+ * when used outside a FabLayoutProvider (e.g., Storybook, tests).
+ */
+export declare function useFabLayout(): FabLayoutState;
+export {};
+//# sourceMappingURL=fab-layout-context.d.ts.map

package/dist/src/presentation/web/hooks/fab-layout-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fab-layout-context.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/hooks/fab-layout-context.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAMvD,UAAU,sBAAsB;IAC9B,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,EAAE,cAAc,CAAC;CACxB;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,sBAAsB,2CAE7E;AAED;;;GAGG;AACH,wBAAgB,YAAY,IAAI,cAAc,CAE7C"}

package/dist/src/presentation/web/hooks/fab-layout-context.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+const defaultLayout = { swapPosition: false };
+const FabLayoutContext = createContext(defaultLayout);
+/**
+ * Provides server-resolved FAB layout configuration to all client components.
+ * Initialized in the root layout with values from the DB singleton.
+ */
+export function FabLayoutProvider({ children, layout }) {
+    return _jsx(FabLayoutContext.Provider, { value: layout, children: children });
+}
+/**
+ * Read FAB layout config from context. Returns default (not swapped)
+ * when used outside a FabLayoutProvider (e.g., Storybook, tests).
+ */
+export function useFabLayout() {
+    return useContext(FabLayoutContext);
+}

package/dist/src/presentation/web/lib/fab-layout.d.ts

@@ -0,0 +1,11 @@
+/**
+ * FAB layout configuration for the web UI.
+ *
+ * Reads from Settings.fabLayout when available, defaulting to
+ * swapPosition = false (Create FAB on start side, Chat FAB on end side).
+ */
+export interface FabLayoutState {
+    swapPosition: boolean;
+}
+export declare function getFabLayout(): FabLayoutState;
+//# sourceMappingURL=fab-layout.d.ts.map

package/dist/src/presentation/web/lib/fab-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fab-layout.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/lib/fab-layout.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,MAAM,WAAW,cAAc;IAC7B,YAAY,EAAE,OAAO,CAAC;CACvB;AAED,wBAAgB,YAAY,IAAI,cAAc,CAa7C"}

package/dist/src/presentation/web/lib/fab-layout.js

@@ -0,0 +1,21 @@
+/**
+ * FAB layout configuration for the web UI.
+ *
+ * Reads from Settings.fabLayout when available, defaulting to
+ * swapPosition = false (Create FAB on start side, Chat FAB on end side).
+ */
+import { hasSettings, getSettings } from '../../../../packages/core/src/infrastructure/services/settings.service.js';
+export function getFabLayout() {
+    try {
+        if (hasSettings()) {
+            const fabLayout = getSettings().fabLayout;
+            if (fabLayout) {
+                return { swapPosition: fabLayout.swapPosition };
+            }
+        }
+    }
+    catch {
+        // Settings not initialized (e.g., during build/SSG or client-side hydration)
+    }
+    return { swapPosition: false };
+}

package/dist/translations/ar/web.json

@@ -14,6 +14,7 @@
       "notifications": "الإشعارات",
       "flags": "العلامات",
       "chat": "المحادثة",
+      "layout": "التخطيط",
       "database": "قاعدة البيانات"
     },
     "language": {
@@ -212,6 +213,13 @@
       "maxConcurrentSessionsDescription": "الحد الأقصى لعدد جلسات الوكيل التفاعلية النشطة في وقت واحد (1–10)",
       "hint": "علامة المحادثة تُنشئ عملية وكيل مستمرة لكل ميزة. المهلة التلقائية تُوقف الجلسات الخاملة تلقائيًا لتوفير الموارد. حد الجلسات المتزامنة يمنع الاستخدام المفرط للموارد على أجهزة المطورين."
     },
+    "fabLayout": {
+      "title": "التخطيط",
+      "description": "التحكم في موضع أزرار الإجراء العائمة في مركز التحكم",
+      "swapPosition": "تبديل مواضع الأزرار العائمة",
+      "swapPositionDescription": "نقل زر المحادثة إلى اليسار وزر الإنشاء إلى اليمين",
+      "hint": "يوجد زران عائمان (إنشاء ومحادثة) في الزوايا السفلية لمركز التحكم. قم بتفعيل هذا الخيار لتبديل مواضعهما."
+    },
     "database": {
       "title": "قاعدة البيانات",
       "description": "مسار قاعدة البيانات وإدارتها",

package/dist/translations/de/web.json

@@ -14,6 +14,7 @@
       "notifications": "Benachrichtigungen",
       "flags": "Flags",
       "chat": "Chat",
+      "layout": "Layout",
       "database": "Datenbank"
     },
     "language": {
@@ -198,6 +199,13 @@
       "maxConcurrentSessionsDescription": "Maximale Anzahl aktiver interaktiver Agenten-Sitzungen gleichzeitig (1–10)",
       "hint": "Der Chat-Tab startet einen persistenten Agentenprozess pro Feature. Das Auto-Zeitlimit stoppt inaktive Sitzungen automatisch, um Ressourcen zu sparen. Das Limit für gleichzeitige Sitzungen verhindert unkontrollierten Ressourcenverbrauch auf Entwicklermaschinen."
     },
+    "fabLayout": {
+      "title": "Layout",
+      "description": "Position der schwebenden Aktionsschaltflächen im Kontrollzentrum steuern",
+      "swapPosition": "FAB-Positionen tauschen",
+      "swapPositionDescription": "Chat-Button nach links und Erstellen-Button nach rechts verschieben",
+      "hint": "Die zwei schwebenden Aktionsschaltflächen (Erstellen und Chat) befinden sich in den unteren Ecken des Kontrollzentrums. Aktivieren Sie diese Option, um ihre Positionen zu tauschen."
+    },
     "database": {
       "title": "Datenbank",
       "description": "Datenbankpfad und -verwaltung",

package/dist/translations/en/web.json

@@ -14,6 +14,7 @@
       "notifications": "Notifications",
       "flags": "Flags",
       "chat": "Chat",
+      "layout": "Layout",
       "database": "Database"
     },
     "language": {
@@ -212,6 +213,13 @@
       "maxConcurrentSessionsDescription": "Maximum number of active interactive agent sessions at once (1–10)",
       "hint": "The Chat tab spawns a persistent agent process per feature. Auto-timeout stops idle sessions automatically to conserve resources. The concurrent session cap prevents runaway resource usage on developer machines."
     },
+    "fabLayout": {
+      "title": "Layout",
+      "description": "Control the position of floating action buttons in the control center",
+      "swapPosition": "Swap FAB positions",
+      "swapPositionDescription": "Move the Chat button to the left and the Create button to the right",
+      "hint": "The two floating action buttons (Create and Chat) sit in the bottom corners of the control center. Enable this toggle to swap their positions."
+    },
     "database": {
       "title": "Database",
       "description": "Database path and management",

package/dist/translations/es/web.json

@@ -14,6 +14,7 @@
       "notifications": "Notificaciones",
       "flags": "Opciones",
       "chat": "Chat",
+      "layout": "Diseño",
       "database": "Base de datos"
     },
     "language": {
@@ -212,6 +213,13 @@
       "maxConcurrentSessionsDescription": "Número máximo de sesiones de agente interactivo activas a la vez (1-10)",
       "hint": "La pestaña de chat genera un proceso de agente persistente por funcionalidad. El tiempo de espera automático detiene las sesiones inactivas automáticamente para conservar recursos. El límite de sesiones concurrentes previene el uso excesivo de recursos en las máquinas de los desarrolladores."
     },
+    "fabLayout": {
+      "title": "Diseño",
+      "description": "Controlar la posición de los botones de acción flotantes en el centro de control",
+      "swapPosition": "Intercambiar posiciones de FAB",
+      "swapPositionDescription": "Mover el botón de Chat a la izquierda y el de Crear a la derecha",
+      "hint": "Los dos botones de acción flotantes (Crear y Chat) se ubican en las esquinas inferiores del centro de control. Active esta opción para intercambiar sus posiciones."
+    },
     "database": {
       "title": "Base de datos",
       "description": "Ruta de la base de datos y administración",

package/dist/translations/fr/web.json

@@ -14,6 +14,7 @@
       "notifications": "Notifications",
       "flags": "Drapeaux",
       "chat": "Chat",
+      "layout": "Disposition",
       "database": "Base de données"
     },
     "language": {
@@ -212,6 +213,13 @@
       "maxConcurrentSessionsDescription": "Nombre maximum de sessions d'agent interactif actives simultanément (1-10)",
       "hint": "L'onglet Chat lance un processus d'agent persistant par fonctionnalité. Le délai d'inactivité automatique arrête les sessions inactives pour économiser les ressources. Le plafond de sessions simultanées empêche l'utilisation incontrôlée des ressources sur les machines de développement."
     },
+    "fabLayout": {
+      "title": "Disposition",
+      "description": "Contrôler la position des boutons d'action flottants dans le centre de contrôle",
+      "swapPosition": "Inverser les positions des FAB",
+      "swapPositionDescription": "Déplacer le bouton Chat à gauche et le bouton Créer à droite",
+      "hint": "Les deux boutons d'action flottants (Créer et Chat) se trouvent dans les coins inférieurs du centre de contrôle. Activez cette option pour inverser leurs positions."
+    },
     "database": {
       "title": "Base de données",
       "description": "Chemin et gestion de la base de données",

package/dist/translations/he/web.json

@@ -14,6 +14,7 @@
       "notifications": "התראות",
       "flags": "דגלים",
       "chat": "צ'אט",
+      "layout": "פריסה",
       "database": "מסד נתונים"
     },
     "language": {
@@ -212,6 +213,13 @@
       "maxConcurrentSessionsDescription": "מספר מרבי של סשנים אינטראקטיביים פעילים בו-זמנית (1-10)",
       "hint": "לשונית הצ'אט מפעילה תהליך סוכן מתמשך לכל פיצ'ר. תפוגת זמן אוטומטית עוצרת סשנים לא פעילים כדי לחסוך במשאבים. מגבלת הסשנים המקבילים מונעת שימוש מופרז במשאבים על מכונות מפתחים."
     },
+    "fabLayout": {
+      "title": "פריסה",
+      "description": "שליטה במיקום כפתורי הפעולה הצפים במרכז הבקרה",
+      "swapPosition": "החלפת מיקומי כפתורים צפים",
+      "swapPositionDescription": "העברת כפתור הצ'אט לשמאל וכפתור היצירה לימין",
+      "hint": "שני כפתורי הפעולה הצפים (יצירה וצ'אט) נמצאים בפינות התחתונות של מרכז הבקרה. הפעל את האפשרות הזו כדי להחליף את מיקומיהם."
+    },
     "database": {
       "title": "מסד נתונים",
       "description": "נתיב מסד הנתונים וניהול",