+
diff --git a/src/browser/components/TitleBar.tsx b/src/browser/components/TitleBar.tsx
index 44f714f0c..a540c4476 100644
--- a/src/browser/components/TitleBar.tsx
+++ b/src/browser/components/TitleBar.tsx
@@ -5,6 +5,7 @@ import { SettingsButton } from "./SettingsButton";
import { TooltipWrapper, Tooltip } from "./Tooltip";
import type { UpdateStatus } from "@/common/types/ipc";
import { isTelemetryEnabled } from "@/common/telemetry";
+import { useTutorial } from "@/browser/contexts/TutorialContext";
// Update check intervals
const UPDATE_CHECK_INTERVAL_MS = 4 * 60 * 60 * 1000; // 4 hours
@@ -78,6 +79,16 @@ export function TitleBar() {
const [isCheckingOnHover, setIsCheckingOnHover] = useState(false);
const lastHoverCheckTime = useRef(0);
const telemetryEnabled = isTelemetryEnabled();
+ const { startSequence } = useTutorial();
+
+ // Start settings tutorial on first launch
+ useEffect(() => {
+ // Small delay to ensure UI is rendered before showing tutorial
+ const timer = setTimeout(() => {
+ startSequence("settings");
+ }, 500);
+ return () => clearTimeout(timer);
+ }, [startSequence]);
useEffect(() => {
// Skip update checks if telemetry is disabled
diff --git a/src/browser/components/TutorialTooltip.tsx b/src/browser/components/TutorialTooltip.tsx
new file mode 100644
index 000000000..1adda8dc5
--- /dev/null
+++ b/src/browser/components/TutorialTooltip.tsx
@@ -0,0 +1,224 @@
+import React, { useState, useRef, useLayoutEffect } from "react";
+import { createPortal } from "react-dom";
+import { cn } from "@/common/lib/utils";
+
+export interface TutorialStep {
+ target: string; // data-tutorial attribute value
+ title: string;
+ content: React.ReactNode;
+ position?: "top" | "bottom" | "left" | "right";
+}
+
+interface TutorialTooltipProps {
+ step: TutorialStep;
+ currentStep: number;
+ totalSteps: number;
+ onNext: () => void;
+ onDismiss: () => void;
+ onDisableTutorial: () => void;
+}
+
+interface TooltipPosition {
+ top: number;
+ left: number;
+ arrowStyle: React.CSSProperties;
+ actualPosition: "top" | "bottom" | "left" | "right";
+}
+
+export const TutorialTooltip: React.FC = ({
+ step,
+ currentStep,
+ totalSteps,
+ onNext,
+ onDismiss,
+ onDisableTutorial,
+}) => {
+ const tooltipRef = useRef(null);
+ const [position, setPosition] = useState(null);
+ const [showDisableOption, setShowDisableOption] = useState(false);
+
+ useLayoutEffect(() => {
+ const targetEl = document.querySelector(`[data-tutorial="${step.target}"]`);
+ if (!targetEl || !tooltipRef.current) {
+ return;
+ }
+
+ const calculatePosition = () => {
+ const target = targetEl.getBoundingClientRect();
+ const tooltip = tooltipRef.current!.getBoundingClientRect();
+ const viewportWidth = window.innerWidth;
+ const viewportHeight = window.innerHeight;
+ const gap = 12;
+
+ const preferredPosition = step.position ?? "bottom";
+ let actualPosition = preferredPosition;
+ let top: number;
+ let left: number;
+
+ // Try preferred position, flip if it doesn't fit
+ if (preferredPosition === "bottom" || preferredPosition === "top") {
+ if (preferredPosition === "bottom") {
+ top = target.bottom + gap;
+ if (top + tooltip.height > viewportHeight) {
+ actualPosition = "top";
+ top = target.top - tooltip.height - gap;
+ }
+ } else {
+ top = target.top - tooltip.height - gap;
+ if (top < 0) {
+ actualPosition = "bottom";
+ top = target.bottom + gap;
+ }
+ }
+ // Center horizontally relative to target
+ left = target.left + target.width / 2 - tooltip.width / 2;
+ } else {
+ // left or right
+ if (preferredPosition === "right") {
+ left = target.right + gap;
+ if (left + tooltip.width > viewportWidth) {
+ actualPosition = "left";
+ left = target.left - tooltip.width - gap;
+ }
+ } else {
+ left = target.left - tooltip.width - gap;
+ if (left < 0) {
+ actualPosition = "right";
+ left = target.right + gap;
+ }
+ }
+ // Center vertically relative to target
+ top = target.top + target.height / 2 - tooltip.height / 2;
+ }
+
+ // Clamp to viewport bounds
+ const minMargin = 8;
+ left = Math.max(minMargin, Math.min(viewportWidth - tooltip.width - minMargin, left));
+ top = Math.max(minMargin, Math.min(viewportHeight - tooltip.height - minMargin, top));
+
+ // Calculate arrow position
+ const arrowStyle: React.CSSProperties = {};
+ if (actualPosition === "bottom" || actualPosition === "top") {
+ const arrowLeft = target.left + target.width / 2 - left;
+ arrowStyle.left = `${Math.max(12, Math.min(tooltip.width - 12, arrowLeft))}px`;
+ if (actualPosition === "bottom") {
+ arrowStyle.top = "-6px";
+ arrowStyle.borderWidth = "0 6px 6px 6px";
+ arrowStyle.borderColor = "transparent transparent var(--color-accent) transparent";
+ } else {
+ arrowStyle.bottom = "-6px";
+ arrowStyle.borderWidth = "6px 6px 0 6px";
+ arrowStyle.borderColor = "var(--color-accent) transparent transparent transparent";
+ }
+ } else {
+ const arrowTop = target.top + target.height / 2 - top;
+ arrowStyle.top = `${Math.max(12, Math.min(tooltip.height - 12, arrowTop))}px`;
+ if (actualPosition === "right") {
+ arrowStyle.left = "-6px";
+ arrowStyle.borderWidth = "6px 6px 6px 0";
+ arrowStyle.borderColor = "transparent var(--color-accent) transparent transparent";
+ } else {
+ arrowStyle.right = "-6px";
+ arrowStyle.borderWidth = "6px 0 6px 6px";
+ arrowStyle.borderColor = "transparent transparent transparent var(--color-accent)";
+ }
+ }
+
+ setPosition({ top, left, arrowStyle, actualPosition });
+ };
+
+ calculatePosition();
+
+ // Recalculate on resize
+ window.addEventListener("resize", calculatePosition);
+ return () => window.removeEventListener("resize", calculatePosition);
+ }, [step.target, step.position]);
+
+ // Add highlight to target element
+ useLayoutEffect(() => {
+ const targetEl = document.querySelector(`[data-tutorial="${step.target}"]`);
+ if (!targetEl) return;
+
+ targetEl.classList.add("tutorial-highlight");
+ return () => {
+ targetEl.classList.remove("tutorial-highlight");
+ };
+ }, [step.target]);
+
+ const isLastStep = currentStep === totalSteps;
+
+ const handleDismissClick = () => {
+ if (showDisableOption) {
+ onDismiss();
+ } else {
+ setShowDisableOption(true);
+ }
+ };
+
+ return createPortal(
+ <>
+ {/* Backdrop - subtle overlay */}
+
+ {/* Tooltip */}
+
+ {/* Arrow */}
+
+
+ {/* Header */}
+
+
{step.title}
+
+ {currentStep}/{totalSteps}
+
+
+
+ {/* Content */}
+
{step.content}
+
+ {/* Actions */}
+
+
+ {showDisableOption ? (
+
+ ) : (
+
+ )}
+
+
+
+
@@ -43,20 +59,21 @@ export const WorkspaceHeader: React.FC
= ({
{namedWorkspacePath}
-
-
-
- Open terminal window ({formatKeybind(KEYBINDS.OPEN_TERMINAL)})
-
-
);
};
diff --git a/src/browser/contexts/TutorialContext.tsx b/src/browser/contexts/TutorialContext.tsx
new file mode 100644
index 000000000..5ecfbdd88
--- /dev/null
+++ b/src/browser/contexts/TutorialContext.tsx
@@ -0,0 +1,182 @@
+import React, { createContext, useContext, useState, useCallback, useEffect } from "react";
+import { TutorialTooltip, type TutorialStep } from "@/browser/components/TutorialTooltip";
+import {
+ TUTORIAL_STATE_KEY,
+ DEFAULT_TUTORIAL_STATE,
+ type TutorialState,
+ type TutorialSequence,
+} from "@/common/constants/storage";
+import { readPersistedState, updatePersistedState } from "@/browser/hooks/usePersistedState";
+
+// Tutorial step definitions for each sequence
+const TUTORIAL_SEQUENCES: Record
= {
+ settings: [
+ {
+ target: "settings-button",
+ title: "Settings",
+ content: "Access model configuration, API keys, keyboard shortcuts, and preferences here.",
+ position: "bottom",
+ },
+ ],
+ creation: [
+ {
+ target: "model-selector",
+ title: "Choose Your Model",
+ content:
+ "Select which AI model to use. Different models have different capabilities and costs.",
+ position: "bottom",
+ },
+ {
+ target: "mode-selector",
+ title: "Exec vs Plan Mode",
+ content:
+ "Exec mode lets the AI edit files and run commands. Plan mode is read-only—great for exploring ideas safely.",
+ position: "top",
+ },
+ {
+ target: "trunk-branch",
+ title: "Branch From",
+ content:
+ "Choose which branch to fork from. Your workspace will be created as a new branch from this starting point.",
+ position: "top",
+ },
+ {
+ target: "runtime-selector",
+ title: "Runtime Environment",
+ content: "Run locally using git worktrees, or connect via SSH to work on a remote machine.",
+ position: "top",
+ },
+ ],
+ workspace: [
+ {
+ target: "terminal-button",
+ title: "Terminal Access",
+ content:
+ "Open a terminal window in your workspace to run commands directly alongside the AI.",
+ position: "bottom",
+ },
+ ],
+};
+
+interface TutorialContextValue {
+ startSequence: (sequence: TutorialSequence) => void;
+ isSequenceCompleted: (sequence: TutorialSequence) => boolean;
+ isTutorialDisabled: () => boolean;
+}
+
+const TutorialContext = createContext(null);
+
+export function useTutorial(): TutorialContextValue {
+ const context = useContext(TutorialContext);
+ if (!context) {
+ throw new Error("useTutorial must be used within a TutorialProvider");
+ }
+ return context;
+}
+
+interface TutorialProviderProps {
+ children: React.ReactNode;
+}
+
+export function TutorialProvider({ children }: TutorialProviderProps) {
+ const [tutorialState, setTutorialState] = useState(() =>
+ readPersistedState(TUTORIAL_STATE_KEY, DEFAULT_TUTORIAL_STATE)
+ );
+ const [activeSequence, setActiveSequence] = useState(null);
+ const [currentStepIndex, setCurrentStepIndex] = useState(0);
+
+ // Persist state changes
+ useEffect(() => {
+ updatePersistedState(TUTORIAL_STATE_KEY, tutorialState);
+ }, [tutorialState]);
+
+ const isSequenceCompleted = useCallback(
+ (sequence: TutorialSequence): boolean => {
+ return tutorialState.completed[sequence] === true;
+ },
+ [tutorialState.completed]
+ );
+
+ const isTutorialDisabled = useCallback((): boolean => {
+ return tutorialState.disabled;
+ }, [tutorialState.disabled]);
+
+ const startSequence = useCallback(
+ (sequence: TutorialSequence) => {
+ // Don't start if disabled or already completed
+ if (tutorialState.disabled || tutorialState.completed[sequence]) {
+ return;
+ }
+ // Don't start if another sequence is active
+ if (activeSequence !== null) {
+ return;
+ }
+ setActiveSequence(sequence);
+ setCurrentStepIndex(0);
+ },
+ [tutorialState.disabled, tutorialState.completed, activeSequence]
+ );
+
+ const handleNext = useCallback(() => {
+ if (activeSequence === null) return;
+
+ const steps = TUTORIAL_SEQUENCES[activeSequence];
+ if (currentStepIndex < steps.length - 1) {
+ setCurrentStepIndex((prev) => prev + 1);
+ } else {
+ // Complete the sequence
+ setTutorialState((prev) => ({
+ ...prev,
+ completed: { ...prev.completed, [activeSequence]: true },
+ }));
+ setActiveSequence(null);
+ setCurrentStepIndex(0);
+ }
+ }, [activeSequence, currentStepIndex]);
+
+ const handleDismiss = useCallback(() => {
+ if (activeSequence === null) return;
+
+ // Mark as completed when dismissed
+ setTutorialState((prev) => ({
+ ...prev,
+ completed: { ...prev.completed, [activeSequence]: true },
+ }));
+ setActiveSequence(null);
+ setCurrentStepIndex(0);
+ }, [activeSequence]);
+
+ const handleDisableTutorial = useCallback(() => {
+ setTutorialState((prev) => ({
+ ...prev,
+ disabled: true,
+ }));
+ setActiveSequence(null);
+ setCurrentStepIndex(0);
+ }, []);
+
+ const contextValue: TutorialContextValue = {
+ startSequence,
+ isSequenceCompleted,
+ isTutorialDisabled,
+ };
+
+ const activeSteps = activeSequence ? TUTORIAL_SEQUENCES[activeSequence] : null;
+ const currentStep = activeSteps?.[currentStepIndex];
+
+ return (
+
+ {children}
+ {currentStep && activeSteps && (
+
+ )}
+
+ );
+}
diff --git a/src/browser/styles/globals.css b/src/browser/styles/globals.css
index ee0cf3cd5..f73a120c1 100644
--- a/src/browser/styles/globals.css
+++ b/src/browser/styles/globals.css
@@ -1274,3 +1274,22 @@ input[type="checkbox"] {
.text-dim {
color: var(--color-dim);
}
+
+/* Tutorial highlight effect */
+.tutorial-highlight {
+ position: relative;
+ z-index: 9997;
+ border-radius: 6px;
+ box-shadow: 0 0 0 2px var(--color-accent);
+ animation: tutorial-pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes tutorial-pulse {
+ 0%, 100% {
+ box-shadow: 0 0 0 2px var(--color-accent);
+ }
+ 50% {
+ box-shadow: 0 0 0 3px var(--color-accent), 0 0 12px var(--color-accent);
+ }
+}
+
diff --git a/src/common/constants/storage.ts b/src/common/constants/storage.ts
index e1108c0a3..1e17ee1ae 100644
--- a/src/common/constants/storage.ts
+++ b/src/common/constants/storage.ts
@@ -126,6 +126,24 @@ export const PREFERRED_COMPACTION_MODEL_KEY = "preferredCompactionModel";
*/
export const VIM_ENABLED_KEY = "vimEnabled";
+/**
+ * Tutorial state storage key (global)
+ * Stores: { disabled: boolean, completed: { settings?: true, creation?: true, workspace?: true } }
+ */
+export const TUTORIAL_STATE_KEY = "tutorialState";
+
+export type TutorialSequence = "settings" | "creation" | "workspace";
+
+export interface TutorialState {
+ disabled: boolean;
+ completed: Partial>;
+}
+
+export const DEFAULT_TUTORIAL_STATE: TutorialState = {
+ disabled: false,
+ completed: {},
+};
+
/**
* Get the localStorage key for hunk expand/collapse state in Review tab
* Stores user's manual expand/collapse preferences per hunk
diff --git a/tests/e2e/electronTest.ts b/tests/e2e/electronTest.ts
index a8f0aade6..b12a414f4 100644
--- a/tests/e2e/electronTest.ts
+++ b/tests/e2e/electronTest.ts
@@ -265,6 +265,20 @@ export const electronTest = base.extend({
const window = await app.firstWindow();
await window.waitForLoadState("domcontentloaded");
await window.setViewportSize({ width: 1600, height: 900 });
+
+ // Disable tutorials for e2e tests by marking them as completed
+ // Must set before React reads the state, so we set and reload
+ await window.evaluate(() => {
+ const tutorialState = {
+ disabled: false,
+ completed: { settings: true, creation: true, workspace: true },
+ };
+ localStorage.setItem("tutorialState", JSON.stringify(tutorialState));
+ });
+ // Reload so React picks up the tutorial state on mount
+ await window.reload();
+ await window.waitForLoadState("domcontentloaded");
+
window.on("console", (msg) => {
// eslint-disable-next-line no-console
console.log(`[renderer:${msg.type()}]`, msg.text());
From e8b27ca5092854727e43d21b69d45b9d0bbc816c Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Sun, 30 Nov 2025 07:07:43 +0000
Subject: [PATCH 2/4] feat: add TutorialTooltip chromatic stories and disable
tutorials in other stories
- Add TutorialTooltip.stories.tsx with stories for:
- Single step tutorial
- Multi-step tutorials (first, middle, last)
- All position variants (top, bottom, left, right)
- Add tutorialEnabled parameter to preview config
- Disable tutorials by default in all stories via decorator
- Individual stories can opt-in via parameters.tutorialEnabled = true
---
.storybook/preview.tsx | 18 ++
.../components/TutorialTooltip.stories.tsx | 232 ++++++++++++++++++
2 files changed, 250 insertions(+)
create mode 100644 src/browser/components/TutorialTooltip.stories.tsx
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index a97672148..cc8a15e17 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -2,6 +2,19 @@ import React from "react";
import type { Preview } from "@storybook/react-vite";
import { ThemeProvider, type ThemeMode } from "../src/browser/contexts/ThemeContext";
import "../src/browser/styles/globals.css";
+import { TUTORIAL_STATE_KEY, type TutorialState } from "../src/common/constants/storage";
+
+// Disable tutorials by default in Storybook to prevent them from interfering with stories
+// Individual stories can override this by setting localStorage before rendering
+function disableTutorials() {
+ if (typeof localStorage !== "undefined") {
+ const disabledState: TutorialState = {
+ disabled: true,
+ completed: { settings: true, creation: true, workspace: true },
+ };
+ localStorage.setItem(TUTORIAL_STATE_KEY, JSON.stringify(disabledState));
+ }
+}
const preview: Preview = {
globalTypes: {
@@ -32,6 +45,11 @@ const preview: Preview = {
document.documentElement.style.colorScheme = mode;
}
+ // Disable tutorials by default unless explicitly enabled for this story
+ if (!context.parameters?.tutorialEnabled) {
+ disableTutorials();
+ }
+
return (
diff --git a/src/browser/components/TutorialTooltip.stories.tsx b/src/browser/components/TutorialTooltip.stories.tsx
new file mode 100644
index 000000000..de66142e9
--- /dev/null
+++ b/src/browser/components/TutorialTooltip.stories.tsx
@@ -0,0 +1,232 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { TutorialTooltip, type TutorialStep } from "./TutorialTooltip";
+import { TutorialProvider } from "@/browser/contexts/TutorialContext";
+import { TUTORIAL_STATE_KEY, type TutorialState } from "@/common/constants/storage";
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop = () => {};
+
+const meta = {
+ title: "Components/TutorialTooltip",
+ component: TutorialTooltip,
+ parameters: {
+ layout: "centered",
+ // Enable tutorials for these stories
+ tutorialEnabled: true,
+ },
+ tags: ["autodocs"],
+ decorators: [
+ (Story) => {
+ // Reset tutorial state to not-disabled for these stories
+ const enabledState: TutorialState = {
+ disabled: false,
+ completed: {},
+ };
+ localStorage.setItem(TUTORIAL_STATE_KEY, JSON.stringify(enabledState));
+
+ return (
+
+
+
+ );
+ },
+ ],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+// Mock target element for positioning
+const MockTargetWrapper: React.FC<{
+ children: React.ReactNode;
+ tutorialTarget: string;
+}> = ({ children, tutorialTarget }) => (
+
+
+ {children}
+
+);
+
+const sampleStep: TutorialStep = {
+ target: "demo-target",
+ title: "Welcome to Mux",
+ content: "This is a tutorial tooltip that helps guide users through the application.",
+ position: "bottom",
+};
+
+export const SingleStep: Story = {
+ args: {
+ step: sampleStep,
+ currentStep: 1,
+ totalSteps: 1,
+ onNext: noop,
+ onDismiss: noop,
+ onDisableTutorial: noop,
+ },
+ render: (args) => (
+
+
+
+ ),
+};
+
+export const MultiStepFirst: Story = {
+ args: {
+ step: {
+ target: "demo-target",
+ title: "Choose Your Model",
+ content:
+ "Select which AI model to use. Different models have different capabilities and costs.",
+ position: "bottom",
+ },
+ currentStep: 1,
+ totalSteps: 4,
+ onNext: noop,
+ onDismiss: noop,
+ onDisableTutorial: noop,
+ },
+ render: (args) => (
+
+
+
+ ),
+};
+
+export const MultiStepMiddle: Story = {
+ args: {
+ step: {
+ target: "demo-target",
+ title: "Exec vs Plan Mode",
+ content:
+ "Exec mode lets the AI edit files and run commands. Plan mode is read-only—great for exploring ideas safely.",
+ position: "top",
+ },
+ currentStep: 2,
+ totalSteps: 4,
+ onNext: noop,
+ onDismiss: noop,
+ onDisableTutorial: noop,
+ },
+ render: (args) => (
+
+
+
+ ),
+};
+
+export const MultiStepLast: Story = {
+ args: {
+ step: {
+ target: "demo-target",
+ title: "Runtime Environment",
+ content: "Run locally using git worktrees, or connect via SSH to work on a remote machine.",
+ position: "bottom",
+ },
+ currentStep: 4,
+ totalSteps: 4,
+ onNext: noop,
+ onDismiss: noop,
+ onDisableTutorial: noop,
+ },
+ render: (args) => (
+
+
+
+ ),
+};
+
+// Position variants
+const PositionWrapper: React.FC<{
+ children: React.ReactNode;
+ tutorialTarget: string;
+ position: "center" | "top" | "bottom" | "left" | "right";
+}> = ({ children, tutorialTarget, position }) => {
+ const positionClasses = {
+ center: "items-center justify-center",
+ top: "items-start justify-center pt-20",
+ bottom: "items-end justify-center pb-20",
+ left: "items-center justify-start pl-20",
+ right: "items-center justify-end pr-20",
+ };
+
+ return (
+
+
+ {children}
+
+ );
+};
+
+export const PositionBottom: Story = {
+ args: {
+ step: { ...sampleStep, position: "bottom" },
+ currentStep: 1,
+ totalSteps: 1,
+ onNext: noop,
+ onDismiss: noop,
+ onDisableTutorial: noop,
+ },
+ render: (args) => (
+
+
+
+ ),
+};
+
+export const PositionTop: Story = {
+ args: {
+ step: { ...sampleStep, position: "top" },
+ currentStep: 1,
+ totalSteps: 1,
+ onNext: noop,
+ onDismiss: noop,
+ onDisableTutorial: noop,
+ },
+ render: (args) => (
+
+
+
+ ),
+};
+
+export const PositionLeft: Story = {
+ args: {
+ step: { ...sampleStep, position: "left" },
+ currentStep: 1,
+ totalSteps: 1,
+ onNext: noop,
+ onDismiss: noop,
+ onDisableTutorial: noop,
+ },
+ render: (args) => (
+
+
+
+ ),
+};
+
+export const PositionRight: Story = {
+ args: {
+ step: { ...sampleStep, position: "right" },
+ currentStep: 1,
+ totalSteps: 1,
+ onNext: noop,
+ onDismiss: noop,
+ onDisableTutorial: noop,
+ },
+ render: (args) => (
+
+
+
+ ),
+};
From 2bfe5f5b83ac4dbf524bf7ac8b3be094113ef93d Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Sun, 30 Nov 2025 13:30:02 +0100
Subject: [PATCH 3/4] fix: wording fixes
---
src/browser/contexts/TutorialContext.tsx | 10 +++++-----
1 file changed, 5 insertions(+), 5 deletions(-)
diff --git a/src/browser/contexts/TutorialContext.tsx b/src/browser/contexts/TutorialContext.tsx
index 5ecfbdd88..178636e27 100644
--- a/src/browser/contexts/TutorialContext.tsx
+++ b/src/browser/contexts/TutorialContext.tsx
@@ -14,7 +14,7 @@ const TUTORIAL_SEQUENCES: Record = {
{
target: "settings-button",
title: "Settings",
- content: "Access model configuration, API keys, keyboard shortcuts, and preferences here.",
+ content: "Configure providers, models and other settings here.",
position: "bottom",
},
],
@@ -30,20 +30,20 @@ const TUTORIAL_SEQUENCES: Record = {
target: "mode-selector",
title: "Exec vs Plan Mode",
content:
- "Exec mode lets the AI edit files and run commands. Plan mode is read-only—great for exploring ideas safely.",
+ "Exec mode lets the AI edit files and run commands. Plan mode is read-only - use it to scope the agent's implementation.",
position: "top",
},
{
target: "trunk-branch",
title: "Branch From",
content:
- "Choose which branch to fork from. Your workspace will be created as a new branch from this starting point.",
+ "Choose which branch to create your workspace from.",
position: "top",
},
{
target: "runtime-selector",
title: "Runtime Environment",
- content: "Run locally using git worktrees, or connect via SSH to work on a remote machine.",
+ content: "Run locally using git worktrees, or connect via SSH to setup the worktree on a remote machine in an isolated environment.",
position: "top",
},
],
@@ -52,7 +52,7 @@ const TUTORIAL_SEQUENCES: Record = {
target: "terminal-button",
title: "Terminal Access",
content:
- "Open a terminal window in your workspace to run commands directly alongside the AI.",
+ "Open a terminal window in your workspace.",
position: "bottom",
},
],
From 1e81d5f102f590c32faa6f613fa9c9d11c1f1258 Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Sun, 30 Nov 2025 13:35:09 +0100
Subject: [PATCH 4/4] fix: fmt
---
src/browser/contexts/TutorialContext.tsx | 9 ++++-----
1 file changed, 4 insertions(+), 5 deletions(-)
diff --git a/src/browser/contexts/TutorialContext.tsx b/src/browser/contexts/TutorialContext.tsx
index 178636e27..e468fb88a 100644
--- a/src/browser/contexts/TutorialContext.tsx
+++ b/src/browser/contexts/TutorialContext.tsx
@@ -36,14 +36,14 @@ const TUTORIAL_SEQUENCES: Record = {
{
target: "trunk-branch",
title: "Branch From",
- content:
- "Choose which branch to create your workspace from.",
+ content: "Choose which branch to create your workspace from.",
position: "top",
},
{
target: "runtime-selector",
title: "Runtime Environment",
- content: "Run locally using git worktrees, or connect via SSH to setup the worktree on a remote machine in an isolated environment.",
+ content:
+ "Run locally using git worktrees, or connect via SSH to setup the worktree on a remote machine in an isolated environment.",
position: "top",
},
],
@@ -51,8 +51,7 @@ const TUTORIAL_SEQUENCES: Record = {
{
target: "terminal-button",
title: "Terminal Access",
- content:
- "Open a terminal window in your workspace.",
+ content: "Open a terminal window in your workspace.",
position: "bottom",
},
],