Sixteen recurring workflows mapped and scored on value, ease of deployment, and build readiness. Build readiness combines how complete the current-state process documentation is with how prepared the dependent data systems are. In the matrix view, dot color and size encode readiness band and annual hours recoverable.
);
}
// --- Readiness components ---------------------------------------------------
function ReadinessCell({ r }) {
const color = r.composite >= 80 ? '#1a8f59' : r.composite >= 60 ? '#b07a18' : '#a73a3a';
return (
{r.composite}
);
}
function TierMini({ tier }) {
const c = tier === 'Ready Now' ? '#1a8f59' : tier === 'Needs Prep' ? '#b07a18' : '#7a7d85';
return {tier};
}
function ReadinessBlock({ w }) {
const r = w.readiness;
const color = r.composite >= 80 ? '#1a8f59' : r.composite >= 60 ? '#b07a18' : '#a73a3a';
const size = 88, stroke = 6;
const rad = (size - stroke) / 2;
const c = 2 * Math.PI * rad;
const off = c - (r.composite / 100) * c;
return (
{r.composite}/100
Build Readiness
{r.band}
A combined score across process documentation (35%), data-system readiness (35%), and output definition clarity (30%).
Process documentation{r.processDoc}
{r.rubric
?
:
{w.processNote}
}
Data systems{r.dataScore}
Weighted average across {r.deps.length} required system{r.deps.length === 1 ? '' : 's'}.
Output definition{r.outputAmbiguity}
{w.outputAmbiguityNote}
Required systems
{r.deps.map(d => (
{d.name}
))}
);
}
// --- Inventory board --------------------------------------------------------
// Org-chart style breakdown: each column is a department, each card a workflow.
// Goal: visualize every inventoried process and make them all 'agent ready'.
function InventoryBoard({ workflows, onOpen }) {
// derive dept order from actual workflows (preserving first-seen order)
const deptOrder = Array.from(new Set(workflows.map(w => w.dept)));
const byDept = {};
deptOrder.forEach(d => { byDept[d] = []; });
workflows.forEach(w => { byDept[w.dept].push(w); });
// overall stats
const total = workflows.length;
const ready = workflows.filter(w => w.readiness.band === 'Ready to build').length;
const near = workflows.filter(w => w.readiness.band === 'Near-ready').length;
const disc = workflows.filter(w => w.readiness.band === 'Discovery needed').length;
const overallPct = total ? Math.round((ready / total) * 100) : 0;
// horizontal scroll state
const scrollRef = useRefW(null);
const [scrollInfo, setScrollInfo] = useStateW({ left: 0, scrollWidth: 1, clientWidth: 1 });
// data flow connections
const gridRef = useRefW(null);
const [showFlows, setShowFlows] = useStateW(false);
const [flowPos, setFlowPos] = useStateW({});
const [flowSize, setFlowSize] = useStateW({ w: 0, h: 0 });
const [hovNode, setHovNode] = useStateW(null);
useEffectW(() => {
const el = scrollRef.current;
if (!el) return;
const update = () => setScrollInfo({ left: el.scrollLeft, scrollWidth: el.scrollWidth, clientWidth: el.clientWidth });
update();
el.addEventListener('scroll', update, { passive: true });
const ro = new ResizeObserver(update);
ro.observe(el);
return () => { el.removeEventListener('scroll', update); ro.disconnect(); };
}, []);
// Measure card positions when showFlows turns on
useEffectW(() => {
if (!showFlows || !gridRef.current) return;
const grid = gridRef.current;
const t = setTimeout(() => {
const base = grid.getBoundingClientRect();
const pos = {};
grid.querySelectorAll('[data-wfid]').forEach(el => {
const r = el.getBoundingClientRect();
pos[el.getAttribute('data-wfid')] = {
cx: r.left - base.left + r.width / 2,
cy: r.top - base.top + r.height / 2,
};
});
setFlowPos(pos);
setFlowSize({ w: grid.scrollWidth, h: grid.scrollHeight });
}, 60);
return () => clearTimeout(t);
}, [showFlows, workflows]);
// Edges: pairs of workflows that share at least one data source
const flowEdges = useMemoW(() => {
if (!showFlows || !Object.keys(flowPos).length) return [];
const bySystem = {};
workflows.forEach(w => {
(w.dependsOn || []).forEach(sys => {
if (!bySystem[sys]) bySystem[sys] = [];
bySystem[sys].push(w.id);
});
});
const edgeMap = {};
Object.entries(bySystem).forEach(([sys, wfIds]) => {
for (let i = 0; i < wfIds.length; i++) {
for (let j = i + 1; j < wfIds.length; j++) {
if (!flowPos[wfIds[i]] || !flowPos[wfIds[j]]) continue;
const key = [wfIds[i], wfIds[j]].sort().join('|||');
if (!edgeMap[key]) edgeMap[key] = { a: wfIds[i], b: wfIds[j], systems: [] };
if (!edgeMap[key].systems.includes(sys)) edgeMap[key].systems.push(sys);
}
}
});
return Object.values(edgeMap);
}, [showFlows, flowPos, workflows]);
const flowPath = (a, b) => {
const pa = flowPos[a], pb = flowPos[b];
if (!pa || !pb) return null;
const mx = (pa.cx + pb.cx) / 2;
return `M${pa.cx},${pa.cy} C${mx},${pa.cy} ${mx},${pb.cy} ${pb.cx},${pb.cy}`;
};
const maxScroll = Math.max(0, scrollInfo.scrollWidth - scrollInfo.clientWidth);
const canLeft = scrollInfo.left > 2;
const canRight = scrollInfo.left < maxScroll - 2;
const thumbWPct = scrollInfo.scrollWidth > 0 ? Math.max(10, (scrollInfo.clientWidth / scrollInfo.scrollWidth) * 100) : 100;
const thumbLeftPct = maxScroll > 0 ? (scrollInfo.left / maxScroll) * (100 - thumbWPct) : 0;
const scrollBy = (dir) => { if (scrollRef.current) scrollRef.current.scrollBy({ left: dir * 250, behavior: 'smooth' }); };
return (
The objective
Turn every column green.
This is the inventory of every workflow we mapped, organized by department. The job of the engagement is to take each card from discovery through near-ready to agent-ready — process defined, data systems prepared, ready to build.
);
}
function SopGap({ w }) {
const r = w.readiness;
return (
<>
Standard Operating Procedure
{w.name}
{w.dept}·{w.frequency}
No published SOP yet
This workflow runs largely on tribal knowledge — it hasn't been written up as a repeatable procedure. That gap is the main reason its process-documentation score sits at {r.processDoc}/100, and it's the first thing to close before the workflow can be automated reliably.
Documenting this process — mapping the steps, the people, and the systems involved — is the concrete first deliverable that moves {w.name} from discovery toward agent-ready.