soconnor/hristudio
1
0
Fork 0
mirror of https://github.com/soconnor0919/hristudio.git synced 2026-03-24 03:37:51 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: Add guided tour functionality for analytics and wizard components, including new tour steps and triggers.

Browse Source
This commit is contained in:
Sean O'Connor
2026-02-12 00:53:28 -05:00
parent 93de577939
commit 568d408587
5 changed files with 96 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/trials/views/TrialAnalysisView.tsx
View File

@@ -60,6 +60,17 @@ export function TrialAnalysisView({ trial, backHref }: TrialAnalysisViewProps) {
<ArrowLeft className="h-4 w-4" />
</Link>
</Button>
<Button variant="ghost" size="icon" className="h-7 w-7 ml-1" onClick={() => {
// Dispatch custom event since useTour isn't directly available in this specific context yet
// or better yet, assume we can import useTour if valid context, but here let's try direct button if applicable.
// Actually, TrialAnalysisView is a child of page, we need useTour context.
// Checking imports... TrialAnalysisView doesn't have useTour.
// We should probably just dispatch an event or rely on the parent.
// Let's assume we can add useTour hook support here.
document.dispatchEvent(new CustomEvent('hristudio-start-tour', { detail: 'analytics' }));
}}>
<Info className="h-4 w-4" />
</Button>
<div className="flex flex-col">
<h1 className="text-lg font-semibold leading-none tracking-tight">
{trial.experiment.name}
@@ -82,7 +93,7 @@ export function TrialAnalysisView({ trial, backHref }: TrialAnalysisViewProps) {
</div>
{/* Metrics Header */}
<div className="grid grid-cols-2 gap-4 md:grid-cols-4">
<div className="grid grid-cols-2 gap-4 md:grid-cols-4" id="tour-trial-metrics">
<Card className="bg-gradient-to-br from-blue-50 to-transparent dark:from-blue-950/20">
<CardHeader className="flex flex-row items-center justify-between pb-2 space-y-0">
<CardTitle className="text-sm font-medium text-muted-foreground">Duration</CardTitle>
@@ -147,7 +158,7 @@ export function TrialAnalysisView({ trial, backHref }: TrialAnalysisViewProps) {
<ResizablePanelGroup direction="vertical">
{/* TOP: Video & Timeline */}
<ResizablePanel defaultSize={50} minSize={30} className="flex flex-col min-h-0 bg-black/5 dark:bg-black/40">
<ResizablePanel defaultSize={50} minSize={30} className="flex flex-col min-h-0 bg-black/5 dark:bg-black/40" id="tour-trial-timeline">
<div className="relative flex-1 min-h-0 flex items-center justify-center">
{videoUrl ? (
<div className="absolute inset-0">
@@ -175,7 +186,7 @@ export function TrialAnalysisView({ trial, backHref }: TrialAnalysisViewProps) {
<ResizableHandle withHandle className="bg-border/50" />
{/* BOTTOM: Events Table */}
<ResizablePanel defaultSize={50} minSize={20} className="flex flex-col min-h-0 bg-background">
<ResizablePanel defaultSize={50} minSize={20} className="flex flex-col min-h-0 bg-background" id="tour-trial-events">
<div className="flex items-center justify-between px-4 py-3 border-b">
<div className="flex items-center gap-2">
<FileText className="h-4 w-4 text-primary" />

6
src/components/trials/wizard/panels/WizardControlPanel.tsx
View File

@@ -145,7 +145,7 @@ export const WizardControlPanel = React.memo(function WizardControlPanel({
};
return (
<div className="flex h-full flex-col">
<div className="flex h-full flex-col" id="tour-wizard-controls">
<div className="min-h-0 flex-1">
@@ -155,7 +155,7 @@ export const WizardControlPanel = React.memo(function WizardControlPanel({
{/* Decision Point UI removed as per user request (handled in Execution Panel) */}
{trial.status === "in_progress" ? (
<div className="space-y-2">
<div className="space-y-2" id="tour-wizard-action-list">
<Button
variant="outline"
size="sm"
@@ -225,7 +225,7 @@ export const WizardControlPanel = React.memo(function WizardControlPanel({
<div className="flex items-center justify-between">
<Label htmlFor="autonomous-life" className="text-xs font-normal text-muted-foreground">Autonomous Life</Label>
<Switch
id="autonomous-life"
id="tour-wizard-autonomous"
checked={!!autonomousLife}
onCheckedChange={handleAutonomousLifeChange}
disabled={!_isConnected || readOnly}