@invect/ui 0.0.1

package/src/routes/flow-route-layout.tsx

@@ -0,0 +1,113 @@
+import React, { useMemo, useCallback, createContext, useContext } from 'react';
+import { Outlet, useParams, useLocation } from 'react-router';
+import { FlowHeader } from '../components/flow-editor/FlowHeader';
+import { useFlowEditor } from '../components/flow-editor/use-flow-editor';
+import { useUpdateFlow } from '../api/flows.api';
+import { ReactFlowProvider } from '@xyflow/react';
+import { useFlowEditorStore } from '../components/flow-editor/flow-editor.store';
+
+interface FlowRouteLayoutProps {
+  basePath?: string;
+}
+
+// Options for save operation
+interface SaveOptions {
+  skipSuccessToast?: boolean;
+}
+
+// Context for flow actions
+interface FlowActionsContextType {
+  // Always available
+  onExecute: () => Promise<void>;
+  isExecuting: boolean;
+  isActive?: boolean;
+  isTogglingActive: boolean;
+  onToggleActive?: () => void;
+  // Edit-only
+  isDirty?: boolean;
+  onSave?: (options?: SaveOptions) => Promise<boolean>;
+  isSaving?: boolean;
+}
+
+const FlowActionsContext = createContext<FlowActionsContextType | null>(null);
+
+export function useFlowActions() {
+  return useContext(FlowActionsContext);
+}
+
+export function FlowRouteLayout({ basePath = '' }: FlowRouteLayoutProps) {
+  const { flowId, version } = useParams();
+  const location = useLocation();
+
+  // Only provide context in edit view (when path ends with flow ID or version)
+  const isEditView = location.pathname.includes('/flow/') && !location.pathname.includes('/runs');
+
+  // Use the new Zustand-based hook
+  const { flowName, isDirty, isActive, save, execute, isSaving, isExecuting } = useFlowEditor({
+    flowId: flowId ?? '',
+    version,
+    basePath,
+  });
+
+  // Toggle flow active state
+  const updateFlowMutation = useUpdateFlow();
+  const handleToggleActive = useCallback(() => {
+    if (!flowId || isActive === undefined) {
+      return;
+    }
+    updateFlowMutation.mutate({ id: flowId, data: { isActive: !isActive } });
+  }, [flowId, isActive, updateFlowMutation]);
+
+  // Get setFlowName from store for header updates
+  const setFlowName = useFlowEditorStore((s) => s.setFlowName);
+
+  // Context value — always provided for Run + Active/Inactive; save fields only in edit view
+  const flowActionsValue = useMemo<FlowActionsContextType>(
+    () => ({
+      onExecute: execute,
+      isExecuting,
+      isActive,
+      isTogglingActive: updateFlowMutation.isPending,
+      onToggleActive: handleToggleActive,
+      ...(isEditView
+        ? {
+            isDirty,
+            onSave: save,
+            isSaving,
+          }
+        : {}),
+    }),
+    [
+      isEditView,
+      isDirty,
+      save,
+      execute,
+      isSaving,
+      isExecuting,
+      isActive,
+      updateFlowMutation.isPending,
+      handleToggleActive,
+    ],
+  );
+
+  return (
+    <ReactFlowProvider>
+      <FlowActionsContext.Provider value={flowActionsValue}>
+        <div className="imp-page flex flex-col flex-1 min-h-0 bg-imp-background">
+          <FlowHeader
+            flowName={flowName}
+            onFlowNameChange={setFlowName}
+            isDirty={flowActionsValue?.isDirty}
+            onSave={flowActionsValue?.onSave}
+            isSaving={flowActionsValue?.isSaving}
+          />
+          <div className="imp-page flex-1 min-h-0 bg-imp-background">
+            <Outlet />
+          </div>
+        </div>
+      </FlowActionsContext.Provider>
+    </ReactFlowProvider>
+  );
+}
+
+export default FlowRouteLayout;

package/src/routes/flow-runs.tsx

@@ -0,0 +1,22 @@
+import { FlowRunsView } from '../components/flow-viewer/FlowRunsView';
+import { useParams } from 'react-router';
+import { useDocumentTitle } from '../hooks/use-document-title';
+
+interface FlowRunsProps {
+  basePath?: string;
+}
+
+export const FlowRuns = ({ basePath = '' }: FlowRunsProps) => {
+  useDocumentTitle('runs');
+  const { flowId, version } = useParams();
+
+  if (!flowId) {
+    return (
+      <div className="flex items-center justify-center w-full h-full">
+        <div className="text-muted-foreground">No flow ID provided</div>
+      </div>
+    );
+  }
+
+  return <FlowRunsView flowId={flowId} flowVersion={version} basePath={basePath} />;
+};

package/src/routes/flow.tsx

@@ -0,0 +1,22 @@
+import { FlowEditor } from '../components/flow-editor/FlowEditor';
+import { useParams } from 'react-router';
+import { useDocumentTitle } from '../hooks/use-document-title';
+
+interface FlowProps {
+  basePath?: string;
+}
+
+export const Flow = ({ basePath = '' }: FlowProps) => {
+  useDocumentTitle('edit');
+  const { flowId, version } = useParams();
+
+  if (!flowId) {
+    return (
+      <div className="flex items-center justify-center w-full h-full">
+        <div className="text-muted-foreground">No flow ID provided</div>
+      </div>
+    );
+  }
+
+  return <FlowEditor flowId={flowId} flowVersion={version} basePath={basePath} />;
+};

package/src/routes/home.tsx

@@ -0,0 +1,282 @@
+import { Link, useNavigate } from 'react-router';
+import {
+  Plus,
+  Loader2,
+  Activity,
+  TrendingUp,
+  Zap,
+  ArrowRight,
+  BarChart3,
+  Key,
+  History,
+  Search,
+} from 'lucide-react';
+import { useState, useMemo } from 'react';
+import { PageLayout } from '../components/PageLayout';
+import { useDocumentTitle } from '../hooks/use-document-title';
+import { useFlows, useDashboardStats, useCreateFlow } from '../api/flows.api';
+import { Button } from '../components/ui/button';
+import { Card, CardContent } from '../components/ui/card';
+import { StatCard } from '../components/dashboard/StatCard';
+import { FlowCard } from '../components/dashboard/FlowCard';
+import { RecentActivityTable } from '../components/dashboard/RecentActivityTable';
+import { FailedRunsAlert } from '../components/dashboard/FailedRunsAlert';
+
+// ─── Main Home Page ─────────────────────────────────────────────────────────
+
+interface HomeProps {
+  basePath?: string;
+}
+
+export const Home = ({ basePath = '' }: HomeProps) => {
+  useDocumentTitle('dashboard');
+  const navigate = useNavigate();
+  const { data: statsData, isLoading: statsLoading } = useDashboardStats();
+  const { data: flowsResponse, isLoading: flowsLoading, error } = useFlows();
+  const flows = flowsResponse?.data ?? [];
+  const createFlowMutation = useCreateFlow();
+  const [flowSearch, setFlowSearch] = useState('');
+  const [flowPage, setFlowPage] = useState(1);
+  const FLOWS_PAGE_SIZE = 8;
+
+  const filteredFlows = useMemo(() => {
+    if (!flowSearch.trim()) {
+      return flows;
+    }
+    const q = flowSearch.toLowerCase();
+    return flows.filter((f) => f.name.toLowerCase().includes(q));
+  }, [flows, flowSearch]);
+
+  const totalFlowPages = Math.max(1, Math.ceil(filteredFlows.length / FLOWS_PAGE_SIZE));
+  const paginatedFlows = filteredFlows.slice(
+    (flowPage - 1) * FLOWS_PAGE_SIZE,
+    flowPage * FLOWS_PAGE_SIZE,
+  );
+
+  const recentRuns = statsData?.recentRuns ?? [];
+
+  const handleCreateFlow = () => {
+    createFlowMutation.mutate(
+      { name: 'Untitled Flow', tags: [], isActive: true },
+      { onSuccess: (data) => navigate(`${basePath}/flow/${data.id}`) },
+    );
+  };
+
+  return (
+    <PageLayout
+      title="Dashboard"
+      subtitle="Overview of your workflow activity"
+      actions={
+        <>
+          <Button variant="outline" size="sm" asChild>
+            <Link to={`${basePath}/credentials`}>
+              <Key className="h-3.5 w-3.5 mr-1.5" />
+              Credentials
+            </Link>
+          </Button>
+          <Button variant="outline" size="sm" asChild>
+            <Link to={`${basePath}/flow-runs`}>
+              <History className="h-3.5 w-3.5 mr-1.5" />
+              Flow Runs
+            </Link>
+          </Button>
+          <Button size="sm" onClick={handleCreateFlow} disabled={createFlowMutation.isPending}>
+            {createFlowMutation.isPending ? (
+              <Loader2 className="h-3.5 w-3.5 mr-1.5 animate-spin" />
+            ) : (
+              <Plus className="h-3.5 w-3.5 mr-1.5" />
+            )}
+            New Flow
+          </Button>
+        </>
+      }
+    >
+      {/* ── Stats Row ───────────────────────────────────────── */}
+      <div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
+        <StatCard
+          title="Total Flows"
+          value={statsLoading ? '—' : (statsData?.totalFlows ?? 0)}
+          subtitle={
+            !statsLoading && flows.length > 0
+              ? `${flows.filter((f) => f.isActive).length} active`
+              : undefined
+          }
+          icon={BarChart3}
+        />
+        <StatCard
+          title="Runs (24h)"
+          value={statsLoading ? '—' : (statsData?.runsLast24h ?? 0)}
+          subtitle={!statsLoading ? `${statsData?.totalRuns ?? 0} total all-time` : undefined}
+          icon={Activity}
+        />
+        <StatCard
+          title="Success Rate"
+          value={statsLoading ? '—' : `${statsData?.successRate ?? 0}%`}
+          subtitle={
+            !statsLoading && statsData?.failedRunsLast24h
+              ? `${statsData.failedRunsLast24h} failed (24h)`
+              : !statsLoading
+                ? 'No failures (24h)'
+                : undefined
+          }
+          icon={TrendingUp}
+        />
+        <StatCard
+          title="Active Runs"
+          value={statsLoading ? '—' : (statsData?.activeRuns ?? 0)}
+          subtitle={
+            !statsLoading && statsData && statsData.activeRuns > 0
+              ? 'Currently executing'
+              : !statsLoading
+                ? 'All quiet'
+                : undefined
+          }
+          icon={Zap}
+        />
+      </div>
+
+      {/* ── Error State ─────────────────────────────────────── */}
+      {error && (
+        <Card className="border-destructive/30">
+          <CardContent className="py-4">
+            <div className="text-sm text-destructive">
+              <strong>Error loading data:</strong>{' '}
+              {error instanceof Error ? error.message : 'Failed to connect to server'}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* ── Failed Runs Alert ───────────────────────────────── */}
+      <FailedRunsAlert basePath={basePath} />
+
+      {/* ── Main Grid: Flows + Recent Activity ──────────────── */}
+      <div className="grid gap-6 lg:grid-cols-5">
+        {/* ── Flows List (3/5) ────────────────────────────────── */}
+        <div className="space-y-4 lg:col-span-3">
+          <div className="flex items-center justify-between gap-2">
+            <h2 className="text-base font-semibold shrink-0">
+              Flows
+              {!flowsLoading && ` (${filteredFlows.length}${flowSearch ? `/${flows.length}` : ''})`}
+            </h2>
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 pointer-events-none text-muted-foreground" />
+              <input
+                type="text"
+                value={flowSearch}
+                onChange={(e) => {
+                  setFlowSearch(e.target.value);
+                  setFlowPage(1);
+                }}
+                placeholder="Search flows…"
+                className="py-2 pr-3 text-sm bg-transparent border rounded-lg outline-none w-72 border-border pl-9 placeholder:text-muted-foreground focus:border-primary/50"
+              />
+            </div>
+          </div>
+
+          {flowsLoading && (
+            <div className="flex items-center justify-center py-12 text-sm text-muted-foreground">
+              <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+              Loading flows…
+            </div>
+          )}
+
+          {!flowsLoading && flows.length === 0 && !error && (
+            <Card>
+              <CardContent className="flex flex-col items-center justify-center py-12">
+                <div className="p-4 mb-4 rounded-full bg-muted">
+                  <Plus className="w-8 h-8 text-muted-foreground" />
+                </div>
+                <h3 className="mb-1 text-sm font-medium">No flows yet</h3>
+                <p className="max-w-xs mb-4 text-xs text-center text-muted-foreground">
+                  Create your first workflow to get started with automation.
+                </p>
+                <Button
+                  size="sm"
+                  onClick={handleCreateFlow}
+                  disabled={createFlowMutation.isPending}
+                >
+                  {createFlowMutation.isPending ? (
+                    <Loader2 className="h-3.5 w-3.5 mr-1.5 animate-spin" />
+                  ) : (
+                    <Plus className="h-3.5 w-3.5 mr-1.5" />
+                  )}
+                  Create Flow
+                </Button>
+              </CardContent>
+            </Card>
+          )}
+
+          {!flowsLoading && flows.length > 0 && (
+            <div className="space-y-2">
+              {filteredFlows.length === 0 ? (
+                <p className="py-6 text-sm text-center text-muted-foreground">
+                  No flows match &ldquo;{flowSearch}&rdquo;
+                </p>
+              ) : (
+                paginatedFlows.map((flow) => (
+                  <FlowCard key={flow.id} flow={flow} basePath={basePath} />
+                ))
+              )}
+            </div>
+          )}
+
+          {/* Flows Pagination */}
+          {!flowsLoading && filteredFlows.length > 0 && (
+            <div className="flex items-center justify-between text-xs text-muted-foreground">
+              <span>
+                {filteredFlows.length} flow{filteredFlows.length !== 1 ? 's' : ''}
+                {flowSearch ? ` matching “${flowSearch}”` : ''}
+              </span>
+              <div className="flex items-center gap-2">
+                <button
+                  type="button"
+                  onClick={() => setFlowPage((p) => Math.max(1, p - 1))}
+                  disabled={flowPage === 1}
+                  className="rounded-md border border-border px-2.5 py-1 hover:bg-muted disabled:opacity-50"
+                >
+                  Previous
+                </button>
+                <span>
+                  {flowPage} / {totalFlowPages}
+                </span>
+                <button
+                  type="button"
+                  onClick={() => setFlowPage((p) => Math.min(totalFlowPages, p + 1))}
+                  disabled={flowPage === totalFlowPages}
+                  className="rounded-md border border-border px-2.5 py-1 hover:bg-muted disabled:opacity-50"
+                >
+                  Next
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* ── Recent Activity (2/5) ───────────────────────────── */}
+        <div className="space-y-4 lg:col-span-2">
+          <div className="flex items-center justify-between">
+            <h2 className="text-base font-semibold">Recent Activity</h2>
+            <Button variant="ghost" size="sm" className="text-xs" asChild>
+              <Link to={`${basePath}/flow-runs`}>
+                View all
+                <ArrowRight className="w-3 h-3 ml-1" />
+              </Link>
+            </Button>
+          </div>
+
+          <Card className="gap-0 py-0">
+            <CardContent className="p-0">
+              <RecentActivityTable
+                runs={recentRuns}
+                flows={flows}
+                basePath={basePath}
+                isLoading={statsLoading}
+              />
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </PageLayout>
+  );
+};

package/src/services/index.ts

@@ -0,0 +1,6 @@
+// Re-export validation types from types for convenience
+export type {
+  FlowValidationError,
+  FlowValidationWarning,
+  FlowValidationResult,
+} from '@invect/core/types';

package/src/stores/executionViewStore.ts

@@ -0,0 +1,211 @@
+import { create, type StoreApi, type UseBoundStore } from 'zustand';
+import { devtools, subscribeWithSelector } from 'zustand/middleware';
+import { immer } from 'zustand/middleware/immer';
+import type { FlowRunStatus } from '@invect/core/types';
+
+interface ExecutionViewState {
+  // Currently viewed execution
+  activeFlowRunId: string | null;
+  activeFlowId: string | null;
+
+  // Selected node in execution view (for viewing outputs)
+  selectedExecutionNodeId: string | null;
+
+  // Execution list filters
+  statusFilter: FlowRunStatus | 'all';
+  flowIdFilter: string | null;
+
+  // Pagination
+  page: number;
+  limit: number;
+
+  // Sorting
+  sortBy: 'startedAt' | 'endedAt' | 'status';
+  sortOrder: 'asc' | 'desc';
+
+  // Logs panel state
+  logsExpanded: boolean;
+  selectedLogNodeId: string | null;
+}
+
+interface ExecutionViewActions {
+  // Active execution
+  setActiveExecution: (flowId: string, flowRunId: string) => void;
+  clearActiveExecution: () => void;
+
+  // Node selection in execution view
+  selectExecutionNode: (nodeId: string | null) => void;
+
+  // Filters
+  setStatusFilter: (status: FlowRunStatus | 'all') => void;
+  setFlowIdFilter: (flowId: string | null) => void;
+  clearFilters: () => void;
+
+  // Pagination
+  setPage: (page: number) => void;
+  setLimit: (limit: number) => void;
+
+  // Sorting
+  setSortBy: (sortBy: ExecutionViewState['sortBy']) => void;
+  setSortOrder: (sortOrder: ExecutionViewState['sortOrder']) => void;
+
+  // Logs
+  toggleLogsExpanded: () => void;
+  setLogsExpanded: (expanded: boolean) => void;
+  selectLogNode: (nodeId: string | null) => void;
+
+  // Reset
+  reset: () => void;
+}
+
+export type ExecutionViewStore = ExecutionViewState & ExecutionViewActions;
+
+const initialState: ExecutionViewState = {
+  activeFlowRunId: null,
+  activeFlowId: null,
+  selectedExecutionNodeId: null,
+  statusFilter: 'all',
+  flowIdFilter: null,
+  page: 1,
+  limit: 20,
+  sortBy: 'startedAt',
+  sortOrder: 'desc',
+  logsExpanded: false,
+  selectedLogNodeId: null,
+};
+
+export const useExecutionViewStore: UseBoundStore<StoreApi<ExecutionViewStore>> =
+  create<ExecutionViewStore>()(
+    devtools(
+      subscribeWithSelector(
+        immer((set) => ({
+          ...initialState,
+
+          // Active execution
+          setActiveExecution: (flowId, flowRunId) =>
+            set((state) => {
+              state.activeFlowId = flowId;
+              state.activeFlowRunId = flowRunId;
+              state.selectedExecutionNodeId = null;
+              state.selectedLogNodeId = null;
+            }),
+
+          clearActiveExecution: () =>
+            set((state) => {
+              state.activeFlowId = null;
+              state.activeFlowRunId = null;
+              state.selectedExecutionNodeId = null;
+              state.selectedLogNodeId = null;
+            }),
+
+          // Node selection
+          selectExecutionNode: (nodeId) =>
+            set((state) => {
+              state.selectedExecutionNodeId = nodeId;
+            }),
+
+          // Filters
+          setStatusFilter: (status) =>
+            set((state) => {
+              state.statusFilter = status;
+              state.page = 1; // Reset to first page when filter changes
+            }),
+
+          setFlowIdFilter: (flowId) =>
+            set((state) => {
+              state.flowIdFilter = flowId;
+              state.page = 1;
+            }),
+
+          clearFilters: () =>
+            set((state) => {
+              state.statusFilter = 'all';
+              state.flowIdFilter = null;
+              state.page = 1;
+            }),
+
+          // Pagination
+          setPage: (page) =>
+            set((state) => {
+              state.page = page;
+            }),
+
+          setLimit: (limit) =>
+            set((state) => {
+              state.limit = limit;
+              state.page = 1; // Reset to first page when limit changes
+            }),
+
+          // Sorting
+          setSortBy: (sortBy) =>
+            set((state) => {
+              state.sortBy = sortBy;
+            }),
+
+          setSortOrder: (sortOrder) =>
+            set((state) => {
+              state.sortOrder = sortOrder;
+            }),
+
+          // Logs
+          toggleLogsExpanded: () =>
+            set((state) => {
+              state.logsExpanded = !state.logsExpanded;
+            }),
+
+          setLogsExpanded: (expanded) =>
+            set((state) => {
+              state.logsExpanded = expanded;
+            }),
+
+          selectLogNode: (nodeId) =>
+            set((state) => {
+              state.selectedLogNodeId = nodeId;
+            }),
+
+          // Reset
+          reset: () => set(() => ({ ...initialState })),
+        })),
+      ),
+      { name: 'execution-view' },
+    ),
+  );
+
+// Selector hooks
+export const useActiveFlowRunId = () => useExecutionViewStore((s) => s.activeFlowRunId);
+export const useActiveFlowId = () => useExecutionViewStore((s) => s.activeFlowId);
+export const useSelectedExecutionNodeId = () =>
+  useExecutionViewStore((s) => s.selectedExecutionNodeId);
+export const useStatusFilter = () => useExecutionViewStore((s) => s.statusFilter);
+export const useExecutionPagination = () =>
+  useExecutionViewStore((s) => ({
+    page: s.page,
+    limit: s.limit,
+    setPage: s.setPage,
+    setLimit: s.setLimit,
+  }));
+export const useExecutionSorting = () =>
+  useExecutionViewStore((s) => ({
+    sortBy: s.sortBy,
+    sortOrder: s.sortOrder,
+    setSortBy: s.setSortBy,
+    setSortOrder: s.setSortOrder,
+  }));
+export const useLogsState = () =>
+  useExecutionViewStore((s) => ({
+    logsExpanded: s.logsExpanded,
+    selectedLogNodeId: s.selectedLogNodeId,
+    toggleLogsExpanded: s.toggleLogsExpanded,
+    setLogsExpanded: s.setLogsExpanded,
+    selectLogNode: s.selectLogNode,
+  }));
+
+// Combined selectors
+export const useExecutionFilters = () =>
+  useExecutionViewStore((s) => ({
+    statusFilter: s.statusFilter,
+    flowIdFilter: s.flowIdFilter,
+    setStatusFilter: s.setStatusFilter,
+    setFlowIdFilter: s.setFlowIdFilter,
+    clearFilters: s.clearFilters,
+  }));