@rootly/wizard 0.1.0

package/src/tui/screens/WelcomeScreen.js

@@ -0,0 +1,66 @@
+import { createElement as h, useEffect, useState } from 'react';
+import { Box } from 'ink';
+import { AppShell } from '../components/AppShell.js';
+import { Banner } from '../components/Banner.js';
+import { SlideReveal } from '../components/SlideReveal.js';
+import { MenuList } from '../components/MenuList.js';
+import { palette } from '../theme.js';
+
+// Ramp tops out at the muted resting color so inactive rows (e.g. Exit) don't
+// overshoot to near-white and flash; only the selected row brightens on arrival.
+const MENU_RAMP = ['#3C3C46', '#56565F', '#71717C', '#8B8B97'];
+
+export function WelcomeScreen({ lines, onContinue, onExit }) {
+  // Stage the entrance: banner flashes in, the copy slides in, then the menu
+  // fades in once the copy has landed.
+  const [phase, setPhase] = useState(0);
+  const [menuStep, setMenuStep] = useState(0);
+
+  useEffect(() => {
+    const startReveal = setTimeout(() => setPhase(1), 650);
+    return () => clearTimeout(startReveal);
+  }, []);
+
+  useEffect(() => {
+    if (phase < 2 || menuStep >= MENU_RAMP.length) return undefined;
+    const tick = setTimeout(() => setMenuStep((current) => current + 1), 70);
+    return () => clearTimeout(tick);
+  }, [phase, menuStep]);
+
+  const menuTint = phase >= 2 && menuStep < MENU_RAMP.length ? MENU_RAMP[menuStep] : undefined;
+
+  const menuOptions = [
+    { label: 'Continue', value: 'continue' },
+    { label: 'Exit', value: 'exit' }
+  ];
+
+  // Reserve the copy and menu rows up front so the bordered card opens at its
+  // final size — sections fade in within this fixed footprint instead of
+  // stretching the box as each stage arrives.
+  return h(
+    AppShell,
+    { context: 'welcome', keyColor: palette.accent },
+    h(Banner, null),
+    h(
+      Box,
+      // Gap between the hero and the intro copy so the splash doesn't feel stacked.
+      { flexDirection: 'column', marginTop: 1, minHeight: lines.length },
+      phase >= 1 ? h(SlideReveal, { lines, onDone: () => setPhase(2) }) : null
+    ),
+    h(
+      Box,
+      { marginTop: 2, minHeight: menuOptions.length },
+      phase >= 2
+        ? h(MenuList, {
+            tint: menuTint,
+            options: menuOptions,
+            onSelect: (option) => {
+              if (option.value === 'continue') onContinue?.();
+              else onExit?.();
+            },
+            onCancel: onExit
+          })
+        : null
+    )
+  );
+}

package/src/tui/theme.js

@@ -0,0 +1,69 @@
+// Shared design tokens for the Ink wizard UI.
+// Aligned to the Rootly brand guidelines: purple is primary (P700 is the
+// official *brand color), orange is the secondary accent, restrained neutrals,
+// and a small glyph set used consistently across screens.
+//
+// Brand ramp for reference — P900 #3B2D7A · P800 #5942B5 · P700 #7C5CE6 (*brand)
+// · P500 #9D86F0 · P300 #C9BEF7 · P200 #E0DAFB · P100 #F2EFFC.
+// Secondary orange — S900 #E8822E · S700 #F5A24F · S500 #F9C58A.
+
+export const palette = {
+  brand: '#7C5CE6',   // Rootly purple (P700, *brand color) — primary accent / selection
+  accent: '#F5A24F',  // brand orange (S700) — numbers, bullets, secondary accent
+  text: '#ECECEE',    // primary text (N100)
+  muted: '#8B8B97',   // secondary / hint text (N500)
+  success: '#5BD18B',
+  warning: '#E8822E', // brand orange (S900)
+  danger: '#F4787B',
+  border: '#3C3C46',  // panel borders, inactive glyphs (N900→N700)
+};
+
+// Subtle resting shimmer — a faint highlight drifting over the purple brand
+// base (no white, no dark dips), so the settled wordmark only gently glints.
+export const shimmerRamp = [
+  '#7C5CE6',
+  '#7C5CE6',
+  '#7C5CE6',
+  '#8D70EB',
+  '#A289F1',
+  '#8D70EB',
+  '#7C5CE6',
+  '#7C5CE6',
+  '#7C5CE6',
+  '#7C5CE6',
+];
+
+export const glyphs = {
+  logo: '✦',
+  cursor: '❯',
+  dot: '•',
+  star: '★',
+  check: '◉',
+  uncheck: '◯',
+  barOn: '▰',
+  barOff: '▱',
+  more: '·',
+};
+
+// Footer key-hint presets. Each item renders as a brand-colored key + muted label.
+export const HINTS = {
+  nav: [
+    { key: '↑↓', label: 'navigate' },
+    { key: '1–9', label: 'jump' },
+    { key: 'esc', label: 'back' },
+  ],
+  multi: [
+    { key: '↵/space', label: 'check' },
+    { key: 'a', label: 'all' },
+    { key: 'esc', label: 'back' },
+  ],
+  entry: [
+    { key: 'type', label: 'to edit' },
+    { key: '↵', label: 'continue' },
+    { key: 'esc', label: 'back' },
+  ],
+  back: [
+    { key: 'esc', label: 'back' },
+  ],
+  none: [],
+};

package/src/tui-legacy-bridge.js

@@ -0,0 +1,371 @@
+import { loadOnboardingState } from './runtime.js';
+import { getTeamsAction, getSchedulesAction, getEscalationPoliciesAction } from './actions/inspect.js';
+import { getTeamMembersAction, getAddableTeamMembersAction, getDirectoryUsersAction, getStatusPageComponentsAction, createCustomComponentAction } from './actions/inspect.js';
+import { getAuthSummary, getStoredToken, startOAuthLogin, storeToken, validateToken } from './auth.js';
+import {
+  createTeamAction,
+  addTeamMembersAction,
+  addTeamMembersByIdsAction,
+  createScheduleAction,
+  createEscalationPolicyAction,
+  createAlertSourceAction,
+  createStatusPageAction,
+  getStatusPagesAction,
+  publishStatusPageAction,
+  updateStatusPageAction
+} from './actions/setup.js';
+import { createTestAlertAction, createTestIncidentAction } from './actions/testing.js';
+import { runOneShotSetupAction } from './actions/oneshot.js';
+import {
+  startPhoneVerificationAction,
+  confirmPhoneVerificationAction,
+  resendPhoneVerificationAction,
+  getCurrentUserPhoneAction
+} from './actions/phone.js';
+import { deleteToken } from './auth.js';
+import { startWebHandoffAction, openUrl } from './actions/integrations.js';
+import { previewMcpSetupAction, applyMcpSetupAction } from './actions/mcp.js';
+
+function isWorkspaceAccessFailure(error) {
+  const message = error?.message || String(error);
+  return (
+    (
+      message.includes('/v1/teams') ||
+      message.includes('/v1/schedules') ||
+      message.includes('/v1/escalation_policies')
+    ) &&
+    (/\b401\b/.test(message) || /\b403\b/.test(message) || /Not found or unauthorized/i.test(message))
+  );
+}
+
+export async function loadOnboardingStateInteractive() {
+  try {
+    return { ok: true, state: await loadOnboardingState() };
+  } catch (error) {
+    if (isWorkspaceAccessFailure(error)) {
+      const authSummary = await getAuthSummary();
+      return {
+        ok: false,
+        reason: 'auth-capability',
+        isBrowserSession: authSummary?.mode === 'oauth',
+        label: authSummary?.label || 'A stored Rootly sign-in was found.'
+      };
+    }
+    return { ok: false, reason: 'error', message: error?.message || String(error) };
+  }
+}
+
+export async function loadAuthContextForTui() {
+  const envToken = process.env.ROOTLY_TOKEN?.trim() || null;
+  const storedToken = await getStoredToken();
+  const authSummary = await getAuthSummary();
+
+  return {
+    hasAuth: Boolean(envToken || storedToken),
+    source: envToken ? 'env-token' : storedToken ? 'stored-token' : 'none',
+    label: authSummary?.label || (envToken ? 'Using ROOTLY_TOKEN from environment' : storedToken ? 'Stored Rootly sign-in found' : 'No Rootly sign-in found')
+  };
+}
+
+export async function authenticateWithApiTokenForTui(token) {
+  const clean = String(token || '').trim();
+  if (!clean) {
+    return { ok: false, summary: 'API token is required.' };
+  }
+
+  const userPayload = await validateToken(clean);
+  if (!userPayload) {
+    return { ok: false, summary: 'Token did not validate against Rootly.' };
+  }
+
+  const stored = await storeToken(clean);
+  return {
+    ok: true,
+    summary: 'API token validated.',
+    data: {
+      stored,
+      userPayload
+    }
+  };
+}
+
+export async function authenticateWithBrowserForTui() {
+  try {
+    const result = await startOAuthLogin();
+    return {
+      ok: true,
+      summary: 'Browser sign-in completed successfully.',
+      data: result
+    };
+  } catch (error) {
+    return {
+      ok: false,
+      summary: error?.message || 'Browser sign-in failed.'
+    };
+  }
+}
+
+export async function createTeamForTui(input) {
+  try {
+    return await createTeamAction(input);
+  } catch (error) {
+    return {
+      ok: false,
+      summary: error?.message || 'The wizard could not create the team.'
+    };
+  }
+}
+
+export async function addTeamMembersForTui(input) {
+  try {
+    return await addTeamMembersAction(input);
+  } catch (error) {
+    return {
+      ok: false,
+      summary: error?.message || 'The wizard could not update team membership.'
+    };
+  }
+}
+
+export async function addTeamMembersByIdsForTui(input) {
+  try {
+    return await addTeamMembersByIdsAction(input);
+  } catch (error) {
+    return {
+      ok: false,
+      summary: error?.message || 'The wizard could not add team members.'
+    };
+  }
+}
+
+export async function loadAddableUsersForTui(teamId) {
+  const result = await getAddableTeamMembersAction({ teamId });
+  return result.ok ? result.data : null;
+}
+
+export async function loadDirectoryUsersForTui() {
+  const result = await getDirectoryUsersAction();
+  return result.ok ? result.data : null;
+}
+
+export async function createScheduleForTui(input) {
+  try {
+    return await createScheduleAction(input);
+  } catch (error) {
+    return {
+      ok: false,
+      summary: error?.message || 'The wizard could not create the schedule.'
+    };
+  }
+}
+
+export async function createEscalationPolicyForTui(input) {
+  try {
+    // Standalone flow: reuse an existing policy of the same name instead of
+    // creating a duplicate on re-run. (The one-shot calls the action directly.)
+    return await createEscalationPolicyAction({ reuseByName: true, ...input });
+  } catch (error) {
+    return {
+      ok: false,
+      summary: error?.message || 'The wizard could not create the escalation policy.'
+    };
+  }
+}
+
+export async function createAlertSourceForTui(input) {
+  try {
+    // Standalone flow: reuse an existing source of the same name instead of
+    // creating a duplicate on re-run. (The one-shot calls the action directly.)
+    return await createAlertSourceAction({ reuseByName: true, ...input });
+  } catch (error) {
+    return {
+      ok: false,
+      summary: error?.message || 'The wizard could not create the alert source.'
+    };
+  }
+}
+
+export async function loadStatusPageComponentsForTui() {
+  try {
+    const result = await getStatusPageComponentsAction();
+    return result.ok ? result.data : { components: [] };
+  } catch {
+    return { components: [] };
+  }
+}
+
+export async function createCustomComponentForTui(input) {
+  try {
+    return await createCustomComponentAction(input);
+  } catch (error) {
+    return { ok: false, summary: error?.message || 'The wizard could not create the component.' };
+  }
+}
+
+export async function loadStatusPagesForTui() {
+  try {
+    const result = await getStatusPagesAction();
+    return result.ok ? result.data : { pages: [] };
+  } catch {
+    return { pages: [] };
+  }
+}
+
+export async function publishStatusPageForTui(input) {
+  try {
+    return await publishStatusPageAction(input);
+  } catch (error) {
+    return { ok: false, summary: error?.message || 'The wizard could not publish the status page.' };
+  }
+}
+
+export async function updateStatusPageForTui(input) {
+  try {
+    return await updateStatusPageAction(input);
+  } catch (error) {
+    return { ok: false, summary: error?.message || 'The wizard could not update the status page.' };
+  }
+}
+
+export async function createStatusPageForTui(input) {
+  try {
+    return await createStatusPageAction(input);
+  } catch (error) {
+    return {
+      ok: false,
+      summary: error?.message || 'The wizard could not create the status page.'
+    };
+  }
+}
+
+export async function createTestAlertForTui(input) {
+  try {
+    return await createTestAlertAction(input);
+  } catch (error) {
+    return {
+      ok: false,
+      summary: error?.message || 'The wizard could not create the test alert.'
+    };
+  }
+}
+
+export async function createTestIncidentForTui(input) {
+  try {
+    return await createTestIncidentAction(input);
+  } catch (error) {
+    return {
+      ok: false,
+      summary: error?.message || 'The wizard could not create the test incident.'
+    };
+  }
+}
+
+export async function deleteTokenForTui() {
+  return await deleteToken();
+}
+
+export async function runOneShotSetupForTui(input, onStep) {
+  try {
+    return await runOneShotSetupAction(input, onStep);
+  } catch (error) {
+    return {
+      ok: false,
+      summary: error?.message || 'The wizard could not complete one-shot setup.'
+    };
+  }
+}
+
+export async function openExternalUrlForTui(url) {
+  try {
+    const opened = await openUrl(url);
+    return { ok: true, opened: Boolean(opened) };
+  } catch {
+    return { ok: false, opened: false };
+  }
+}
+
+export async function loadCurrentUserPhoneForTui() {
+  try {
+    const result = await getCurrentUserPhoneAction();
+    return result.ok ? result.data : null;
+  } catch {
+    return null;
+  }
+}
+
+export async function startPhoneVerificationForTui(input) {
+  try {
+    return await startPhoneVerificationAction(input);
+  } catch (error) {
+    return { ok: false, summary: error?.message || 'Could not start phone verification.' };
+  }
+}
+
+export async function confirmPhoneVerificationForTui(input) {
+  try {
+    return await confirmPhoneVerificationAction(input);
+  } catch (error) {
+    return { ok: false, summary: error?.message || 'Could not verify the phone number.' };
+  }
+}
+
+export async function resendPhoneVerificationForTui(input) {
+  try {
+    return await resendPhoneVerificationAction(input);
+  } catch (error) {
+    return { ok: false, summary: error?.message || 'Could not resend the verification code.' };
+  }
+}
+
+export async function startWebHandoffForTui(input) {
+  try {
+    return await startWebHandoffAction(input);
+  } catch (error) {
+    return {
+      ok: false,
+      summary: error?.message || 'Could not prepare the Rootly web handoff.'
+    };
+  }
+}
+
+export async function previewMcpForTui(input) {
+  try {
+    return await previewMcpSetupAction(input);
+  } catch (error) {
+    return {
+      ok: false,
+      summary: error?.message || 'Could not preview MCP setup.'
+    };
+  }
+}
+
+export async function applyMcpForTui(input) {
+  try {
+    return await applyMcpSetupAction(input);
+  } catch (error) {
+    return {
+      ok: false,
+      summary: error?.message || 'Could not apply MCP setup.'
+    };
+  }
+}
+
+export async function loadTeamsForTui() {
+  const result = await getTeamsAction();
+  return result.ok ? result.data : null;
+}
+
+export async function loadSchedulesForTui() {
+  const result = await getSchedulesAction();
+  return result.ok ? result.data : null;
+}
+
+export async function loadEscalationPoliciesForTui() {
+  const result = await getEscalationPoliciesAction();
+  return result.ok ? result.data : null;
+}
+
+export async function loadTeamMembersForTui(teamId) {
+  const result = await getTeamMembersAction({ teamId });
+  return result.ok ? result.data : null;
+}