From 6fd641b3ea28e879ba4ef0110a9917c9c35aca94 Mon Sep 17 00:00:00 2001 From: Ajeet Patel Date: Sun, 23 Aug 2026 09:05:30 +0530 Subject: [PATCH 1/4] feat: add config sliders controls for each concept Signed-off-by: Ajeet Patel --- src/ExecutionSimulator.tsx | 41 +++++++++--- src/StrategyConfig.tsx | 110 ++++++++++++++++++++++++++++++++ src/components/ui/accordion.tsx | 78 ++++++++++++++++++++++ src/components/ui/card.tsx | 103 ++++++++++++++++++++++++++++++ 4 files changed, 322 insertions(+), 10 deletions(-) create mode 100644 src/StrategyConfig.tsx create mode 100644 src/components/ui/accordion.tsx create mode 100644 src/components/ui/card.tsx diff --git a/src/ExecutionSimulator.tsx b/src/ExecutionSimulator.tsx index 968180d..4624c09 100644 --- a/src/ExecutionSimulator.tsx +++ b/src/ExecutionSimulator.tsx @@ -10,12 +10,24 @@ import { Button } from '@/components/ui/button'; import { Play, Pause, BookOpen } from 'lucide-react'; import { CanvasTimeline, TimelineEvent, PatternType } from './CanvasTimeline'; import { DocsModal } from './DocsModal'; +import { StrategyConfig, StrategyConfiguration } from './StrategyConfig'; + +const DEFAULT_STRATEGY_CONFIG: StrategyConfiguration = { + debounceWait: 500, + throttleWait: 500, + rateLimitCount: 3, + rateLimitWindow: 2000, + batchMaxSize: 5, + batchMaxWait: 1000, + queueConcurrency: 1, +}; export function ExecutionSimulator() { const [events, setEvents] = useState([]); const [windowMs, setWindowMs] = useState(6000); const [isPaused, setIsPaused] = useState(false); const [showDoc, setShowDoc] = useState(false); + const [strategyConfig, setStrategyConfig] = useState(DEFAULT_STRATEGY_CONFIG); // Refs for tracking pause duration offsets const isPausedRef = useRef(isPaused); @@ -48,19 +60,19 @@ export function ExecutionSimulator() { // 1. Debounce const handleDebounce = useDebouncedCallback( useCallback((tTime?: number) => logEvent('debounce', tTime), [logEvent]), - { wait: 500 } + { wait: strategyConfig.debounceWait } ); // 2. Throttle const handleThrottle = useThrottledCallback( useCallback((tTime?: number) => logEvent('throttle', tTime), [logEvent]), - { wait: 500 } + { wait: strategyConfig.throttleWait } ); // 3. Rate Limit const handleRateLimit = useRateLimitedCallback( useCallback((tTime?: number) => logEvent('rateLimit', tTime), [logEvent]), - { limit: 3, window: 2000 } + { limit: strategyConfig.rateLimitCount, window: strategyConfig.rateLimitWindow } ); // 4. Queue @@ -76,7 +88,7 @@ export function ExecutionSimulator() { await new Promise(resolve => setTimeout(resolve, 400)); }, [logEvent]); - const handleQueue = useAsyncQueuer(processQueue, { concurrency: 1, started: true }); + const handleQueue = useAsyncQueuer(processQueue, { concurrency: strategyConfig.queueConcurrency, started: true }); // 5. Batch const processBatch = useCallback(async (items: string[]) => { @@ -92,7 +104,11 @@ export function ExecutionSimulator() { logEvent('batch', tTime); }, [logEvent]); - const handleBatch = useBatcher(processBatch, { maxSize: 5, wait: 1000, started: true }); + const handleBatch = useBatcher(processBatch, { + maxSize: strategyConfig.batchMaxSize, + wait: strategyConfig.batchMaxWait, + started: true, + }); // The Master Trigger const triggerAll = () => { @@ -140,8 +156,8 @@ export function ExecutionSimulator() {
{/* Controls Panel */} -
-
+
+

Controls @@ -222,10 +238,15 @@ export function ExecutionSimulator() { Adjust how much history is visible on screen.

+ + {/* Strategy Configuration */} +
+ +
{/* Sidebar Secondary Resource Button */} -
+
{/* Timeline Visualization Panel */} -
+
); -} \ No newline at end of file +} diff --git a/src/StrategyConfig.tsx b/src/StrategyConfig.tsx new file mode 100644 index 0000000..9903fcf --- /dev/null +++ b/src/StrategyConfig.tsx @@ -0,0 +1,110 @@ +import { + Accordion, + AccordionContent, + AccordionItem, + AccordionTrigger, +} from "@/components/ui/accordion"; +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/components/ui/card"; + +export interface StrategyConfiguration { + debounceWait: number; + throttleWait: number; + rateLimitCount: number; + rateLimitWindow: number; + batchMaxSize: number; + batchMaxWait: number; + queueConcurrency: number; +} + +interface StrategyConfigProps { + config: StrategyConfiguration; + onChange: (config: StrategyConfiguration) => void; +} + +interface RangeControlProps { + label: string; + value: number; + min: number; + max: number; + step?: number; + unit?: string; + onChange: (value: number) => void; +} + +function RangeControl({ label, value, min, max, step = 1, unit = '', onChange }: RangeControlProps) { + return ( + + ); +} + +export function StrategyConfig({ config, onChange }: StrategyConfigProps) { + const update = (key: K, value: StrategyConfiguration[K]) => { + onChange({ ...config, [key]: value }); + }; + + return ( + + + Strategy settings + + Adjust a pattern, then trigger events to see its new behavior. + + + + + + Debounce + update('debounceWait', value)} /> + + + Throttle + update('throttleWait', value)} /> + + + Rate limit + + update('rateLimitCount', value)} /> + update('rateLimitWindow', value)} /> + + + + Batching + + update('batchMaxSize', value)} /> + update('batchMaxWait', value)} /> + + + + Async queue + update('queueConcurrency', value)} /> + + + + + ); +} diff --git a/src/components/ui/accordion.tsx b/src/components/ui/accordion.tsx new file mode 100644 index 0000000..f86cbf8 --- /dev/null +++ b/src/components/ui/accordion.tsx @@ -0,0 +1,78 @@ +import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion"; +import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"; + +import { cn } from "@/lib/utils"; + +function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) { + return ( + + ); +} + +function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) { + return ( + + ); +} + +function AccordionTrigger({ + className, + children, + ...props +}: AccordionPrimitive.Trigger.Props) { + return ( + + + {children} + + + + + ); +} + +function AccordionContent({ + className, + children, + ...props +}: AccordionPrimitive.Panel.Props) { + return ( + +
+ {children} +
+ + ); +} + +export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }; diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx new file mode 100644 index 0000000..fe271e8 --- /dev/null +++ b/src/components/ui/card.tsx @@ -0,0 +1,103 @@ +import * as React from "react"; + +import { cn } from "@/lib/utils"; + +function Card({ + className, + size = "default", + ...props +}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) { + return ( +
img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl", + className, + )} + {...props} + /> + ); +} + +function CardHeader({ className, ...props }: React.ComponentProps<"div">) { + return ( +
+ ); +} + +function CardTitle({ className, ...props }: React.ComponentProps<"div">) { + return ( +
+ ); +} + +function CardDescription({ className, ...props }: React.ComponentProps<"div">) { + return ( +
+ ); +} + +function CardAction({ className, ...props }: React.ComponentProps<"div">) { + return ( +
+ ); +} + +function CardContent({ className, ...props }: React.ComponentProps<"div">) { + return ( +
+ ); +} + +function CardFooter({ className, ...props }: React.ComponentProps<"div">) { + return ( +
+ ); +} + +export { + Card, + CardHeader, + CardFooter, + CardTitle, + CardAction, + CardDescription, + CardContent, +}; From 2f4f569c8ba53950e4dd3a6dd1c77b4eb42669c8 Mon Sep 17 00:00:00 2001 From: Ajeet Patel Date: Sun, 23 Aug 2026 09:16:20 +0530 Subject: [PATCH 2/4] fix control panel height --- src/ExecutionSimulator.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ExecutionSimulator.tsx b/src/ExecutionSimulator.tsx index aa23c87..26b8197 100644 --- a/src/ExecutionSimulator.tsx +++ b/src/ExecutionSimulator.tsx @@ -171,7 +171,7 @@ export function ExecutionSimulator() {
{/* Controls Panel */} -
+

From 22d55c4d76bd960f3672593154f1e73a9f8eb9a0 Mon Sep 17 00:00:00 2001 From: Ajeet Patel Date: Sat, 29 Aug 2026 15:43:31 +0530 Subject: [PATCH 3/4] refactor: enhance StrategyConfig layout and improve accessibility --- src/StrategyConfig.tsx | 150 +++++++++++++++++++++++++++++++---------- 1 file changed, 113 insertions(+), 37 deletions(-) diff --git a/src/StrategyConfig.tsx b/src/StrategyConfig.tsx index 9903fcf..dbf4b89 100644 --- a/src/StrategyConfig.tsx +++ b/src/StrategyConfig.tsx @@ -68,43 +68,119 @@ export function StrategyConfig({ config, onChange }: StrategyConfigProps) { }; return ( - - - Strategy settings - - Adjust a pattern, then trigger events to see its new behavior. - - - - - - Debounce - update('debounceWait', value)} /> - - - Throttle - update('throttleWait', value)} /> - - - Rate limit - - update('rateLimitCount', value)} /> - update('rateLimitWindow', value)} /> - - - - Batching - - update('batchMaxSize', value)} /> - update('batchMaxWait', value)} /> - - - - Async queue - update('queueConcurrency', value)} /> - - - + + + + + + + Strategy settings + + + Tune a pattern, then trigger events to see the effect. + + + + + + + + + Debounce + + + update("debounceWait", value)} + /> + + + + + Throttle + + + update("throttleWait", value)} + /> + + + + + Rate limit + + + update("rateLimitCount", value)} + /> + update("rateLimitWindow", value)} + /> + + + + + Batching + + + update("batchMaxSize", value)} + /> + update("batchMaxWait", value)} + /> + + + + + Async queue + + + update("queueConcurrency", value)} + /> + + + + + + + ); } From 8293397242e837d0a4c3d367f37698ef3fe35d2c Mon Sep 17 00:00:00 2001 From: Ajeet Patel Date: Tue, 1 Sep 2026 09:19:34 +0530 Subject: [PATCH 4/4] style: improve layout of controls and strategy settings for better responsiveness --- src/ExecutionSimulator.tsx | 6 +++--- src/StrategyConfig.tsx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/ExecutionSimulator.tsx b/src/ExecutionSimulator.tsx index 26b8197..c99b422 100644 --- a/src/ExecutionSimulator.tsx +++ b/src/ExecutionSimulator.tsx @@ -171,8 +171,8 @@ export function ExecutionSimulator() {
{/* Controls Panel */} -
-
+
+

Controls @@ -288,7 +288,7 @@ export function ExecutionSimulator() {

{/* Timeline Visualization Panel */} -
+
- + Strategy settings