Migrate storybookInfo to Clack

[justin-thurman]

Description

This PR migrates the storybookInfo task to Clack and updates the relevant stories. In addition to the boilerplate part of the migration, there are three other changes:

1. Added logic to runTask to bail early when ctx.skip is set (which can be set upstream by gitInfo).
2. Added failure state stories for the storybookInfo task. Our current storybook only tests pending/success.
3. Updated the Clack renderer to only render the UI state title in failure modes. The full error details are rendered below the task list, so this removes some duplication. I decided to do this within the Clack renderer, rather than the renderer-agnostic error format helper, because other renderers might make different decisions regarding what to do with the detailed error info.

Manual QA

Staging app used for QA:

Build 1: happy path

Note the build number is 2. I forgot to use --log-file for the first build.

Log file head:

12:56:16.604 Chromatic CLI v17.4.2--canary.1392.27360106835.0
             https://www.chromatic.com/docs/cli 
12:56:16.607 Authenticating with Chromatic [staging] 
12:56:16.607     → Connecting to https://index.staging-chromatic.com
12:56:16.942 Authenticated with Chromatic [staging]
12:56:16.942     → Using project token '****************be59'
12:56:16.943 Retrieving git information
12:56:17.583 Retrieved git information
12:56:17.583     → Commit '26c89fc' on branch 'master'; found 1 parent build
12:56:17.583 Collecting Storybook metadata
12:56:17.615 Collected Storybook metadata
12:56:17.616     → Build metadata gathered
12:56:17.617 Initializing build
12:56:18.064 Initialized build
                 → Build 2 initialized

Build 2: skipping a rebuild

Ran again on the same commit without --force-rebuild. gitInfo set skip, so storybookInfo doesn't render at all.

Note this UI is kind of strange, as the remaining Listr tasks still render in a skipped state, but the Storybook info task is just missing. This UI will be cleaner when the migration is complete, as the Skipping build line will be terminal.

Log file head:

12:59:07.990 Chromatic CLI v17.4.2--canary.1392.27360106835.0
             https://www.chromatic.com/docs/cli 
12:59:07.993 Authenticating with Chromatic [staging] 
12:59:07.993     → Connecting to https://index.staging-chromatic.com
12:59:08.372 Authenticated with Chromatic [staging]
12:59:08.372     → Using project token '****************be59'
12:59:08.372 Retrieving git information
12:59:09.093 ℹ Skipping rebuild of an already fully passed/accepted build
             A build for the same commit as the last build on the branch is considered a rebuild.
             If the last build is passed or accepted, the rebuild is skipped because it shouldn't change anything.
             You can override this using the --force-rebuild flag.
12:59:09.095 Skipping build
12:59:09.095     → Skipping rebuild of an already fully passed/accepted build

Build 3: non-interactive renderer

Build 4: failure state

I deleted the build-storybook script from my package.json, which causes this task to fail.

Full log file:

09:23:21.645 Chromatic CLI v17.4.2--canary.1392.27418016999.0
             https://www.chromatic.com/docs/cli 
09:23:21.660 Authenticating with Chromatic [staging] 
09:23:21.660     → Connecting to https://index.staging-chromatic.com
09:23:22.061 Authenticated with Chromatic [staging]
09:23:22.061     → Using project token '****************be59'
09:23:22.061 Retrieving git information
09:23:22.941 Retrieved git information
09:23:22.942     → Commit '1c19d37' on branch 'master'; found 1 parent build
09:23:22.942 Collecting Storybook metadata
09:23:22.943 Collecting Storybook metadata failed
09:23:22.943     → ✖ Build script not found
             The CLI didn't find a script called "build-storybook" in your package.json.
             Make sure you set the --build-script-name option to the value of the script name that builds your Storybook.

09:23:22.955 ✖ Failed to collect Storybook metadata
             ✖ Build script not found
             The CLI didn't find a script called "build-storybook" in your package.json.
             Make sure you set the --build-script-name option to the value of the script name that builds your Storybook.
             → View the full stacktrace below
             
             If you need help, please chat with us at https://www.chromatic.com/docs/cli for the fastest response.
             You can also email the team at support@chromatic.com if chat is not an option.
             
             Please provide us with the above CLI output and the following info:
             {
               "timestamp": "2026-06-12T13:23:22.952Z",
               "sessionId": "18b77c88-d0bd-4bda-b3fe-a0ac756a16ca",
               "gitVersion": "2.47.1",
               "gitBranch": "master",
               "gitSlug": "test-user/chromatic-qa-fake",
               "fromCI": false,
               "nodePlatform": "darwin",
               "nodeVersion": "22.22.3",
               "packageName": "chromatic",
               "packageVersion": "17.4.2--canary.1392.27418016999.0",
               "flags": {
                 "forceRebuild": "",
                 "logFile": "",
                 "outputDir": [],
                 "storybookBuildDir": [],
                 "externals": [],
                 "onlyStoryFiles": [],
                 "onlyStoryNames": [],
                 "untraced": [],
                 "fileHashing": true,
                 "interactive": true
               },
               "configuration": {},
               "exitCode": 0,
               "exitCodeKey": "OK",
               "errorType": "Error",
               "errorMessage": "✖ Failed to collect Storybook metadata"
             }
             
             Error: ✖ Build script not found
             The CLI didn't find a script called "build-storybook" in your package.json.
             Make sure you set the --build-script-name option to the value of the script name that builds your Storybook.
                 at Object.KO [as run] (/Users/justin/.npm/_npx/cc5b2d6285b43a5d/node_modules/chromatic/dist/node-src-iLwpJ9SQ.cjs:1267:281)
                 at WD (/Users/justin/.npm/_npx/cc5b2d6285b43a5d/node_modules/chromatic/dist/node-src-iLwpJ9SQ.cjs:1133:3014)
                 at $O (/Users/justin/.npm/_npx/cc5b2d6285b43a5d/node_modules/chromatic/dist/node-src-iLwpJ9SQ.cjs:1267:888)
                 at NN (/Users/justin/.npm/_npx/cc5b2d6285b43a5d/node_modules/chromatic/dist/node-src-iLwpJ9SQ.cjs:1641:4046)
                 at process.processTicksAndRejections (node:internal/process/task_queues:103:5)
                 at async Promise.all (index 0)
                 at async AN (/Users/justin/.npm/_npx/cc5b2d6285b43a5d/node_modules/chromatic/dist/node-src-iLwpJ9SQ.cjs:1641:3343)
                 at async Object.kN (/Users/justin/.npm/_npx/cc5b2d6285b43a5d/node_modules/chromatic/dist/node-src-iLwpJ9SQ.cjs:1641:1933)
                 at async vct (/Users/justin/.npm/_npx/cc5b2d6285b43a5d/node_modules/chromatic/dist/main-WJssRim1.cjs:13:11707)

Note that the log file does include the detailed error output in the task failure log, because only the Clack renderer (not the log renderer) was updated to remove it.

📦 Published PR as canary version: 17.4.2--canary.1392.27418016999.0

✨ Test out this PR locally via:

npm install chromatic@17.4.2--canary.1392.27418016999.0
# or 
yarn add chromatic@17.4.2--canary.1392.27418016999.0

[github-actions]

📦 Package Size: 7132 KB

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 81.91%. Comparing base (e8b39b8) to head (baef71d).

Additional details and impacted files

@@             Coverage Diff              @@
##           CAP-4584    #1392      +/-   ##
============================================
+ Coverage     81.90%   81.91%   +0.01%     
============================================
  Files           242      243       +1     
  Lines          4565     4568       +3     
  Branches       1293     1294       +1     
============================================
+ Hits           3739     3742       +3     
  Misses          713      713              
  Partials        113      113              

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.