feat(runtime): option for setting terminal open by default

Author: AriPerkkio

docs/tutorialkit.dev/src/content/docs/reference/configuration.mdx

@@ -148,6 +148,8 @@ Configures one or more terminals. TutorialKit provides two types of terminals: r
 
 You can define which terminal panel will be active by default by specifying the `activePanel` value. The value is the given terminal's position in the `panels` array. If you omit the `activePanel` property, the first panel will be the active one.
 
+You can set terminal open by default by specifying the `open` value.
+
 An interactive terminal will disable the output redirect syntax by default. For instance, you cannot create a file `world.txt` with the contents `hello` using the command `echo hello > world.txt`. The reason is that this could disrupt the lesson if a user overwrites certain files. To allow output redirection, you can change the behavior with the `allowRedirects` setting. You can define this setting either per panel or for all panels at once.
 
 Additionally, you may not want users to run arbitrary commands. For example, if you are creating a lesson about `vitest`, you could specify that the only command the user can run is `vitest` by providing a list of `allowCommands`. Any other command executed by the user will be blocked. You can define the `allowCommands` setting either per panel or for all panels at once.
@@ -162,7 +164,8 @@ type Terminal = {
     panels: TerminalPanel[],
     activePanel?: number,
     allowRedirects?: boolean,
-    allowCommands?: string[]
+    allowCommands?: string[],
+    open?: boolean,
 }
 
 type TerminalPanel = TerminalType
@@ -177,6 +180,7 @@ Example value:
 
 ```yaml
 terminal:
+  open: true
   activePanel: 1
   panels:
     - ['output', 'Dev Server']

packages/components/react/src/Panels/WorkspacePanel.tsx

@@ -93,6 +93,10 @@ export function WorkspacePanel({ tutorialStore, theme }: Props) {
       setHelpAction('reset');
     }
 
+    if (tutorialStore.terminalConfig.value?.defaultOpen) {
+      showTerminal();
+    }
+
     return () => unsubscribe();
   }, [tutorialStore.ref]);
 

packages/runtime/src/webcontainer/terminal-config.ts

@@ -5,6 +5,7 @@ import type { ITerminal } from '../utils/terminal.js';
 interface NormalizedTerminalConfig {
   panels: TerminalPanel[];
   activePanel: number;
+  defaultOpen: boolean;
 }
 
 interface TerminalPanelOptions {
@@ -30,6 +31,10 @@ export class TerminalConfig {
   get activePanel() {
     return this._config.activePanel;
   }
+
+  get defaultOpen() {
+    return this._config.defaultOpen;
+  }
 }
 
 const TERMINAL_PANEL_TITLES: Record<TerminalPanelType, string> = {
@@ -192,6 +197,7 @@ function normalizeTerminalConfig(config?: TerminalSchema): NormalizedTerminalCon
     return {
       panels: [],
       activePanel,
+      defaultOpen: false,
     };
   }
 
@@ -203,6 +209,7 @@ function normalizeTerminalConfig(config?: TerminalSchema): NormalizedTerminalCon
     return {
       panels: [new TerminalPanel('output')],
       activePanel,
+      defaultOpen: false,
     };
   }
 
@@ -254,5 +261,6 @@ function normalizeTerminalConfig(config?: TerminalSchema): NormalizedTerminalCon
   return {
     activePanel,
     panels,
+    defaultOpen: config.open || false,
   };
 }

packages/types/src/schemas/common.ts

@@ -74,6 +74,8 @@ export const terminalSchema = z.union([
   z.boolean(),
 
   z.strictObject({
+    open: z.boolean().optional().describe('Defines if terminal should be open by default'),
+
     panels: z.union([
       // either literally just `output`
       z.literal('output'),