Skip to content

Commit 516e8b7

Browse files
ofriwclaude
ofriw
and
claude
committed
Add ThreeContextWorkflow visual component
Visual element showing three separate contexts (Write Code, Write Tests, Triage Failures) to illustrate the workflow for preventing shared assumptions between code and test generation. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent dcc08fe commit 516e8b7

2 files changed

Lines changed: 353 additions & 0 deletions

File tree

‎website/src/components/VisualElements/ThreeContextWorkflow.module.css‎

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
/* Container Styles */
2+
.container {
3+
margin: 2rem 0;
4+
padding: 1.5rem 0;
5+
}
6+
7+
/* Compact mode for presentations - maximize content area */
8+
.container.compact {
9+
margin: 0 auto;
10+
padding: 0;
11+
max-width: 100%;
12+
}
13+
14+
/* SVG Sizing */
15+
.svg {
16+
width: 100%;
17+
height: auto;
18+
display: block;
19+
margin: 0 auto;
20+
}
21+
22+
/* Context Box Animations */
23+
@keyframes fadeInSlide {
24+
from {
25+
opacity: 0;
26+
transform: translateY(10px);
27+
}
28+
to {
29+
opacity: 1;
30+
transform: translateY(0);
31+
}
32+
}
33+
34+
.contextGroup {
35+
animation: fadeInSlide 0.6s ease-out forwards;
36+
opacity: 0;
37+
}
38+
39+
/* Reduce motion for accessibility */
40+
@media (prefers-reduced-motion: reduce) {
41+
.contextGroup {
42+
animation: none;
43+
opacity: 1;
44+
}
45+
}
46+
47+
/* Context Boxes */
48+
.contextBox {
49+
fill: var(--visual-bg-workflow);
50+
stroke: var(--visual-workflow);
51+
stroke-width: 3;
52+
transition: all 0.3s ease;
53+
}
54+
55+
.contextBox:hover {
56+
fill: var(--visual-bg-decision);
57+
stroke: var(--visual-decision);
58+
}
59+
60+
/* Text Styles */
61+
.contextTitle {
62+
fill: var(--ifm-color-emphasis-700);
63+
font-size: 28px;
64+
font-weight: 600;
65+
font-family: var(--ifm-font-family-base);
66+
}
67+
68+
.contextLabel {
69+
fill: var(--ifm-font-color-base);
70+
font-size: 44px;
71+
font-weight: 700;
72+
font-family: var(--ifm-font-family-base);
73+
}
74+
75+
.contextDescription {
76+
fill: var(--ifm-color-emphasis-600);
77+
font-size: 22px;
78+
font-family: var(--ifm-font-family-base);
79+
}
80+
81+
/* Arrows */
82+
.arrow {
83+
stroke: var(--visual-workflow);
84+
stroke-width: 4;
85+
fill: none;
86+
}
87+
88+
.arrowMarker {
89+
fill: var(--visual-workflow);
90+
}
91+
92+
/* Separation Barriers */
93+
.barrier {
94+
stroke: var(--visual-decision);
95+
stroke-width: 2;
96+
opacity: 0.3;
97+
}
98+
99+
/* Description Text */
100+
.description {
101+
margin-top: 1rem;
102+
padding-top: 1rem;
103+
border-top: 1px solid var(--ifm-color-emphasis-200);
104+
font-size: 0.9rem;
105+
color: var(--ifm-color-emphasis-700);
106+
text-align: center;
107+
line-height: 1.5;
108+
}
109+
110+
/* Presentation Mode Adjustments */
111+
.container.compact .svg {
112+
max-width: 100%;
113+
}
114+
115+
.container.compact .contextTitle {
116+
font-size: 32px;
117+
}
118+
119+
.container.compact .contextLabel {
120+
font-size: 52px;
121+
}
122+
123+
/* Responsive Design */
124+
@media (max-width: 768px) {
125+
.container {
126+
padding: 1rem 0;
127+
}
128+
129+
.contextTitle {
130+
font-size: 16px;
131+
}
132+
133+
.contextLabel {
134+
font-size: 24px;
135+
}
136+
137+
.contextDescription {
138+
font-size: 14px;
139+
}
140+
}
141+
142+
/* Dark mode specific adjustments for presentations */
143+
:global(.reveal) .contextBox {
144+
fill: rgba(167, 139, 250, 0.2);
145+
stroke: #a78bfa;
146+
stroke-width: 3;
147+
}
148+
149+
:global(.reveal) .arrow {
150+
stroke: #a78bfa;
151+
stroke-width: 5;
152+
}
153+
154+
:global(.reveal) .arrowMarker {
155+
fill: #a78bfa;
156+
}
157+
158+
:global(.reveal) .barrier {
159+
stroke: #c4b5fd;
160+
opacity: 0.4;
161+
}
162+
163+
:global(.reveal) .contextTitle,
164+
:global(.reveal) .contextLabel,
165+
:global(.reveal) .contextDescription {
166+
fill: #e5e7eb;
167+
}

‎website/src/components/VisualElements/ThreeContextWorkflow.tsx‎

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
import React from 'react';
2+
import type { PresentationAwareProps } from '../PresentationMode/types';
3+
import styles from './ThreeContextWorkflow.module.css';
4+
5+
interface Context {
6+
id: string;
7+
title: string;
8+
label: string;
9+
description: string;
10+
x: number;
11+
}
12+
13+
export default function ThreeContextWorkflow({ compact = false }: PresentationAwareProps = {}) {
14+
const boxWidth = 550;
15+
const boxHeight = 280;
16+
const boxGap = 150;
17+
const startX = 80;
18+
const centerY = 300;
19+
20+
const contexts: Context[] = [
21+
{
22+
id: 'A',
23+
title: 'Context A',
24+
label: 'Write Code',
25+
description: 'Research patterns, plan, execute',
26+
x: startX,
27+
},
28+
{
29+
id: 'B',
30+
title: 'Context B',
31+
label: 'Write Tests',
32+
description: 'Independent test derivation',
33+
x: startX + boxWidth + boxGap,
34+
},
35+
{
36+
id: 'C',
37+
title: 'Context C',
38+
label: 'Triage Failures',
39+
description: 'Objective diagnostic analysis',
40+
x: startX + 2 * (boxWidth + boxGap),
41+
},
42+
];
43+
44+
const viewBoxWidth = startX + 3 * boxWidth + 2 * boxGap + 80;
45+
const viewBoxHeight = 600;
46+
47+
return (
48+
<div
49+
className={`${styles.container} ${compact ? styles.compact : ''} three-context-workflow`}
50+
role="img"
51+
aria-label="Three-context workflow showing separated contexts for writing code, tests, and triage to prevent shared assumptions"
52+
>
53+
<svg
54+
viewBox={`0 0 ${viewBoxWidth} ${viewBoxHeight}`}
55+
className={styles.svg}
56+
xmlns="http://www.w3.org/2000/svg"
57+
>
58+
<defs>
59+
<marker
60+
id="arrowhead-three-context"
61+
markerWidth="10"
62+
markerHeight="10"
63+
refX="8"
64+
refY="3"
65+
orient="auto"
66+
className={styles.arrowMarker}
67+
>
68+
<polygon points="0 0, 10 3, 0 6" />
69+
</marker>
70+
71+
{/* Dashed pattern for separation barriers */}
72+
<pattern
73+
id="barrier-pattern"
74+
x="0"
75+
y="0"
76+
width="10"
77+
height="10"
78+
patternUnits="userSpaceOnUse"
79+
>
80+
<line
81+
x1="5"
82+
y1="0"
83+
x2="5"
84+
y2="10"
85+
className={styles.barrierLine}
86+
strokeDasharray="4 4"
87+
/>
88+
</pattern>
89+
</defs>
90+
91+
{/* Separation barriers between contexts */}
92+
{[0, 1].map((i) => {
93+
const barrierX = contexts[i].x + boxWidth + boxGap / 2;
94+
return (
95+
<line
96+
key={`barrier-${i}`}
97+
x1={barrierX}
98+
y1={centerY - boxHeight / 2 - 20}
99+
x2={barrierX}
100+
y2={centerY + boxHeight / 2 + 20}
101+
className={styles.barrier}
102+
strokeDasharray="12 8"
103+
/>
104+
);
105+
})}
106+
107+
{/* Arrows connecting contexts */}
108+
{[0, 1].map((i) => {
109+
const arrowStartX = contexts[i].x + boxWidth + 10;
110+
const arrowEndX = contexts[i + 1].x - 10;
111+
const arrowY = centerY;
112+
113+
return (
114+
<line
115+
key={`arrow-${i}`}
116+
x1={arrowStartX}
117+
y1={arrowY}
118+
x2={arrowEndX}
119+
y2={arrowY}
120+
className={styles.arrow}
121+
markerEnd="url(#arrowhead-three-context)"
122+
/>
123+
);
124+
})}
125+
126+
{/* Context boxes */}
127+
{contexts.map((context, index) => (
128+
<g
129+
key={context.id}
130+
className={styles.contextGroup}
131+
style={{ animationDelay: `${index * 0.15}s` }}
132+
>
133+
{/* Box background */}
134+
<rect
135+
x={context.x}
136+
y={centerY - boxHeight / 2}
137+
width={boxWidth}
138+
height={boxHeight}
139+
rx="16"
140+
className={styles.contextBox}
141+
/>
142+
143+
{/* Title and Label combined */}
144+
<text
145+
x={context.x + boxWidth / 2}
146+
y={centerY - 70}
147+
className={styles.contextTitle}
148+
textAnchor="middle"
149+
>
150+
{context.title}
151+
</text>
152+
153+
<text
154+
x={context.x + boxWidth / 2}
155+
y={centerY + 20}
156+
className={styles.contextLabel}
157+
textAnchor="middle"
158+
>
159+
{context.label}
160+
</text>
161+
162+
{/* Description - hidden in compact mode */}
163+
{!compact && (
164+
<text
165+
x={context.x + boxWidth / 2}
166+
y={centerY + 50}
167+
className={styles.contextDescription}
168+
textAnchor="middle"
169+
>
170+
{context.description}
171+
</text>
172+
)}
173+
</g>
174+
))}
175+
</svg>
176+
177+
{/* Additional context description */}
178+
{!compact && (
179+
<p className={styles.description}>
180+
Each context operates independently with fresh state, preventing shared
181+
assumptions and bias between code, tests, and diagnostic analysis.
182+
</p>
183+
)}
184+
</div>
185+
);
186+
}

0 commit comments

Comments
 (0)