@shipfox/client-workflows 0.2.0

package/src/components/workflow-run-view/agent-config-failure-callout.stories.tsx

@@ -0,0 +1,140 @@
+import {Code} from '@shipfox/react-ui/typography';
+import type {Meta, StoryObj} from '@storybook/react';
+import {
+  createMemoryHistory,
+  createRootRoute,
+  createRoute,
+  createRouter,
+  Outlet,
+  RouterProvider,
+} from '@tanstack/react-router';
+import {within} from 'storybook/test';
+import type {AgentStepConfig, StepError} from '#core/workflow-run.js';
+import {AgentConfigFailureCallout} from './agent-config-failure-callout.js';
+
+const WORKSPACE_ID = '44444444-4444-4444-8444-444444444444';
+const AGENTS_LINK_NAME = 'Configure Agents';
+
+const config: AgentStepConfig = {
+  provider: 'anthropic',
+  model: 'claude-opus-4-8',
+  thinking: 'high',
+};
+
+const meta = {
+  title: 'Workflows/RunView/AgentConfigFailureCallout',
+  component: AgentConfigFailureCallout,
+  parameters: {
+    layout: 'centered',
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-560 bg-background-neutral-base p-16">
+        <Story />
+      </div>
+    ),
+    (Story) => {
+      const rootRoute = createRootRoute({component: Outlet});
+      const storyRoute = createRoute({
+        getParentRoute: () => rootRoute,
+        path: '/',
+        component: () => <Story />,
+      });
+      const agentSettingsRoute = createRoute({
+        getParentRoute: () => rootRoute,
+        path: '/workspaces/$wid/settings/agents',
+        component: () => null,
+      });
+      const router = createRouter({
+        history: createMemoryHistory({initialEntries: ['/']}),
+        routeTree: rootRoute.addChildren([storyRoute, agentSettingsRoute]),
+      });
+
+      return <RouterProvider router={router} />;
+    },
+  ],
+  args: {
+    workspaceId: WORKSPACE_ID,
+    config,
+    error: makeError('provider_not_configured'),
+  },
+} satisfies Meta<typeof AgentConfigFailureCallout>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+type AgentConfigIssueValue = NonNullable<StepError['agentConfigIssue']>;
+
+const errorCases: Array<{
+  label: string;
+  error: WorkflowStepError;
+}> = [
+  {label: 'Provider not configured', error: makeError('provider_not_configured')},
+  {label: 'Credentials invalid', error: makeError('credentials_invalid')},
+  {label: 'Provider unsupported', error: makeError('provider_unsupported')},
+  {label: 'Model unavailable', error: makeError('model_unavailable')},
+  {label: 'Step config invalid', error: makeError('step_config_invalid')},
+  {
+    label: 'Unknown config failure',
+    error: {
+      message: 'Agent configuration is invalid',
+      exitCode: null,
+      signal: undefined,
+      reason: 'agent_config_invalid',
+      agentConfigIssue: undefined,
+      category: 'user',
+    },
+  },
+];
+
+export const Playground: Story = {};
+
+export const ErrorVariants: Story = {
+  render: (args) => (
+    <div className="flex flex-col gap-20">
+      {errorCases.map((item) => (
+        <div key={item.label} className="flex flex-col gap-8">
+          <Code variant="label" className="text-foreground-neutral-subtle">
+            {item.label}
+          </Code>
+          <AgentConfigFailureCallout {...args} error={item.error} />
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+export const TestProviderNotConfigured: Story = {
+  play: assertCallout('Configure credentials for anthropic', true),
+};
+
+export const TestProviderUnsupported: Story = {
+  args: {
+    error: makeError('provider_unsupported'),
+  },
+  play: assertCallout('Choose a supported model provider', false),
+};
+
+function makeError(agentConfigIssue: AgentConfigIssueValue): StepError {
+  return {
+    message: 'Agent configuration is invalid',
+    exitCode: null,
+    signal: undefined,
+    reason: 'agent_config_invalid',
+    agentConfigIssue,
+    category: 'user',
+  };
+}
+
+function assertCallout(title: string, showsCta: boolean): Story['play'] {
+  return async ({canvasElement}) => {
+    const canvas = within(canvasElement);
+
+    await canvas.findByText(title);
+    const cta = canvas.queryByRole('link', {name: AGENTS_LINK_NAME});
+    if (showsCta) {
+      await canvas.findByRole('link', {name: AGENTS_LINK_NAME});
+    } else if (cta !== null) {
+      throw new Error(`Unexpected ${AGENTS_LINK_NAME} CTA`);
+    }
+  };
+}

package/src/components/workflow-run-view/agent-config-failure-callout.tsx

@@ -0,0 +1,93 @@
+import {
+  Alert,
+  AlertActions,
+  AlertContent,
+  AlertDescription,
+  AlertTitle,
+} from '@shipfox/react-ui/alert';
+import {Button} from '@shipfox/react-ui/button';
+import {Link} from '@tanstack/react-router';
+import type {AgentStepConfig, StepError} from '#core/workflow-run.js';
+
+export function AgentConfigFailureCallout({
+  workspaceId,
+  config,
+  error,
+}: {
+  workspaceId: string;
+  config: AgentStepConfig | null;
+  error: StepError | null;
+}) {
+  const copy = agentConfigFailureCopy(config, error);
+
+  return (
+    <Alert variant="warning" animated={false} className="px-10 py-8">
+      <AlertContent>
+        <AlertTitle>{copy.title}</AlertTitle>
+        <AlertDescription>{copy.description}</AlertDescription>
+        {copy.showProviderCta ? (
+          <AlertActions>
+            <Button asChild size="2xs" variant="secondary" iconRight="chevronRight">
+              <Link to="/workspaces/$wid/settings/agents" params={{wid: workspaceId}}>
+                Configure Agents
+              </Link>
+            </Button>
+          </AlertActions>
+        ) : null}
+      </AlertContent>
+    </Alert>
+  );
+}
+
+function agentConfigFailureCopy(
+  config: AgentStepConfig | null,
+  error: StepError | null,
+): {title: string; description: string; showProviderCta: boolean} {
+  const provider = configValue(config?.provider, 'the selected provider');
+  const model = configValue(config?.model, 'the selected model');
+
+  switch (error?.agentConfigIssue) {
+    case 'provider_not_configured':
+      return {
+        title: `Configure credentials for ${provider}`,
+        description: `This step uses ${provider}, but no workspace credentials are configured for that model provider. Configure ${provider} in Agents, then re-run the workflow.`,
+        showProviderCta: true,
+      };
+    case 'credentials_invalid':
+      return {
+        title: `Update credentials for ${provider}`,
+        description: `This step uses ${provider}, but the saved credentials could not be used. Reconfigure ${provider} in Agents, then re-run the workflow.`,
+        showProviderCta: true,
+      };
+    case 'provider_unsupported':
+      return {
+        title: `Choose a supported model provider`,
+        description: `This step references ${provider}, which is not available to the agent runner. Update the workflow to use a supported provider, then re-run it.`,
+        showProviderCta: false,
+      };
+    case 'model_unavailable':
+      return {
+        title: `Choose an available model`,
+        description: `This step uses ${model} with ${provider}, but that model is not available for the provider. Update the model or provider in the workflow, then re-run it.`,
+        showProviderCta: false,
+      };
+    case 'step_config_invalid':
+      return {
+        title: "Fix this step's agent settings",
+        description:
+          'Make sure the step has a prompt, provider, model, and thinking value, then re-run the workflow.',
+        showProviderCta: false,
+      };
+    case undefined:
+      return {
+        title: "We couldn't load the agent configuration for this step",
+        description:
+          'Make sure the step has a prompt, provider, model, and thinking value. Then configure credentials for the model provider in Agents and re-run the workflow.',
+        showProviderCta: true,
+      };
+  }
+}
+
+function configValue(value: string | null | undefined, fallback: string): string {
+  return value ?? fallback;
+}

package/src/components/workflow-run-view/index.ts

@@ -0,0 +1,2 @@
+export {JobCard} from './job-card.js';
+export {WorkflowRunView} from './workflow-run-view.js';