archrip 0.2.2 → 0.2.3

package/dist/templates/slash-commands/claude/archrip-scan.md

@@ -129,9 +129,9 @@ After writing the file:
 - UseCase: `id`, `name`, `nodeIds` — all required
 
 ### Node Rules
-- `id`: kebab-case, prefixed by category abbreviation (ctrl-, svc-, port-, adpt-, model-, ext-, job-, dto-)
+- `id`: kebab-case, prefixed by category abbreviation (ctrl-, svc-, port-, adpt-, model-, db-, ext-, job-, dto-)
 - `layer`: non-negative integer. **Higher = closer to domain core / more stable. Lower = closer to external world / more volatile.** Dagre (TB) places higher layers lower on screen; concentric places them at center. Use as many layers as the architecture requires (typically 3-6). Example for DDD: 0=external, 1=adapters, 2=controllers, 3=app services, 4=ports, 5=domain entities. Example for MVC: 0=external, 1=controllers, 2=services, 3=models.
-- `category`: one of controller, service, port, adapter, model, external, job, dto (or custom)
+- `category`: one of controller, service, port, adapter, model, database, external, job, dto (or custom). Use `model` for domain entities/value objects (core business logic). Use `database` for DB tables, migrations, ORMs, and infrastructure persistence.
 - `label`: display name for the node
 - `filePath`: relative from project root
 - `depth` (optional): 0=overview, 1=structure, 2=detail. Auto-inferred from `layer` if omitted: with 3+ unique layers, lowest → 0, middle → 1, highest → 2. With 1-2 layers, all nodes get depth 0 (always visible).

package/dist/templates/slash-commands/codex/archrip-scan.md

@@ -129,9 +129,9 @@ After writing the file:
 - UseCase: `id`, `name`, `nodeIds` — all required
 
 ### Node Rules
-- `id`: kebab-case, prefixed by category abbreviation (ctrl-, svc-, port-, adpt-, model-, ext-, job-, dto-)
+- `id`: kebab-case, prefixed by category abbreviation (ctrl-, svc-, port-, adpt-, model-, db-, ext-, job-, dto-)
 - `layer`: non-negative integer. **Higher = closer to domain core / more stable. Lower = closer to external world / more volatile.** Dagre (TB) places higher layers lower on screen; concentric places them at center. Use as many layers as the architecture requires (typically 3-6). Example for DDD: 0=external, 1=adapters, 2=controllers, 3=app services, 4=ports, 5=domain entities. Example for MVC: 0=external, 1=controllers, 2=services, 3=models.
-- `category`: one of controller, service, port, adapter, model, external, job, dto (or custom)
+- `category`: one of controller, service, port, adapter, model, database, external, job, dto (or custom). Use `model` for domain entities/value objects (core business logic). Use `database` for DB tables, migrations, ORMs, and infrastructure persistence.
 - `label`: display name for the node
 - `filePath`: relative from project root
 - `depth` (optional): 0=overview, 1=structure, 2=detail. Auto-inferred from `layer` if omitted: with 3+ unique layers, lowest → 0, middle → 1, highest → 2. With 1-2 layers, all nodes get depth 0 (always visible).

package/dist/templates/slash-commands/gemini/archrip-scan.md

@@ -129,9 +129,9 @@ After writing the file:
 - UseCase: `id`, `name`, `nodeIds` — all required
 
 ### Node Rules
-- `id`: kebab-case, prefixed by category abbreviation (ctrl-, svc-, port-, adpt-, model-, ext-, job-, dto-)
+- `id`: kebab-case, prefixed by category abbreviation (ctrl-, svc-, port-, adpt-, model-, db-, ext-, job-, dto-)
 - `layer`: non-negative integer. **Higher = closer to domain core / more stable. Lower = closer to external world / more volatile.** Dagre (TB) places higher layers lower on screen; concentric places them at center. Use as many layers as the architecture requires (typically 3-6). Example for DDD: 0=external, 1=adapters, 2=controllers, 3=app services, 4=ports, 5=domain entities. Example for MVC: 0=external, 1=controllers, 2=services, 3=models.
-- `category`: one of controller, service, port, adapter, model, external, job, dto (or custom)
+- `category`: one of controller, service, port, adapter, model, database, external, job, dto (or custom). Use `model` for domain entities/value objects (core business logic). Use `database` for DB tables, migrations, ORMs, and infrastructure persistence.
 - `label`: display name for the node
 - `filePath`: relative from project root
 - `depth` (optional): 0=overview, 1=structure, 2=detail. Auto-inferred from `layer` if omitted: with 3+ unique layers, lowest → 0, middle → 1, highest → 2. With 1-2 layers, all nodes get depth 0 (always visible).

package/dist/utils/layout.js

@@ -105,8 +105,9 @@ const CATEGORY_RING_PRIORITY = {
     dto: 3,
     controller: 4,
     adapter: 5,
-    job: 6,
-    external: 7,
+    database: 6,
+    job: 7,
+    external: 8,
 };
 const DEFAULT_RING_PRIORITY = 4; // unknown categories treated as controller-level
 /**

package/dist/utils/layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../src/utils/layout.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../src/utils/layout.ts"],"names":[],"mappings":"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"}

package/dist/viewer-template/src/App.tsx

@@ -16,13 +16,17 @@ import type { ArchFlowNode, ArchNodeData } from './types.ts';
 import { getCategoryColors } from './types.ts';
 import { ArchNode } from './components/nodes/ArchNode.tsx';
 import { GroupNode } from './components/nodes/GroupNode.tsx';
+import { CommandPalette } from './components/CommandPalette.tsx';
 import { DetailPanel } from './components/DetailPanel.tsx';
 import { UseCaseFilter } from './components/UseCaseFilter.tsx';
 import { DepthFilter } from './components/DepthFilter.tsx';
 import { Legend } from './components/Legend.tsx';
 import { ThemeToggle } from './components/ThemeToggle.tsx';
 import { useArchitecture } from './hooks/useArchitecture.ts';
+import { useCategoryFilter } from './hooks/useCategoryFilter.ts';
+import { useCommandPalette } from './hooks/useCommandPalette.ts';
 import { useDepthFilter } from './hooks/useDepthFilter.ts';
+import { useKeyboardShortcuts } from './hooks/useKeyboardShortcuts.ts';
 import { useUseCaseFilter } from './hooks/useUseCaseFilter.ts';
 import { useTheme } from './hooks/useTheme.ts';
 
@@ -31,10 +35,11 @@ const nodeTypes = { archNode: ArchNode, groupNode: GroupNode };
 function AppInner() {
   const { nodes, edges, useCases, projectName, layoutType, loading, error, onNodesChange, onEdgesChange } = useArchitecture();
   const { depthLevel, setDepthLevel, visibleNodes, visibleEdges } = useDepthFilter(nodes, edges, layoutType);
-  const { selectedUseCase, setSelectedUseCase, categories, filteredNodes, filteredEdges } = useUseCaseFilter(visibleNodes, visibleEdges, useCases);
+  const { selectedUseCase, setSelectedUseCase, categories, filteredNodes, filteredEdges, flowInfo } = useUseCaseFilter(visibleNodes, visibleEdges, useCases);
+  const categoryFilter = useCategoryFilter();
   const [selectedNodeId, setSelectedNodeId] = useQueryState('node', parseAsString.withOptions({ history: 'replace' }));
   const { theme, toggleTheme } = useTheme();
-  const { fitView } = useReactFlow();
+  const { fitView, setCenter, getNodes } = useReactFlow();
 
   const selectedNodeData: ArchNodeData | null = useMemo(() => {
     if (!selectedNodeId) return null;
@@ -66,6 +71,70 @@ function AppInner() {
     return () => cancelAnimationFrame(id);
   }, [depthLevel, selectedUseCase, fitView]);
 
+  // Auto-center viewport on active flow step
+  useEffect(() => {
+    if (!flowInfo.flowNodeIds || flowInfo.activeStep < 0) return;
+    const activeNodeId = flowInfo.flowNodeIds[flowInfo.activeStep];
+    if (!activeNodeId) return;
+    const rfNodes = getNodes();
+    const target = rfNodes.find((n) => n.id === activeNodeId);
+    if (!target) return;
+    const x = target.position.x + (target.measured?.width ?? 180) / 2;
+    const y = target.position.y + (target.measured?.height ?? 80) / 2;
+    void setCenter(x, y, { zoom: 1.2, duration: 400 });
+  }, [flowInfo.activeStep, flowInfo.flowNodeIds, getNodes, setCenter]);
+
+  // Category filter: dim hidden categories
+  const displayNodes = useMemo(() => {
+    if (categoryFilter.hiddenCategories.size === 0) return filteredNodes;
+    return filteredNodes.map((node) => {
+      if (categoryFilter.hiddenCategories.has(node.data.category)) {
+        return { ...node, style: { ...node.style, opacity: 0.08, transition: 'opacity 0.3s' } };
+      }
+      return node;
+    });
+  }, [filteredNodes, categoryFilter.hiddenCategories]);
+
+  const displayEdges = useMemo(() => {
+    if (categoryFilter.hiddenCategories.size === 0) return filteredEdges;
+    const hiddenNodeIds = new Set<string>();
+    for (const node of filteredNodes) {
+      if (categoryFilter.hiddenCategories.has(node.data.category)) {
+        hiddenNodeIds.add(node.id);
+      }
+    }
+    return filteredEdges.map((edge) => {
+      if (hiddenNodeIds.has(edge.source) || hiddenNodeIds.has(edge.target)) {
+        return {
+          ...edge,
+          style: { ...edge.style, opacity: 0.08, transition: 'opacity 0.3s' },
+          labelStyle: { ...((edge.labelStyle as Record<string, unknown>) ?? {}), opacity: 0 },
+        };
+      }
+      return edge;
+    });
+  }, [filteredEdges, filteredNodes, categoryFilter.hiddenCategories]);
+
+  // Command palette
+  const palette = useCommandPalette(displayNodes, categoryFilter.hiddenCategories);
+
+  const handlePaletteSelect = useCallback((nodeId: string) => {
+    palette.close();
+    void setSelectedNodeId(nodeId);
+  }, [palette, setSelectedNodeId]);
+
+  const handleEscape = useCallback(() => {
+    if (palette.isOpen) { palette.close(); return; }
+    if (selectedNodeId) { void setSelectedNodeId(null); return; }
+    if (selectedUseCase) { void setSelectedUseCase(null); return; }
+  }, [palette, selectedNodeId, setSelectedNodeId, selectedUseCase, setSelectedUseCase]);
+
+  useKeyboardShortcuts({
+    onTogglePalette: palette.toggle,
+    onEscape: handleEscape,
+    isPaletteOpen: palette.isOpen,
+  });
+
   if (loading) {
     return (
       <div className="w-full h-screen flex items-center justify-center" style={{ color: 'var(--color-content-tertiary)', background: 'var(--color-surface-canvas)' }}>
@@ -88,8 +157,8 @@ function AppInner() {
   return (
     <div className="w-full h-screen relative">
       <ReactFlow
-        nodes={filteredNodes}
-        edges={filteredEdges}
+        nodes={displayNodes}
+        edges={displayEdges}
         onNodesChange={onNodesChange}
         onEdgesChange={onEdgesChange}
         onNodeClick={onNodeClick}
@@ -120,11 +189,17 @@ function AppInner() {
             useCases={useCases}
             selectedUseCase={selectedUseCase}
             onSelect={handleUseCaseSelect}
+            flowInfo={flowInfo}
           />
         )}
         <DepthFilter depthLevel={depthLevel} onSelect={setDepthLevel} />
       </div>
-      <Legend categories={categories} />
+      <Legend
+        categories={categories}
+        hiddenCategories={categoryFilter.hiddenCategories}
+        onToggleCategory={categoryFilter.toggleCategory}
+        onShowAll={categoryFilter.showAll}
+      />
 
       {/* Title + Theme Toggle */}
       <div className="absolute top-3 right-3 z-10 flex items-center gap-2">
@@ -157,6 +232,19 @@ function AppInner() {
           />
         </>
       )}
+
+      {palette.isOpen && (
+        <CommandPalette
+          query={palette.query}
+          onQueryChange={palette.setQuery}
+          results={palette.results}
+          activeIndex={palette.activeIndex}
+          onMoveUp={palette.moveUp}
+          onMoveDown={palette.moveDown}
+          onSelect={handlePaletteSelect}
+          onClose={palette.close}
+        />
+      )}
     </div>
   );
 }

package/dist/viewer-template/src/components/CommandPalette.tsx

@@ -0,0 +1,174 @@
+import { useEffect, useRef } from 'react';
+
+import { getCategoryColors, getCategoryLabel } from '../types.ts';
+import type { CommandPaletteResult } from '../hooks/useCommandPalette.ts';
+
+interface CommandPaletteProps {
+  query: string;
+  onQueryChange: (q: string) => void;
+  results: CommandPaletteResult[];
+  activeIndex: number;
+  onMoveUp: () => void;
+  onMoveDown: () => void;
+  onSelect: (id: string) => void;
+  onClose: () => void;
+}
+
+export function CommandPalette({
+  query,
+  onQueryChange,
+  results,
+  activeIndex,
+  onMoveUp,
+  onMoveDown,
+  onSelect,
+  onClose,
+}: CommandPaletteProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  // Scroll active item into view
+  useEffect(() => {
+    const list = listRef.current;
+    if (!list) return;
+    const item = list.children[activeIndex] as HTMLElement | undefined;
+    item?.scrollIntoView({ block: 'nearest' });
+  }, [activeIndex]);
+
+  function handleKeyDown(e: React.KeyboardEvent) {
+    if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      onMoveUp();
+    } else if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      onMoveDown();
+    } else if (e.key === 'Enter') {
+      e.preventDefault();
+      const item = results[activeIndex];
+      if (item) onSelect(item.id);
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      onClose();
+    }
+  }
+
+  return (
+    <>
+      {/* Overlay */}
+      <div
+        className="fixed inset-0 z-60"
+        style={{ background: 'rgba(0, 0, 0, 0.3)' }}
+        onClick={onClose}
+      />
+
+      {/* Palette card */}
+      <div
+        className="fixed z-60 rounded-xl border overflow-hidden"
+        style={{
+          top: '20%',
+          left: '50%',
+          transform: 'translateX(-50%)',
+          width: 480,
+          maxWidth: 'calc(100vw - 32px)',
+          background: 'var(--color-surface-primary)',
+          borderColor: 'var(--color-border-primary)',
+          boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
+        }}
+      >
+        {/* Search input */}
+        <div
+          className="border-b"
+          style={{ borderColor: 'var(--color-border-primary)' }}
+        >
+          <input
+            ref={inputRef}
+            type="text"
+            value={query}
+            onChange={(e) => onQueryChange(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder="Search nodes..."
+            className="w-full px-4 py-3 text-sm bg-transparent outline-none"
+            style={{ color: 'var(--color-content-primary)' }}
+          />
+        </div>
+
+        {/* Results list */}
+        <div
+          ref={listRef}
+          className="overflow-y-auto"
+          style={{ maxHeight: 320 }}
+        >
+          {results.length === 0 && (
+            <div
+              className="px-4 py-6 text-center text-sm"
+              style={{ color: 'var(--color-content-tertiary)' }}
+            >
+              No nodes found
+            </div>
+          )}
+          {results.map((item, index) => {
+            const colors = getCategoryColors(item.category);
+            const isActive = index === activeIndex;
+            return (
+              <button
+                key={item.id}
+                onClick={() => onSelect(item.id)}
+                className="w-full px-4 py-2.5 flex items-start gap-3 text-left cursor-pointer border-none"
+                style={{
+                  background: isActive ? 'var(--color-surface-tertiary)' : 'transparent',
+                }}
+              >
+                <div
+                  className="w-3 h-3 rounded-sm border mt-0.5 shrink-0"
+                  style={{ background: colors.bg, borderColor: colors.border }}
+                />
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-center gap-2">
+                    <span
+                      className="text-sm font-medium truncate"
+                      style={{ color: 'var(--color-content-primary)' }}
+                    >
+                      {item.label}
+                    </span>
+                    <span
+                      className="text-xs shrink-0"
+                      style={{ color: 'var(--color-content-tertiary)' }}
+                    >
+                      {getCategoryLabel(item.category)}
+                    </span>
+                  </div>
+                  {item.description && (
+                    <p
+                      className="text-xs mt-0.5 truncate"
+                      style={{ color: 'var(--color-content-secondary)' }}
+                    >
+                      {item.description}
+                    </p>
+                  )}
+                </div>
+              </button>
+            );
+          })}
+        </div>
+
+        {/* Footer */}
+        <div
+          className="px-4 py-2 border-t flex items-center gap-4 text-xs"
+          style={{
+            borderColor: 'var(--color-border-primary)',
+            color: 'var(--color-content-tertiary)',
+            background: 'var(--color-surface-secondary)',
+          }}
+        >
+          <span><kbd className="font-mono">{'\u2191\u2193'}</kbd> Navigate</span>
+          <span><kbd className="font-mono">{'\u21B5'}</kbd> Select</span>
+          <span><kbd className="font-mono">Esc</kbd> Close</span>
+        </div>
+      </div>
+    </>
+  );
+}

package/dist/viewer-template/src/components/Legend.tsx

@@ -2,9 +2,12 @@ import { getCategoryColors, getCategoryLabel } from '../types.ts';
 
 interface LegendProps {
   categories: string[];
+  hiddenCategories: Set<string>;
+  onToggleCategory: (category: string) => void;
+  onShowAll: () => void;
 }
 
-export function Legend({ categories }: LegendProps) {
+export function Legend({ categories, hiddenCategories, onToggleCategory, onShowAll }: LegendProps) {
   return (
     <div
       className="absolute bottom-3 right-3 z-10 rounded-lg p-3 border"
@@ -23,19 +26,46 @@ export function Legend({ categories }: LegendProps) {
       <div className="grid grid-cols-2 gap-x-4 gap-y-1">
         {categories.map((cat) => {
           const colors = getCategoryColors(cat);
+          const hidden = hiddenCategories.has(cat);
           return (
-            <div key={cat} className="flex items-center gap-1.5">
+            <button
+              key={cat}
+              onClick={() => onToggleCategory(cat)}
+              className="flex items-center gap-1.5 cursor-pointer bg-transparent border-none p-0 text-left"
+            >
               <div
                 className="w-3 h-3 rounded-sm border"
-                style={{ background: colors.bg, borderColor: colors.border }}
+                style={{
+                  background: colors.bg,
+                  borderColor: colors.border,
+                  opacity: hidden ? 0.3 : 1,
+                  transition: 'opacity 0.2s',
+                }}
               />
-              <span className="text-xs" style={{ color: 'var(--color-content-secondary)' }}>
+              <span
+                className="text-xs"
+                style={{
+                  color: 'var(--color-content-secondary)',
+                  opacity: hidden ? 0.4 : 1,
+                  textDecoration: hidden ? 'line-through' : 'none',
+                  transition: 'opacity 0.2s',
+                }}
+              >
                 {getCategoryLabel(cat)}
               </span>
-            </div>
+            </button>
           );
         })}
       </div>
+      {hiddenCategories.size > 0 && (
+        <button
+          onClick={onShowAll}
+          className="mt-2 text-xs cursor-pointer hover:underline bg-transparent border-none p-0"
+          style={{ color: 'var(--color-interactive-primary)' }}
+        >
+          Show All
+        </button>
+      )}
     </div>
   );
 }

package/dist/viewer-template/src/components/UseCaseFilter.tsx

@@ -1,12 +1,53 @@
 import type { UseCase } from '../types.ts';
+import type { FlowAnimationState } from '../hooks/useFlowAnimation.ts';
 
 interface UseCaseFilterProps {
   useCases: UseCase[];
   selectedUseCase: string | null;
   onSelect: (useCaseId: string | null) => void;
+  flowInfo: FlowAnimationState;
 }
 
-export function UseCaseFilter({ useCases, selectedUseCase, onSelect }: UseCaseFilterProps) {
+function FlowButton({ label, onClick }: { label: string; onClick: () => void }) {
+  return (
+    <button
+      onClick={onClick}
+      className="w-7 h-7 flex items-center justify-center rounded border text-xs cursor-pointer"
+      style={{
+        background: 'var(--color-surface-secondary)',
+        borderColor: 'var(--color-border-primary)',
+        color: 'var(--color-content-secondary)',
+      }}
+      aria-label={label}
+    >
+      {label === 'Previous' && (
+        <svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
+          <path d="M8 1.5L3.5 6L8 10.5" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+      )}
+      {label === 'Play' && (
+        <svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
+          <path d="M3 1.5L10 6L3 10.5V1.5Z" />
+        </svg>
+      )}
+      {label === 'Pause' && (
+        <svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
+          <rect x="2.5" y="1.5" width="2.5" height="9" rx="0.5" />
+          <rect x="7" y="1.5" width="2.5" height="9" rx="0.5" />
+        </svg>
+      )}
+      {label === 'Next' && (
+        <svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
+          <path d="M4 1.5L8.5 6L4 10.5" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+      )}
+    </button>
+  );
+}
+
+export function UseCaseFilter({ useCases, selectedUseCase, onSelect, flowInfo }: UseCaseFilterProps) {
+  const selectedUc = selectedUseCase ? useCases.find((uc) => uc.id === selectedUseCase) : undefined;
+
   return (
     <div
       className="rounded-lg p-3 w-64 border"
@@ -40,11 +81,29 @@ export function UseCaseFilter({ useCases, selectedUseCase, onSelect }: UseCaseFi
           </option>
         ))}
       </select>
-      {selectedUseCase && (
+      {selectedUc && (
         <div className="mt-2">
           <p className="text-xs" style={{ color: 'var(--color-content-secondary)' }}>
-            {useCases.find((uc) => uc.id === selectedUseCase)?.description}
+            {selectedUc.description}
           </p>
+          {flowInfo.flowNodeIds && (
+            <div className="mt-1.5">
+              <p
+                className="text-xs font-mono mb-1.5"
+                style={{ color: 'var(--color-interactive-primary)' }}
+              >
+                Step {flowInfo.activeStep + 1}/{flowInfo.flowNodeIds.length}
+              </p>
+              <div className="flex items-center gap-1">
+                <FlowButton label="Previous" onClick={flowInfo.prev} />
+                <FlowButton
+                  label={flowInfo.isPlaying ? 'Pause' : 'Play'}
+                  onClick={flowInfo.isPlaying ? flowInfo.pause : flowInfo.play}
+                />
+                <FlowButton label="Next" onClick={flowInfo.next} />
+              </div>
+            </div>
+          )}
           <button
             onClick={() => onSelect(null)}
             className="mt-1.5 text-xs cursor-pointer hover:underline"

package/dist/viewer-template/src/hooks/useCategoryFilter.ts

@@ -0,0 +1,36 @@
+import { useCallback, useMemo } from 'react';
+import { useQueryState, parseAsString } from 'nuqs';
+
+interface CategoryFilterState {
+  hiddenCategories: Set<string>;
+  toggleCategory: (category: string) => void;
+  showAll: () => void;
+}
+
+export function useCategoryFilter(): CategoryFilterState {
+  const [hideParam, setHideParam] = useQueryState('hide', parseAsString.withOptions({ history: 'replace' }));
+
+  const hiddenCategories = useMemo(() => {
+    if (!hideParam) return new Set<string>();
+    return new Set(hideParam.split(',').filter(Boolean));
+  }, [hideParam]);
+
+  const toggleCategory = useCallback(
+    (category: string) => {
+      const next = new Set(hiddenCategories);
+      if (next.has(category)) {
+        next.delete(category);
+      } else {
+        next.add(category);
+      }
+      void setHideParam(next.size > 0 ? [...next].join(',') : null);
+    },
+    [hiddenCategories, setHideParam],
+  );
+
+  const showAll = useCallback(() => {
+    void setHideParam(null);
+  }, [setHideParam]);
+
+  return { hiddenCategories, toggleCategory, showAll };
+}

package/dist/viewer-template/src/hooks/useCommandPalette.ts

@@ -0,0 +1,91 @@
+import { useCallback, useMemo, useState } from 'react';
+
+import type { ArchFlowNode } from '../types.ts';
+
+export interface CommandPaletteResult {
+  id: string;
+  label: string;
+  category: string;
+  description: string;
+}
+
+interface CommandPaletteState {
+  isOpen: boolean;
+  toggle: () => void;
+  close: () => void;
+  query: string;
+  setQuery: (q: string) => void;
+  results: CommandPaletteResult[];
+  activeIndex: number;
+  moveUp: () => void;
+  moveDown: () => void;
+  activeItem: CommandPaletteResult | null;
+}
+
+const MAX_RESULTS = 20;
+
+export function useCommandPalette(
+  nodes: ArchFlowNode[],
+  hiddenCategories: Set<string>,
+): CommandPaletteState {
+  const [isOpen, setIsOpen] = useState(false);
+  const [query, setQueryRaw] = useState('');
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  const toggle = useCallback(() => {
+    setIsOpen((prev) => {
+      if (!prev) {
+        setQueryRaw('');
+        setActiveIndex(0);
+      }
+      return !prev;
+    });
+  }, []);
+
+  const close = useCallback(() => {
+    setIsOpen(false);
+  }, []);
+
+  const setQuery = useCallback((q: string) => {
+    setQueryRaw(q);
+    setActiveIndex(0);
+  }, []);
+
+  const results = useMemo(() => {
+    const searchable = nodes.filter(
+      (n) => !n.hidden && !hiddenCategories.has(n.data.category),
+    );
+
+    if (!query.trim()) {
+      return searchable.slice(0, MAX_RESULTS).map((n) => ({
+        id: n.id,
+        label: n.data.label,
+        category: n.data.category,
+        description: n.data.description,
+      }));
+    }
+
+    const q = query.toLowerCase();
+    return searchable
+      .filter((n) => n.data.label.toLowerCase().includes(q))
+      .slice(0, MAX_RESULTS)
+      .map((n) => ({
+        id: n.id,
+        label: n.data.label,
+        category: n.data.category,
+        description: n.data.description,
+      }));
+  }, [nodes, hiddenCategories, query]);
+
+  const moveUp = useCallback(() => {
+    setActiveIndex((prev) => (prev <= 0 ? prev : prev - 1));
+  }, []);
+
+  const moveDown = useCallback(() => {
+    setActiveIndex((prev) => (prev >= results.length - 1 ? prev : prev + 1));
+  }, [results.length]);
+
+  const activeItem = results[activeIndex] ?? null;
+
+  return { isOpen, toggle, close, query, setQuery, results, activeIndex, moveUp, moveDown, activeItem };
+}

package/dist/viewer-template/src/hooks/useFlowAnimation.ts

@@ -0,0 +1,82 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import type { UseCase } from '../types.ts';
+
+export interface FlowAnimationState {
+  activeStep: number;
+  flowNodeIds: string[] | null;
+  isPlaying: boolean;
+  play: () => void;
+  pause: () => void;
+  next: () => void;
+  prev: () => void;
+}
+
+const NOOP = () => {};
+
+const IDLE_STATE: FlowAnimationState = {
+  activeStep: -1,
+  flowNodeIds: null,
+  isPlaying: false,
+  play: NOOP,
+  pause: NOOP,
+  next: NOOP,
+  prev: NOOP,
+};
+
+export function useFlowAnimation(
+  useCases: UseCase[],
+  selectedUseCase: string | null,
+): FlowAnimationState {
+  const [activeStep, setActiveStep] = useState(0);
+  const [isPlaying, setIsPlaying] = useState(true);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const uc = selectedUseCase ? useCases.find((u) => u.id === selectedUseCase) : undefined;
+  const flow = uc?.flow;
+  const flowLength = flow?.length ?? 0;
+
+  // Reset on use case change
+  useEffect(() => {
+    setActiveStep(0);
+    setIsPlaying(true);
+  }, [selectedUseCase]);
+
+  // Auto-advance timer
+  useEffect(() => {
+    if (!flow || flowLength < 2 || !isPlaying) return;
+
+    timerRef.current = setTimeout(() => {
+      setActiveStep((prev) => {
+        const next = prev + 1;
+        return next >= flowLength ? 0 : next;
+      });
+    }, 800);
+
+    return () => {
+      if (timerRef.current !== null) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+  }, [flow, flowLength, isPlaying, activeStep]);
+
+  const play = useCallback(() => setIsPlaying(true), []);
+  const pause = useCallback(() => setIsPlaying(false), []);
+
+  const next = useCallback(() => {
+    setIsPlaying(false);
+    setActiveStep((prev) => (prev + 1 >= flowLength ? prev : prev + 1));
+  }, [flowLength]);
+
+  const prev = useCallback(() => {
+    setIsPlaying(false);
+    setActiveStep((prev) => (prev <= 0 ? 0 : prev - 1));
+  }, []);
+
+  if (!flow || flowLength < 2) {
+    return IDLE_STATE;
+  }
+
+  return { activeStep, flowNodeIds: flow, isPlaying, play, pause, next, prev };
+}

package/dist/viewer-template/src/hooks/useKeyboardShortcuts.ts

@@ -0,0 +1,39 @@
+import { useEffect } from 'react';
+
+interface KeyboardShortcutActions {
+  onTogglePalette: () => void;
+  onEscape: () => void;
+  isPaletteOpen: boolean;
+}
+
+export function useKeyboardShortcuts(actions: KeyboardShortcutActions): void {
+  useEffect(() => {
+    function handleKeyDown(e: KeyboardEvent) {
+      // Skip when focused on form elements
+      const tag = (e.target as HTMLElement).tagName;
+      if (tag === 'INPUT' || tag === 'SELECT' || tag === 'TEXTAREA') {
+        // Allow Escape even in input
+        if (e.key === 'Escape') {
+          actions.onEscape();
+          return;
+        }
+        return;
+      }
+
+      // Cmd/Ctrl+K: toggle palette
+      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        actions.onTogglePalette();
+        return;
+      }
+
+      if (e.key === 'Escape') {
+        actions.onEscape();
+        return;
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [actions]);
+}

package/dist/viewer-template/src/hooks/useUseCaseFilter.ts

@@ -3,6 +3,7 @@ import { useQueryState, parseAsString } from 'nuqs';
 import type { Edge } from '@xyflow/react';
 
 import type { ArchFlowNode, UseCase } from '../types.ts';
+import { useFlowAnimation } from './useFlowAnimation.ts';
 
 function isNodeActive(node: ArchFlowNode, activeIds: Set<string>): boolean {
   if (node.data.isGroup && node.data.memberNodes) {
@@ -11,8 +12,20 @@ function isNodeActive(node: ArchFlowNode, activeIds: Set<string>): boolean {
   return activeIds.has(node.id);
 }
 
+/** Resolve a node's effective ID for flow matching (group → first active member) */
+function getFlowId(node: ArchFlowNode, flowSet: Set<string>): string | null {
+  if (flowSet.has(node.id)) return node.id;
+  if (node.data.isGroup && node.data.memberNodes) {
+    const member = node.data.memberNodes.find((m) => flowSet.has(m.id));
+    if (member) return member.id;
+  }
+  return null;
+}
+
 export function useUseCaseFilter(nodes: ArchFlowNode[], edges: Edge[], useCases: UseCase[]) {
   const [selectedUseCase, setSelectedUseCase] = useQueryState('uc', parseAsString.withOptions({ history: 'replace' }));
+  const flowState = useFlowAnimation(useCases, selectedUseCase);
+  const { activeStep, flowNodeIds } = flowState;
 
   const categories = useMemo(() => {
     const set = new Set<string>();
@@ -27,19 +40,77 @@ export function useUseCaseFilter(nodes: ArchFlowNode[], edges: Edge[], useCases:
     const uc = useCases.find((u) => u.id === selectedUseCase);
     if (!uc) return nodes;
     const activeIds = new Set(uc.nodeIds);
+
+    // No flow — static highlight (backward compat)
+    if (!flowNodeIds) {
+      return nodes.map((node) => {
+        if (node.hidden) return node;
+        const active = isNodeActive(node, activeIds);
+        return {
+          ...node,
+          style: {
+            ...node.style,
+            opacity: active ? 1 : 0.15,
+            transition: 'opacity 0.3s',
+          },
+        };
+      });
+    }
+
+    // Flow animation mode
+    const flowSet = new Set(flowNodeIds);
+    const activeFlowId = flowNodeIds[activeStep];
+    const passedIds = new Set(flowNodeIds.slice(0, activeStep));
+
     return nodes.map((node) => {
       if (node.hidden) return node;
       const active = isNodeActive(node, activeIds);
+      if (!active) {
+        // Non-participating node
+        return {
+          ...node,
+          style: { ...node.style, opacity: 0.08, transition: 'opacity 0.3s' },
+        };
+      }
+
+      const flowId = getFlowId(node, flowSet);
+      if (!flowId) {
+        // In use case but not in flow — dim slightly
+        return {
+          ...node,
+          style: { ...node.style, opacity: 0.3, transition: 'opacity 0.3s' },
+        };
+      }
+
+      if (flowId === activeFlowId) {
+        // Active step — glow + scale
+        return {
+          ...node,
+          style: {
+            ...node.style,
+            opacity: 1,
+            boxShadow: 'var(--shadow-node-flow-active)',
+            transform: 'scale(1.02)',
+            transition: 'opacity 0.3s, box-shadow 0.3s, transform 0.3s',
+          },
+        };
+      }
+
+      if (passedIds.has(flowId)) {
+        // Already passed
+        return {
+          ...node,
+          style: { ...node.style, opacity: 1, transition: 'opacity 0.3s' },
+        };
+      }
+
+      // Not yet reached
       return {
         ...node,
-        style: {
-          ...node.style,
-          opacity: active ? 1 : 0.15,
-          transition: 'opacity 0.3s',
-        },
+        style: { ...node.style, opacity: 0.3, transition: 'opacity 0.3s' },
       };
     });
-  }, [nodes, selectedUseCase, useCases]);
+  }, [nodes, selectedUseCase, useCases, flowNodeIds, activeStep]);
 
   const filteredEdges = useMemo(() => {
     if (!selectedUseCase) return edges;
@@ -55,19 +126,93 @@ export function useUseCaseFilter(nodes: ArchFlowNode[], edges: Edge[], useCases:
       }
     }
 
-    return edges.map((edge) => ({
-      ...edge,
-      style: {
-        ...edge.style,
-        opacity: activeNodeIds.has(edge.source) && activeNodeIds.has(edge.target) ? 1 : 0.08,
-        transition: 'opacity 0.3s',
-      },
-      labelStyle: {
-        ...((edge.labelStyle as Record<string, unknown>) ?? {}),
-        opacity: activeNodeIds.has(edge.source) && activeNodeIds.has(edge.target) ? 1 : 0,
-      },
-    }));
-  }, [edges, nodes, selectedUseCase, useCases]);
-
-  return { selectedUseCase, setSelectedUseCase, categories, filteredNodes, filteredEdges };
+    // No flow — static highlight (backward compat)
+    if (!flowNodeIds) {
+      return edges.map((edge) => ({
+        ...edge,
+        style: {
+          ...edge.style,
+          opacity: activeNodeIds.has(edge.source) && activeNodeIds.has(edge.target) ? 1 : 0.08,
+          transition: 'opacity 0.3s',
+        },
+        labelStyle: {
+          ...((edge.labelStyle as Record<string, unknown>) ?? {}),
+          opacity: activeNodeIds.has(edge.source) && activeNodeIds.has(edge.target) ? 1 : 0,
+        },
+      }));
+    }
+
+    // Flow animation mode — build flow edge lookup
+    // A flow edge is one connecting flow[i] → flow[i+1]
+    const flowEdgeMap = new Map<string, 'active' | 'passed' | 'upcoming'>();
+    for (let i = 0; i < flowNodeIds.length - 1; i++) {
+      const src = flowNodeIds[i];
+      const tgt = flowNodeIds[i + 1];
+      // Check both edge ID conventions
+      const key1 = `${src}->${tgt}`;
+      const key2 = `${tgt}->${src}`;
+      let status: 'active' | 'passed' | 'upcoming';
+      if (i + 1 === activeStep) {
+        status = 'active';
+      } else if (i + 1 <= activeStep) {
+        status = 'passed';
+      } else {
+        status = 'upcoming';
+      }
+      flowEdgeMap.set(key1, status);
+      flowEdgeMap.set(key2, status);
+    }
+
+    return edges.map((edge) => {
+      const bothActive = activeNodeIds.has(edge.source) && activeNodeIds.has(edge.target);
+      if (!bothActive) {
+        return {
+          ...edge,
+          style: { ...edge.style, opacity: 0.08, transition: 'opacity 0.3s' },
+          className: '',
+          labelStyle: {
+            ...((edge.labelStyle as Record<string, unknown>) ?? {}),
+            opacity: 0,
+          },
+        };
+      }
+
+      const flowStatus = flowEdgeMap.get(edge.id);
+      if (flowStatus === 'active') {
+        return {
+          ...edge,
+          style: { ...edge.style, opacity: 1, stroke: undefined, strokeWidth: undefined },
+          className: 'flow-edge-active',
+          labelStyle: {
+            ...((edge.labelStyle as Record<string, unknown>) ?? {}),
+            opacity: 1,
+          },
+        };
+      }
+      if (flowStatus === 'passed') {
+        return {
+          ...edge,
+          style: { ...edge.style, opacity: 1, transition: 'opacity 0.3s' },
+          className: '',
+          labelStyle: {
+            ...((edge.labelStyle as Record<string, unknown>) ?? {}),
+            opacity: 1,
+          },
+        };
+      }
+
+      // In use case but not a flow edge, or upcoming flow edge
+      return {
+        ...edge,
+        style: { ...edge.style, opacity: 0.3, transition: 'opacity 0.3s' },
+        className: '',
+        labelStyle: {
+          ...((edge.labelStyle as Record<string, unknown>) ?? {}),
+          opacity: 0.3,
+        },
+      };
+    });
+  }, [edges, nodes, selectedUseCase, useCases, flowNodeIds, activeStep]);
+
+  return { selectedUseCase, setSelectedUseCase, categories, filteredNodes, filteredEdges, flowInfo: flowState };
 }

package/dist/viewer-template/src/index.css

@@ -33,6 +33,7 @@
   --shadow-panel: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
   --shadow-node: 0 1px 3px rgba(0, 0, 0, 0.1);
   --shadow-node-selected: 0 0 0 2px rgba(37, 99, 235, 0.25);
+  --shadow-node-flow-active: 0 0 12px 2px rgba(59, 130, 246, 0.5);
 
   /* Category colors (light) */
   --cat-controller-bg: #dbeafe;
@@ -50,6 +51,9 @@
   --cat-model-bg: #fee2e2;
   --cat-model-border: #ef4444;
   --cat-model-text: #991b1b;
+  --cat-database-bg: #fef3c7;
+  --cat-database-border: #d97706;
+  --cat-database-text: #92400e;
   --cat-external-bg: #f3f4f6;
   --cat-external-border: #6b7280;
   --cat-external-text: #374151;
@@ -88,6 +92,7 @@
   --shadow-panel: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
   --shadow-node: 0 1px 3px rgba(0, 0, 0, 0.3);
   --shadow-node-selected: 0 0 0 2px rgba(96, 165, 250, 0.3);
+  --shadow-node-flow-active: 0 0 12px 2px rgba(96, 165, 250, 0.4);
 
   /* Category colors (dark) */
   --cat-controller-bg: #1e293b;
@@ -105,6 +110,9 @@
   --cat-model-bg: #2b1111;
   --cat-model-border: #f87171;
   --cat-model-text: #fca5a5;
+  --cat-database-bg: #2b1f06;
+  --cat-database-border: #fbbf24;
+  --cat-database-text: #fde68a;
   --cat-external-bg: #1e2330;
   --cat-external-border: #9ca3af;
   --cat-external-text: #d1d5db;
@@ -119,6 +127,17 @@
   --cat-fallback-text: #d6d3d1;
 }
 
+/* ─── Flow Animation ─── */
+@keyframes dash-flow {
+  to { stroke-dashoffset: -20; }
+}
+.react-flow__edge.flow-edge-active .react-flow__edge-path {
+  stroke: var(--color-interactive-primary) !important;
+  stroke-width: 2.5 !important;
+  stroke-dasharray: 8 4;
+  animation: dash-flow 0.6s linear infinite;
+}
+
 html,
 body,
 #root {

package/dist/viewer-template/src/types.ts

@@ -62,7 +62,8 @@ const CATEGORY_META = {
   service:    { label: 'Service',    icon: '\u{2699}\u{FE0F}', color: { bg: '#dcfce7', border: '#22c55e', text: '#166534' } },
   port:       { label: 'Port',       icon: '\u{1F50C}', color: { bg: '#ede9fe', border: '#8b5cf6', text: '#5b21b6' } },
   adapter:    { label: 'Adapter',    icon: '\u{1F527}', color: { bg: '#ffedd5', border: '#f97316', text: '#9a3412' } },
-  model:      { label: 'Model / DB', icon: '\u{1F4BE}', color: { bg: '#fee2e2', border: '#ef4444', text: '#991b1b' } },
+  model:      { label: 'Entity',     icon: '\u{1F4BE}', color: { bg: '#fee2e2', border: '#ef4444', text: '#991b1b' } },
+  database:   { label: 'DB / Infra', icon: '\u{1F5C4}\u{FE0F}', color: { bg: '#fef3c7', border: '#d97706', text: '#92400e' } },
   external:   { label: 'External',   icon: '\u{2601}\u{FE0F}', color: { bg: '#f3f4f6', border: '#6b7280', text: '#374151' } },
   job:        { label: 'Job',        icon: '\u{23F0}', color: { bg: '#fef9c3', border: '#eab308', text: '#854d0e' } },
   dto:        { label: 'DTO',        icon: '\u{1F4E6}', color: { bg: '#cffafe', border: '#06b6d4', text: '#155e75' } },
@@ -76,7 +77,7 @@ function getMeta(category: string): CategoryMeta {
   return CATEGORY_META[category as StandardCategory] ?? FALLBACK_META;
 }
 
-const STANDARD_CATEGORIES = ['controller', 'service', 'port', 'adapter', 'model', 'external', 'job', 'dto'] as const;
+const STANDARD_CATEGORIES = ['controller', 'service', 'port', 'adapter', 'model', 'database', 'external', 'job', 'dto'] as const;
 
 export function getCategoryColors(category: string): CategoryStyle {
   const key = (STANDARD_CATEGORIES as readonly string[]).includes(category) ? category : 'fallback';

package/dist/viewer-template/src/utils/layout.ts

@@ -125,8 +125,9 @@ const CATEGORY_RING_PRIORITY: Record<string, number> = {
   dto: 3,
   controller: 4,
   adapter: 5,
-  job: 6,
-  external: 7,
+  database: 6,
+  job: 7,
+  external: 8,
 };
 
 const DEFAULT_RING_PRIORITY = 4;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "archrip",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "Generate interactive architecture diagrams from your codebase using AI agents",
   "type": "module",
   "bin": {