Feat/manual user guides

src/features/test-flows/ui/TestFlows.module.scss

@@ -408,6 +408,153 @@
   background: color-mix(in oklab, var(--background) 68%, transparent);
 }
 
+.stepsDrawerOverlay {
+  position: fixed;
+  z-index: 110;
+  inset: 0;
+  display: flex;
+  justify-content: flex-end;
+  background: color-mix(in oklab, var(--background) 56%, transparent);
+}
+
+.stepsDrawerPanel {
+  --flow-design-class: var(--chart-1);
+  --flow-assertion: var(--chart-4);
+  --flow-action-hook: var(--chart-5);
+  --flow-group: var(--chart-2);
+
+  display: flex;
+  flex-direction: column;
+  width: min(34rem, 100%);
+  height: 100%;
+  min-width: 0;
+  border-left: 1px solid var(--border);
+  background: var(--card);
+  color: var(--text-primary);
+  box-shadow: -18px 0 38px color-mix(in oklab, var(--background) 32%, transparent);
+}
+
+.stepsDrawerHeader {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1rem;
+  border-bottom: 1px solid var(--border);
+
+  h2,
+  p {
+    margin: 0;
+  }
+
+  h2 {
+    margin-top: 0.2rem;
+    color: var(--text-primary);
+    font-size: 1rem;
+    line-height: 1.25;
+  }
+
+  p {
+    margin-top: 0.25rem;
+    color: var(--text-secondary);
+    font-size: 0.8rem;
+  }
+}
+
+.stepsDrawerEyebrow {
+  color: var(--text-secondary);
+  font-size: 0.68rem;
+  font-weight: 700;
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
+.stepsDrawerBody {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 1rem;
+}
+
+.stepsDrawerList {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.stepsDrawerEditorBlock {
+  overflow: visible;
+}
+
+.stepsDrawerTransitionBlock {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.625rem;
+  min-height: 0;
+  padding: 0.625rem 0.75rem;
+  border: 1px solid var(--border);
+  border-left: 3px solid var(--success);
+  border-radius: 0.375rem;
+  background: var(--muted);
+  list-style: none;
+}
+
+.stepsDrawerStepIndex {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 1.625rem;
+  width: 1.625rem;
+  height: 1.375rem;
+  border-radius: 999px;
+  background: var(--success);
+  color: var(--primary-foreground);
+  font-size: 0.6875rem;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+}
+
+.stepsDrawerTransitionBody {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 0.3rem;
+  min-width: 0;
+}
+
+.stepsDrawerBlockDescription {
+  min-width: 0;
+  margin: 0;
+  overflow: visible;
+  color: var(--text-primary);
+  line-height: 1.45;
+  overflow-wrap: anywhere;
+  white-space: normal;
+}
+
+.stepsDrawerTransitionMeta {
+  color: var(--text-secondary);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+  font-size: 0.72rem;
+  line-height: 1.4;
+  overflow-wrap: anywhere;
+  white-space: normal;
+}
+
+.stepsDrawerState {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  min-height: 14rem;
+  color: var(--text-secondary);
+  font-size: 0.88rem;
+  text-align: center;
+}
+
 .generateModal {
   display: flex;
   flex-direction: column;
@@ -526,6 +673,11 @@
     flex-direction: column;
   }
 
+  .stepsDrawerPanel {
+    width: 100%;
+    border-left: 0;
+  }
+
   .modalGridTwo {
     grid-template-columns: 1fr;
   }

src/features/test-flows/ui/TestFlows.tsx

@@ -19,7 +19,12 @@ import { ContentErrorPanel } from "@shared/feedback/ContentErrorPanel";
 import { ErrorBanner } from "@shared/feedback/ErrorBanner";
 import { PageLoader } from "@shared/feedback/PageLoader/PageLoader";
 import { Button, Card, Input, Label, Select } from "@shared/ui";
-import { useGenerateTestFlow, useRegressionCodebases, useTestFlows } from "../model/queries/useTestFlows";
+import {
+  useFlowEditor,
+  useGenerateTestFlow,
+  useRegressionCodebases,
+  useTestFlows,
+} from "../model/queries/useTestFlows";
 import type {
   GenerateTestFlowRequest,
   ListTestFlowsRequest,
@@ -29,6 +34,7 @@ import type {
 } from "../model/types/test-flows.types";
 import { TestFlowsFilters } from "./components/TestFlowsFilters";
 import { TestFlowsHeader } from "./components/TestFlowsHeader";
+import { TestFlowStepsDrawer } from "./components/TestFlowStepsDrawer";
 import { TestFlowsTable } from "./components/TestFlowsTable";
 import styles from "./TestFlows.module.scss";
 
@@ -218,6 +224,7 @@ function TestFlows() {
   const [cursor, setCursor] = useState<string | null>(null);
   const [cursorStack, setCursorStack] = useState<Array<string | null>>([]);
   const [generatingFlow, setGeneratingFlow] = useState<TestFlow | null>(null);
+  const [showingFlow, setShowingFlow] = useState<TestFlow | null>(null);
 
   const requestedApplicationId = searchParams.get("appId");
   const requestedVersionId = searchParams.get("versionId");
@@ -315,6 +322,7 @@ function TestFlows() {
 
   const flowsQuery = useTestFlows(selectedProject?.id ?? null, activeApplication?.id ?? null, filters);
   const regressionCodebasesQuery = useRegressionCodebases(selectedProject?.id ?? null, activeApplication?.id ?? null);
+  const stepsDrawerQuery = useFlowEditor(projectId, activeApplication?.id ?? null, showingFlow?.id ?? null);
   const generateFlowMutation = useGenerateTestFlow();
   const flows = useMemo(() => flowsQuery.data?.flows ?? [], [flowsQuery.data?.flows]);
   const filteredFlows = useMemo(() => {
@@ -503,6 +511,7 @@ function TestFlows() {
           isFetching={flowsQuery.isFetching}
           generatingFlowId={generateFlowMutation.isPending ? generatingFlow?.id : null}
           onGenerate={(flow) => setGeneratingFlow(flow)}
+          onShow={(flow) => setShowingFlow(flow)}
           onEdit={(flow) => {
             if (!activeApplication) return;
             navigate(
@@ -523,6 +532,17 @@ function TestFlows() {
         />
       )}
 
+      {showingFlow ? (
+        <TestFlowStepsDrawer
+          flow={showingFlow}
+          detail={stepsDrawerQuery.data}
+          loading={stepsDrawerQuery.isLoading || stepsDrawerQuery.isFetching}
+          error={stepsDrawerQuery.error}
+          onClose={() => setShowingFlow(null)}
+          onRetry={() => void stepsDrawerQuery.refetch()}
+        />
+      ) : null}
+
       {generatingFlow ? (
         <GenerateFlowModal
           flow={generatingFlow}