@rootly/wizard 0.1.0

package/src/tui/screens/ListScreen.js

@@ -0,0 +1,29 @@
+import { createElement as h } from 'react';
+import { Box, Text } from 'ink';
+import { AppShell } from '../components/AppShell.js';
+import { MenuList } from '../components/MenuList.js';
+import { palette, glyphs } from '../theme.js';
+
+export function ListScreen({ title, items, onBack, emptyLabel = 'Nothing found.' }) {
+  const itemNodes = items?.length
+    ? items.map((item, index) =>
+        h(
+          Box,
+          { key: `${index}-${item}` },
+          h(Text, { color: palette.accent }, `${glyphs.dot} `),
+          h(Text, { color: palette.text }, item)
+        )
+      )
+    : [h(Box, { key: 'empty' }, h(Text, { color: palette.muted }, emptyLabel))];
+
+  return h(
+    AppShell,
+    { title },
+    h(Box, { flexDirection: 'column', marginBottom: 1 }, ...itemNodes),
+    h(MenuList, {
+      options: [{ label: 'Back', value: 'back' }],
+      onSelect: onBack,
+      onCancel: onBack
+    })
+  );
+}

package/src/tui/screens/LoadFailedScreen.js

@@ -0,0 +1,30 @@
+import { createElement as h } from 'react';
+import { AppShell } from '../components/AppShell.js';
+import { NoticeBox } from '../components/NoticeBox.js';
+import { MenuList } from '../components/MenuList.js';
+
+export function LoadFailedScreen({ onBack, onExit }) {
+  return h(
+    AppShell,
+    { title: 'Could not load workspace' },
+    h(NoticeBox, {
+      lines: [
+        'The wizard is signed in, but could not read the workspace state.',
+        'This may be an OAuth capability gap or a temporary API issue.',
+        '',
+        'Browser sign-in has limited API access. Try signing in with an API token.'
+      ]
+    }),
+    h(MenuList, {
+      options: [
+        { label: 'Back to menu', value: 'back' },
+        { label: 'Exit wizard', value: 'exit' }
+      ],
+      onSelect: (option) => {
+        if (option.value === 'back') onBack();
+        else onExit();
+      },
+      onCancel: onBack
+    })
+  );
+}

package/src/tui/screens/LoadingScreen.js

@@ -0,0 +1,32 @@
+import { createElement as h, useEffect, useState } from 'react';
+import { Box, Text } from 'ink';
+import { AppShell } from '../components/AppShell.js';
+import { palette, HINTS } from '../theme.js';
+
+// Braille spinner — smooth, single-cell, reads as motion in any terminal font.
+const SPINNER = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+
+export function LoadingScreen({ title = 'Loading your Rootly workspace', detail = 'Reading your current setup.' }) {
+  const [frame, setFrame] = useState(0);
+
+  useEffect(() => {
+    const timer = setInterval(() => setFrame((f) => (f + 1) % SPINNER.length), 80);
+    return () => clearInterval(timer);
+  }, []);
+
+  return h(
+    AppShell,
+    { hints: HINTS.none },
+    h(
+      Box,
+      { flexDirection: 'column' },
+      h(
+        Box,
+        null,
+        h(Text, { color: palette.brand, bold: true }, `${SPINNER[frame]} `),
+        h(Text, { bold: true, color: palette.text }, title)
+      ),
+      h(Box, { marginTop: 1 }, h(Text, { color: palette.muted }, detail))
+    )
+  );
+}

package/src/tui/screens/MainMenuScreen.js

@@ -0,0 +1,81 @@
+import { createElement as h } from 'react';
+import { Box, Text } from 'ink';
+import { AppShell } from '../components/AppShell.js';
+import { MenuList } from '../components/MenuList.js';
+import { palette, glyphs } from '../theme.js';
+
+function recommendedLabel(nextAction) {
+  switch (nextAction) {
+    case 'run-guided-setup':
+      return 'Core setup complete';
+    case 'create-team':
+      return 'Create a team';
+    case 'invite-team-members':
+      return 'Add team members';
+    case 'create-schedule':
+      return 'Create a schedule';
+    case 'create-escalation-policy':
+      return 'Create an escalation policy';
+    case 'hook-up-monitor':
+      return 'Connect an alert source';
+    default:
+      return 'Continue setup';
+  }
+}
+
+function CoverageRow({ label, filled, total }) {
+  const segments = 12;
+  const ratio = total > 0 ? filled / total : 0;
+  const on = Math.round(ratio * segments);
+  const fillColor = ratio >= 1 ? palette.success : ratio > 0 ? palette.warning : palette.border;
+  return h(
+    Box,
+    null,
+    h(Text, { color: palette.muted }, `${label.padEnd(12)} `),
+    h(Text, { color: fillColor }, glyphs.barOn.repeat(on)),
+    h(Text, { color: palette.border }, glyphs.barOff.repeat(segments - on)),
+    h(Text, { color: fillColor }, `  ${filled}/${total}`)
+  );
+}
+
+export function MainMenuScreen({ state, onBack, onExit }) {
+  const nextAction = state?.onboarding?.nextBestAction;
+  const recommended = recommendedLabel(nextAction);
+  const complete = nextAction === 'run-guided-setup';
+  const workspaceName = state?.teams?.workspace?.name || state?.teams?.workspace?.slug || 'Connected workspace';
+  const totalTeams = state?.teams?.total ?? 0;
+  const onCall = state?.teams?.teamsWithSchedules ?? 0;
+  const escalation = state?.teams?.teamsWithEscalationPolicies ?? 0;
+
+  return h(
+    AppShell,
+    { title: workspaceName, context: 'menu' },
+    h(
+      Box,
+      { flexDirection: 'column', marginBottom: 1 },
+      h(Box, null, h(Text, { color: palette.muted }, `${totalTeams} ${totalTeams === 1 ? 'team' : 'teams'}`)),
+      h(CoverageRow, { label: 'On-call', filled: onCall, total: totalTeams }),
+      h(CoverageRow, { label: 'Escalation', filled: escalation, total: totalTeams })
+    ),
+    h(
+      Box,
+      { marginBottom: 1 },
+      h(Text, { color: complete ? palette.success : palette.brand }, complete ? '✓ ' : `${glyphs.star} `),
+      h(Text, { color: palette.muted }, 'Recommended  '),
+      h(Text, { color: complete ? palette.success : palette.text, bold: true }, recommended)
+    ),
+    h(MenuList, {
+      title: 'What would you like to do?',
+      options: [
+        { label: 'Quick start', value: 'quickstart', group: 'setup' },
+        { label: 'General setup', value: 'general', group: 'setup' },
+        { label: 'Exit', value: 'exit', group: 'session' }
+      ],
+      onSelect: (option) => {
+        if (option.value === 'exit') onExit(option);
+        else onBack(option);
+      },
+      onCancel: onBack
+    })
+  );
+}

package/src/tui/screens/MultiSelectScreen.js

@@ -0,0 +1,17 @@
+import { createElement as h } from 'react';
+import { AppShell } from '../components/AppShell.js';
+import { MultiSelectList } from '../components/MultiSelectList.js';
+import { HINTS } from '../theme.js';
+
+export function MultiSelectScreen({ title, options, onSubmit, onBack, initialSelectedValues = [] }) {
+  return h(
+    AppShell,
+    { title, hints: HINTS.multi },
+    h(MultiSelectList, {
+      options,
+      onSubmit,
+      onCancel: onBack,
+      initialSelectedValues
+    })
+  );
+}

package/src/tui/screens/OneShotRunnerScreen.js

@@ -0,0 +1,186 @@
+import { createElement as h, useEffect, useState } from 'react';
+import { Box, Text } from 'ink';
+import { AppShell } from '../components/AppShell.js';
+import { MenuList } from '../components/MenuList.js';
+import { palette, HINTS } from '../theme.js';
+import { friendlyError } from '../../format.js';
+
+const SPINNER = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+
+// Label while a step is in flight vs. once it has settled.
+const RUNNING_LABEL = {
+  team: 'Setting up team',
+  members: 'Adding team members',
+  schedule: 'Creating on-call schedule',
+  'escalation-policy': 'Creating escalation policy',
+  'alert-source': 'Adding alert source',
+  'test-alert': 'Firing test alert',
+  'test-incident': 'Opening test incident'
+};
+const DONE_LABEL = {
+  team: 'Team',
+  members: 'Team members',
+  schedule: 'On-call schedule',
+  'escalation-policy': 'Escalation policy',
+  'alert-source': 'Alert source',
+  'test-alert': 'Test alert',
+  'test-incident': 'Test incident'
+};
+
+const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+
+function applyEvent(prev, evt) {
+  if (evt.status === 'running') {
+    if (prev.some((s) => s.step === evt.step)) {
+      return prev.map((s) => (s.step === evt.step ? { ...s, status: 'running' } : s));
+    }
+    return [...prev, { step: evt.step, status: 'running' }];
+  }
+  return prev.map((s) => (s.step === evt.step ? { ...s, status: evt.status, error: evt.error } : s));
+}
+
+// U+FE0E forces text (monochrome, single-width) presentation so the marks don't
+// render as wide emoji that swallow the following space.
+const TEXT_PRESENTATION = '︎';
+
+function ProgressRow({ entry, frame }) {
+  const { step, status } = entry;
+  const mark = status === 'running'
+    ? SPINNER[frame % SPINNER.length]
+    : status === 'ok' || status === 'reused' ? `✓${TEXT_PRESENTATION}`
+      : status === 'blocked' ? `⚠${TEXT_PRESENTATION}` : `✗${TEXT_PRESENTATION}`;
+  const color = status === 'running' ? palette.brand
+    : status === 'ok' || status === 'reused' ? palette.success
+      : status === 'blocked' ? palette.warning : palette.danger;
+  const label = status === 'running' ? (RUNNING_LABEL[step] || step) : (DONE_LABEL[step] || step);
+  const suffix = status === 'reused' ? ' (existing)'
+    : status === 'blocked' ? ' — not permitted by this sign-in'
+      : status === 'failed' ? ` — ${friendlyError(entry.error)}` : '';
+  return h(
+    Box,
+    null,
+    // Margin (a layout gap) rather than a string space, so the gap survives
+    // regardless of how wide the terminal renders the mark glyph.
+    h(Box, { marginRight: 1 }, h(Text, { color }, mark)),
+    h(Text, { color: palette.text }, label),
+    suffix ? h(Text, { color: palette.muted }, suffix) : null
+  );
+}
+
+function SummaryRow({ label, value }) {
+  return h(
+    Box,
+    null,
+    h(Text, { color: palette.muted }, `${label}`.padEnd(14)),
+    h(Text, { color: palette.text }, value)
+  );
+}
+
+export function OneShotRunnerScreen({ memberIds = [], usersById = {}, runner, onContinue, onMenu, onRetry, onExit }) {
+  const [steps, setSteps] = useState([]);
+  const [frame, setFrame] = useState(0);
+  const [result, setResult] = useState(null);
+  const done = Boolean(result);
+
+  useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      const res = await runner({ memberIds }, async (evt) => {
+        if (cancelled) return;
+        setSteps((prev) => applyEvent(prev, evt));
+        // Pace the reveal so each step is visible as it lands.
+        await delay(evt.status === 'running' ? 240 : 460);
+      });
+      if (!cancelled) setResult(res);
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  useEffect(() => {
+    if (done) return undefined;
+    const timer = setInterval(() => setFrame((f) => f + 1), 80);
+    return () => clearInterval(timer);
+  }, [done]);
+
+  // While building: title + the live step list.
+  if (!done) {
+    return h(
+      AppShell,
+      { title: 'Setting up Rootly', context: 'working', hints: HINTS.none },
+      h(
+        Box,
+        { flexDirection: 'column' },
+        steps.length
+          ? steps.map((entry) => h(ProgressRow, { key: entry.step, entry, frame }))
+          : h(Text, { color: palette.muted }, `${SPINNER[frame % SPINNER.length]} Starting…`)
+      )
+    );
+  }
+
+  // Done: detailed summary of what was created + next actions.
+  const data = result.data || {};
+  const nameFor = (id) => usersById[id]?.name || usersById[id]?.email || `User ${id}`;
+  const onCall = (data.rotation || []).map(nameFor).join(', ');
+
+  const rows = [
+    data.team && {
+      label: 'Team',
+      value: `${data.team.name || `team ${data.team.id}`}${data.team.reused ? ' (existing)' : ''}`
+    },
+    onCall && { label: 'On call', value: onCall },
+    data.schedule && {
+      label: 'Schedule',
+      value: `${data.schedule.name} · ${data.schedule.handoffTime} daily handoff`
+    },
+    data.escalationPolicy && { label: 'Escalation', value: data.escalationPolicy.name },
+    data.alertSource && { label: 'Alert source', value: data.alertSource.name },
+    data.alert && { label: 'Test alert', value: data.alert.summary },
+    data.incident && { label: 'Test incident', value: data.incident.title }
+  ].filter(Boolean);
+
+  const options = result.ok
+    ? [
+        { label: 'Continue', value: 'continue' },
+        { label: 'Back to menu', value: 'menu' }
+      ]
+    : [
+        { label: 'Try again', value: 'retry' },
+        { label: 'Back to menu', value: 'menu' }
+      ];
+
+  return h(
+    AppShell,
+    { title: result.ok ? 'Setup complete' : 'Setup needs attention', context: result.ok ? 'all set' : 'attention', hints: HINTS.nav },
+    h(
+      Box,
+      { flexDirection: 'column' },
+      h(Box, { marginBottom: 1 }, h(Text, { color: result.ok ? palette.success : palette.warning, bold: true }, result.summary)),
+      // Keep the finished checklist on screen so you can review what was created
+      // before continuing.
+      h(Box, { flexDirection: 'column', marginBottom: 1 }, ...steps.map((entry) => h(ProgressRow, { key: entry.step, entry, frame }))),
+      h(Box, { flexDirection: 'column' }, ...rows.map((row) => h(SummaryRow, { key: row.label, label: row.label, value: row.value }))),
+      data.incident?.slackChannelUrl
+        ? h(Box, { marginTop: 1 }, h(Text, { color: palette.accent }, `Incident channel: ${data.incident.slackChannelUrl}`))
+        : null,
+      rows.length
+        ? h(Box, { marginTop: 1 }, h(Text, { color: palette.muted }, 'Verify any of this in the Rootly web app.'))
+        : null,
+      data.note ? h(Box, { marginTop: 1 }, h(Text, { color: palette.muted }, data.note)) : null,
+      h(
+        Box,
+        { marginTop: 1 },
+        h(MenuList, {
+          options,
+          onSelect: (option) => {
+            if (option.value === 'continue') onContinue?.();
+            else if (option.value === 'retry') onRetry?.();
+            else onMenu?.();
+          },
+          onCancel: onMenu
+        })
+      )
+    )
+  );
+}

package/src/tui/screens/OptionScreen.js

@@ -0,0 +1,24 @@
+import { createElement as h } from 'react';
+import { Box } from 'ink';
+import { AppShell } from '../components/AppShell.js';
+import { NoticeBox } from '../components/NoticeBox.js';
+import { MenuList } from '../components/MenuList.js';
+
+export function OptionScreen({ title, lines, options, onSelect, onBack, context, hints, header }) {
+  return h(
+    AppShell,
+    { title, context, hints },
+    header || null,
+    lines?.length ? h(NoticeBox, { lines }) : null,
+    // Breathing room between the copy and the options.
+    h(
+      Box,
+      { marginTop: 1 },
+      h(MenuList, {
+        options,
+        onSelect,
+        onCancel: onBack
+      })
+    )
+  );
+}

package/src/tui/screens/ResultScreen.js

@@ -0,0 +1,35 @@
+import { createElement as h } from 'react';
+import { Box } from 'ink';
+import { AppShell } from '../components/AppShell.js';
+import { NoticeBox } from '../components/NoticeBox.js';
+import { MenuList } from '../components/MenuList.js';
+
+export function ResultScreen({ title, lines, onContinue, continueLabel = 'Continue', actions = [] }) {
+  // Optional `actions` render as extra menu options above Continue; their
+  // onSelect runs in place (no navigation) so the user can re-trigger them.
+  // No Exit option here — Exit lives only on the main menu.
+  return h(
+    AppShell,
+    { title },
+    h(NoticeBox, { lines }),
+    h(
+      Box,
+      { marginTop: 1 },
+      h(MenuList, {
+        options: [
+          ...actions.map((action, index) => ({ label: action.label, value: `action-${index}` })),
+          { label: continueLabel, value: 'continue' }
+        ],
+        onSelect: (option) => {
+          if (option.value === 'continue') {
+            onContinue?.();
+            return;
+          }
+          const index = Number(option.value.slice('action-'.length));
+          actions[index]?.onSelect?.();
+        },
+        onCancel: onContinue
+      })
+    )
+  );
+}

package/src/tui/screens/StatusScreen.js

@@ -0,0 +1,70 @@
+import { createElement as h } from 'react';
+import { AppShell } from '../components/AppShell.js';
+import { KeyValueList } from '../components/KeyValueList.js';
+import { NoticeBox } from '../components/NoticeBox.js';
+import { MenuList } from '../components/MenuList.js';
+import { palette, glyphs, HINTS } from '../theme.js';
+
+function alertingLabel(value) {
+  switch (value) {
+    case 'done':
+      return 'ready';
+    case 'in-progress':
+      return 'in progress';
+    default:
+      return 'needed';
+  }
+}
+
+function humanizeAction(action) {
+  switch (action) {
+    case 'run-guided-setup':
+      return 'Core setup complete';
+    case 'create-team':
+      return 'Create a team';
+    case 'invite-team-members':
+      return 'Add team members';
+    case 'create-schedule':
+      return 'Create a schedule';
+    case 'create-escalation-policy':
+      return 'Create an escalation policy';
+    case 'hook-up-monitor':
+      return 'Connect an alert source';
+    default:
+      return 'Continue setup';
+  }
+}
+
+export function StatusScreen({ state, onBack }) {
+  const teams = state?.teams;
+  const readiness = state?.onboarding?.readiness;
+  const alerting = alertingLabel(readiness?.alertingSetup);
+
+  return h(
+    AppShell,
+    { title: 'Workspace status', context: 'status', hints: HINTS.back },
+    h(KeyValueList, {
+      rows: [
+        { label: 'Workspace', value: teams?.workspace?.name || teams?.workspace?.slug || 'Connected Rootly account' },
+        { label: 'Teams', value: String(teams?.total ?? 0) },
+        { label: 'With members', value: `${teams?.teamsWithMembers ?? 0}/${teams?.total ?? 0}` },
+        { label: 'With on-call', value: `${teams?.teamsWithSchedules ?? 0}/${teams?.total ?? 0}` },
+        { label: 'With escalation', value: `${teams?.teamsWithEscalationPolicies ?? 0}/${teams?.total ?? 0}` },
+        {
+          label: 'Alerting',
+          value: alerting,
+          color: alerting === 'ready' ? palette.success : alerting === 'in progress' ? palette.warning : palette.danger
+        }
+      ]
+    }),
+    h(NoticeBox, {
+      title: `${glyphs.star} Next best action`,
+      lines: [humanizeAction(state?.onboarding?.nextBestAction)]
+    }),
+    h(MenuList, {
+      options: [{ label: 'Back to menu', value: 'back' }],
+      onSelect: onBack,
+      onCancel: onBack
+    })
+  );
+}

package/src/tui/screens/TextEntryScreen.js

@@ -0,0 +1,115 @@
+import { createElement as h, useState, useEffect } from 'react';
+import { Box, Text, useInput, useWindowSize } from 'ink';
+import { AppShell } from '../components/AppShell.js';
+import { palette, glyphs, HINTS } from '../theme.js';
+
+export function TextEntryScreen({
+  title,
+  prompt,
+  lines = [],
+  link = null,
+  initialValue = '',
+  placeholder = '',
+  onSubmit,
+  onBack,
+  hidden = false,
+  allowEmpty = false
+}) {
+  const [value, setValue] = useState(initialValue);
+  const [error, setError] = useState('');
+  // Blinking caret so a prefilled value reads as an editable field, not text.
+  const [caretOn, setCaretOn] = useState(true);
+  useEffect(() => {
+    const id = setInterval(() => setCaretOn((on) => !on), 530);
+    return () => clearInterval(id);
+  }, []);
+  const { columns } = useWindowSize();
+  // Fixed-width field so the box doesn't grow or jitter as you type, and long
+  // values (API tokens) scroll on one line instead of wrapping inside the box.
+  const fieldWidth = Math.max(32, Math.min(64, (columns || 80) - 14));
+
+  useInput((input, key) => {
+    if (key.ctrl && input === 'c') {
+      onBack?.();
+      return;
+    }
+    if (key.escape) {
+      onBack?.();
+      return;
+    }
+    if (key.return) {
+      const trimmed = value.trim();
+      if (!trimmed && !allowEmpty) {
+        setError('Please enter a value before continuing.');
+        return;
+      }
+      onSubmit?.(trimmed);
+      return;
+    }
+    if (key.backspace || key.delete) {
+      if (error) setError('');
+      setValue((current) => current.slice(0, -1));
+      return;
+    }
+    if (!key.ctrl && !key.meta && input) {
+      if (error) setError('');
+      setValue((current) => current + input);
+    }
+  });
+
+  const display = hidden ? '•'.repeat(value.length) : value;
+  const isEmpty = display.length === 0;
+
+  // Help block convention: the first `line` renders as a muted heading; the
+  // rest render as accent-bulleted steps in readable text. Keep each line short
+  // so it doesn't wrap inside the card.
+  const [helpHeading, ...helpSteps] = lines;
+
+  return h(
+    AppShell,
+    { title, hints: HINTS.entry },
+    h(
+      Box,
+      { flexDirection: 'column' },
+      // The ask — readable, right above the field.
+      prompt ? h(Box, { marginBottom: 1 }, h(Text, { color: palette.text }, prompt)) : null,
+      // The input field.
+      h(
+        Box,
+        { borderStyle: 'round', borderColor: palette.brand, paddingX: 1, width: fieldWidth + 4 },
+        h(Text, { color: palette.brand }, `${glyphs.cursor} `),
+        h(
+          Box,
+          { width: fieldWidth },
+          // Typed value (truncate-start so long values show their tail), then a
+          // blinking block caret at the insertion point, then ghosted
+          // placeholder text when the field is still empty.
+          isEmpty ? null : h(Text, { color: palette.text, wrap: 'truncate-start' }, display),
+          h(Text, { color: palette.brand, bold: true }, caretOn ? '█' : ' '),
+          isEmpty ? h(Text, { color: palette.muted }, placeholder || '') : null
+        )
+      ),
+      // Validation error, right under the field.
+      error ? h(Box, { marginTop: 1 }, h(Text, { color: palette.danger }, `✗ ${error}`)) : null,
+      // Supporting help, below the field.
+      lines.length
+        ? h(
+            Box,
+            { flexDirection: 'column', marginTop: 1 },
+            helpHeading
+              ? h(Box, { key: 'help-h', marginBottom: 1 }, h(Text, { color: palette.text }, helpHeading))
+              : null,
+            ...helpSteps.map((line, index) =>
+              h(
+                Box,
+                { key: `help-${index}` },
+                h(Text, { color: palette.accent }, `  ${glyphs.dot} `),
+                h(Text, { color: palette.text }, line)
+              )
+            )
+          )
+        : null,
+      link ? h(Box, { marginTop: 1 }, h(Text, { color: palette.accent }, link)) : null
+    )
+  );
+}