mirror of
https://github.com/alkimake/paperclip.git
synced 2026-06-20 12:30:38 +09:00
Add cheap model profiles for local adapters (#4881)
## Thinking Path > - Paperclip is a control plane for autonomous AI companies, where adapters are the boundary between the board, agents, and execution runtimes. > - Local adapters currently expose a primary runtime configuration, but operators often need a cheaper model lane for routine or low-risk work. > - That cheap lane has to stay adapter-owned: runtime profile settings should not mutate the primary adapter config or bypass existing auth/secret mediation. > - Issue creation also needs an ergonomic way to request primary, cheap, or custom model behavior for a selected assignee. > - This pull request adds a first-class `cheap` model profile contract across adapter capabilities, heartbeat config resolution, agent configuration, and issue creation. > - The benefit is cheaper task execution can be configured and requested explicitly while preserving adapter boundaries, secret handling, and audit visibility. ## What Changed - Added adapter model-profile capability metadata and a `cheap` profile contract for supported local adapters. - Applied `runtimeConfig.modelProfiles.cheap.adapterConfig` during heartbeat config resolution, including requested/applied/fallback run metadata. - Added agent configuration UI for cheap model profile settings without writing those settings into primary `adapterConfig`. - Added New Issue assignee model lane controls for Primary / Cheap / Custom and request payload handling. - Added run ledger profile badges and Storybook stories for the new cheap-lane UI states. - Added tests for validators, heartbeat model profile application, permission/secret mediation, UI payload helpers, and run ledger rendering. - Added committed UI verification screenshots under `docs/pr-screenshots/pap-2837/`. - Addressed Greptile review feedback around cheap-profile defaults, shared profile types, and fallback test data. ## Verification Local: - `pnpm exec vitest run packages/shared/src/validators/issue.test.ts server/src/__tests__/adapter-registry.test.ts server/src/__tests__/agent-permissions-routes.test.ts server/src/__tests__/heartbeat-model-profile.test.ts ui/src/components/IssueRunLedger.test.tsx ui/src/lib/agent-config-patch.test.ts ui/src/lib/issue-assignee-overrides.test.ts ui/src/lib/new-agent-runtime-config.test.ts` — passed, 8 files / 103 tests. - `pnpm exec vitest run ui/src/lib/new-agent-runtime-config.test.ts ui/src/components/IssueRunLedger.test.tsx` — passed after Greptile/rebase follow-up, 2 files / 17 tests. - `pnpm --filter @paperclipai/ui typecheck` — passed after Greptile/rebase follow-up. - `pnpm -r typecheck` — passed. - `pnpm build` — passed. - `pnpm test:run` — did not complete successfully in this local worktree: it stopped in pre-existing `@paperclipai/adapter-utils` sandbox/SSH fixture suites outside this PR diff. Failures were 5s local timeouts plus `git init -b` unsupported by this machine's Git 2.21.0. The branch-specific targeted suites above passed. - Branch was fetched/rebased onto `public-gh/master`; `git rev-list --left-right --count public-gh/master...HEAD` reports `0 9`. Remote PR checks on latest head `e30bf399146451c86cee98ed528d51d33fa5af5a`: - `policy` — passed. - `verify` — passed. - `e2e` — passed. - `Greptile Review` — passed, confidence score 5/5; Greptile review threads resolved. - `security/snyk (cryppadotta)` — passed. Screenshots: - [New issue cheap lane desktop](https://github.com/paperclipai/paperclip/blob/PAP-2837-plan-cheap-model-for-adapters-that-can-support-it/docs/pr-screenshots/pap-2837/newissue-cheap-desktop.png) - [New issue custom lane desktop](https://github.com/paperclipai/paperclip/blob/PAP-2837-plan-cheap-model-for-adapters-that-can-support-it/docs/pr-screenshots/pap-2837/newissue-custom-desktop.png) - [New issue unsupported adapter desktop](https://github.com/paperclipai/paperclip/blob/PAP-2837-plan-cheap-model-for-adapters-that-can-support-it/docs/pr-screenshots/pap-2837/newissue-unsupported-desktop.png) - [Run ledger model profile badges desktop](https://github.com/paperclipai/paperclip/blob/PAP-2837-plan-cheap-model-for-adapters-that-can-support-it/docs/pr-screenshots/pap-2837/runledger-profile-badges-desktop.png) - Mobile variants are also in `docs/pr-screenshots/pap-2837/`. ## Risks - Medium: heartbeat config mediation now merges runtime model profiles into adapter configs, so adapter secret normalization and host-command restrictions must keep covering nested config paths. - Medium: the UI adds another issue creation choice; unsupported adapters must keep hiding the cheap lane and preserve primary behavior. - Low migration risk: no database migration is included. > For core feature work, check [`ROADMAP.md`](ROADMAP.md) first and discuss it in `#dev` before opening the PR. Feature PRs that overlap with planned core work may need to be redirected — check the roadmap first. See `CONTRIBUTING.md`. ## Model Used OpenAI Codex coding agent using GPT-5-class reasoning with repo tool use and command execution. Exact served model/context window was not exposed by the runtime. ## Checklist - [x] I have included a thinking path that traces from project context to this change - [x] I have specified the model used (with version and capability details) - [x] I have checked ROADMAP.md and confirmed this PR does not duplicate planned core work - [ ] I have run tests locally and they pass - [x] I have added or updated tests where applicable - [x] If this change affects the UI, I have included before/after screenshots - [x] I have updated relevant documentation to reflect my changes - [x] I have considered and documented any risks above - [x] I will address all Greptile and reviewer comments before requesting merge --------- Co-authored-by: Paperclip <noreply@paperclip.ing> Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Dotta
GitHub
parent
1fe1067361
commit
a3de1d764d
60 changed files with 2216 additions and 151 deletions
|
|
@ -87,6 +87,63 @@ function installStorybookApiFixtures() {
|
|||
});
|
||||
}
|
||||
|
||||
if (url.pathname === "/api/adapters") {
|
||||
return Response.json([
|
||||
{
|
||||
type: "claude_local",
|
||||
label: "Claude Local",
|
||||
source: "builtin",
|
||||
modelsCount: 2,
|
||||
loaded: true,
|
||||
disabled: false,
|
||||
capabilities: {
|
||||
supportsInstructionsBundle: true,
|
||||
supportsSkills: true,
|
||||
supportsLocalAgentJwt: true,
|
||||
requiresMaterializedRuntimeSkills: false,
|
||||
supportsModelProfiles: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "codex_local",
|
||||
label: "Codex Local",
|
||||
source: "builtin",
|
||||
modelsCount: 3,
|
||||
loaded: true,
|
||||
disabled: false,
|
||||
capabilities: {
|
||||
supportsInstructionsBundle: true,
|
||||
supportsSkills: true,
|
||||
supportsLocalAgentJwt: true,
|
||||
requiresMaterializedRuntimeSkills: false,
|
||||
supportsModelProfiles: true,
|
||||
},
|
||||
},
|
||||
]);
|
||||
}
|
||||
|
||||
const adapterModelsMatch = url.pathname.match(
|
||||
/^\/api\/companies\/[^/]+\/adapters\/([^/]+)\/(models|model-profiles)$/,
|
||||
);
|
||||
if (adapterModelsMatch) {
|
||||
const [, , resource] = adapterModelsMatch;
|
||||
if (resource === "models") {
|
||||
return Response.json([
|
||||
{ id: "claude-opus-4-7", label: "Claude Opus 4.7" },
|
||||
{ id: "claude-sonnet-4-6", label: "Claude Sonnet 4.6" },
|
||||
{ id: "claude-haiku-4-5", label: "Claude Haiku 4.5" },
|
||||
]);
|
||||
}
|
||||
return Response.json([
|
||||
{
|
||||
key: "cheap",
|
||||
label: "Cheap",
|
||||
adapterConfig: { model: "claude-sonnet-4-6" },
|
||||
source: "adapter_default",
|
||||
},
|
||||
]);
|
||||
}
|
||||
|
||||
if (url.pathname === "/api/plugins/ui-contributions") {
|
||||
return Response.json([]);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -291,6 +291,7 @@ const adapterFixtures: AdapterInfo[] = [
|
|||
supportsSkills: true,
|
||||
supportsLocalAgentJwt: true,
|
||||
requiresMaterializedRuntimeSkills: true,
|
||||
supportsModelProfiles: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -305,6 +306,7 @@ const adapterFixtures: AdapterInfo[] = [
|
|||
supportsSkills: true,
|
||||
supportsLocalAgentJwt: true,
|
||||
requiresMaterializedRuntimeSkills: true,
|
||||
supportsModelProfiles: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -319,6 +321,7 @@ const adapterFixtures: AdapterInfo[] = [
|
|||
supportsSkills: false,
|
||||
supportsLocalAgentJwt: false,
|
||||
requiresMaterializedRuntimeSkills: false,
|
||||
supportsModelProfiles: false,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@ import { PathInstructionsModal } from "@/components/PathInstructionsModal";
|
|||
import { useCompany } from "@/context/CompanyContext";
|
||||
import { useDialog } from "@/context/DialogContext";
|
||||
import { queryKeys } from "@/lib/queryKeys";
|
||||
import type { Agent } from "@paperclipai/shared";
|
||||
import {
|
||||
storybookAgents,
|
||||
storybookAuthSession,
|
||||
|
|
@ -328,7 +329,7 @@ function DialogBackdropFrame({
|
|||
}
|
||||
|
||||
function hydrateDialogQueries(queryClient: ReturnType<typeof useQueryClient>) {
|
||||
queryClient.setQueryData(queryKeys.companies.all, storybookCompanies);
|
||||
queryClient.setQueryData(queryKeys.companies.all, { companies: storybookCompanies, unauthorized: false });
|
||||
queryClient.setQueryData(queryKeys.auth.session, storybookAuthSession);
|
||||
queryClient.setQueryData(queryKeys.agents.list(COMPANY_ID), storybookAgents);
|
||||
queryClient.setQueryData(queryKeys.projects.list(COMPANY_ID), storybookProjects);
|
||||
|
|
@ -382,6 +383,7 @@ function hydrateDialogQueries(queryClient: ReturnType<typeof useQueryClient>) {
|
|||
supportsSkills: true,
|
||||
supportsLocalAgentJwt: true,
|
||||
requiresMaterializedRuntimeSkills: false,
|
||||
supportsModelProfiles: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -396,6 +398,7 @@ function hydrateDialogQueries(queryClient: ReturnType<typeof useQueryClient>) {
|
|||
supportsSkills: true,
|
||||
supportsLocalAgentJwt: true,
|
||||
requiresMaterializedRuntimeSkills: false,
|
||||
supportsModelProfiles: true,
|
||||
},
|
||||
},
|
||||
]);
|
||||
|
|
@ -403,8 +406,41 @@ function hydrateDialogQueries(queryClient: ReturnType<typeof useQueryClient>) {
|
|||
{ id: "gpt-5.4", label: "GPT-5.4" },
|
||||
{ id: "gpt-5.4-mini", label: "GPT-5.4 Mini" },
|
||||
]);
|
||||
queryClient.setQueryData(queryKeys.agents.adapterModelProfiles(COMPANY_ID, "codex_local"), [
|
||||
{
|
||||
key: "cheap",
|
||||
label: "Cheap",
|
||||
adapterConfig: { model: "gpt-5.4-mini" },
|
||||
source: "adapter_default",
|
||||
},
|
||||
]);
|
||||
}
|
||||
|
||||
const HERMES_AGENT: Agent = {
|
||||
id: "agent-hermes",
|
||||
companyId: COMPANY_ID,
|
||||
name: "HermesRouter",
|
||||
urlKey: "hermesrouter",
|
||||
role: "engineer",
|
||||
title: "Lightweight Routing",
|
||||
icon: "code",
|
||||
status: "idle",
|
||||
reportsTo: "agent-cto",
|
||||
capabilities: "Hermes-backed assistant on an adapter without the cheap-profile contract.",
|
||||
adapterType: "opencode_local",
|
||||
adapterConfig: {},
|
||||
runtimeConfig: {},
|
||||
budgetMonthlyCents: 60_000,
|
||||
spentMonthlyCents: 9_000,
|
||||
pauseReason: null,
|
||||
pausedAt: null,
|
||||
permissions: { canCreateAgents: false },
|
||||
lastHeartbeatAt: new Date("2026-04-29T08:30:00.000Z"),
|
||||
metadata: null,
|
||||
createdAt: new Date("2026-04-12T08:00:00.000Z"),
|
||||
updatedAt: new Date("2026-04-29T08:30:00.000Z"),
|
||||
};
|
||||
|
||||
function StorybookDialogFixtures({ children }: { children: ReactNode }) {
|
||||
const queryClient = useQueryClient();
|
||||
const [ready] = useState(() => {
|
||||
|
|
@ -655,6 +691,128 @@ function ImageGalleryModalStory() {
|
|||
);
|
||||
}
|
||||
|
||||
type CheapLaneVariant = "primary" | "cheap" | "custom" | "unsupported";
|
||||
|
||||
function clickModelLaneButton(label: "Primary" | "Cheap" | "Custom") {
|
||||
const radiogroup = document.querySelector<HTMLElement>("[aria-label='Model lane']");
|
||||
if (!radiogroup) return false;
|
||||
const buttons = Array.from(radiogroup.querySelectorAll<HTMLButtonElement>("button[role='radio']"));
|
||||
const button = buttons.find((candidate) => candidate.textContent?.trim() === label);
|
||||
if (!button) return false;
|
||||
button.click();
|
||||
return true;
|
||||
}
|
||||
|
||||
function findAssigneeOptionsButton() {
|
||||
const buttons = Array.from(document.querySelectorAll<HTMLButtonElement>("button"));
|
||||
return (
|
||||
buttons.find((candidate) => /(Codex|Claude|OpenCode|Agent) options$/.test(candidate.textContent?.trim() ?? "")) ?? null
|
||||
);
|
||||
}
|
||||
|
||||
function useCheapLaneAdapterOverrides(variant: CheapLaneVariant) {
|
||||
const queryClient = useQueryClient();
|
||||
useLayoutEffect(() => {
|
||||
if (variant !== "unsupported") return;
|
||||
queryClient.setQueryData(
|
||||
queryKeys.agents.list(COMPANY_ID),
|
||||
[...storybookAgents, HERMES_AGENT],
|
||||
);
|
||||
queryClient.setQueryData(queryKeys.adapters.all, [
|
||||
{
|
||||
type: "codex_local",
|
||||
label: "Codex local",
|
||||
source: "builtin",
|
||||
modelsCount: 5,
|
||||
loaded: true,
|
||||
disabled: false,
|
||||
capabilities: {
|
||||
supportsInstructionsBundle: true,
|
||||
supportsSkills: true,
|
||||
supportsLocalAgentJwt: true,
|
||||
requiresMaterializedRuntimeSkills: false,
|
||||
supportsModelProfiles: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "opencode_local",
|
||||
label: "OpenCode local",
|
||||
source: "builtin",
|
||||
modelsCount: 2,
|
||||
loaded: true,
|
||||
disabled: false,
|
||||
capabilities: {
|
||||
supportsInstructionsBundle: true,
|
||||
supportsSkills: true,
|
||||
supportsLocalAgentJwt: true,
|
||||
requiresMaterializedRuntimeSkills: true,
|
||||
supportsModelProfiles: false,
|
||||
},
|
||||
},
|
||||
]);
|
||||
queryClient.setQueryData(queryKeys.agents.adapterModels(COMPANY_ID, "opencode_local"), [
|
||||
{ id: "anthropic/claude-haiku-4-5", label: "Claude Haiku 4.5" },
|
||||
{ id: "openai/gpt-5.4-mini", label: "GPT-5.4 Mini" },
|
||||
]);
|
||||
}, [queryClient, variant]);
|
||||
}
|
||||
|
||||
function CheapLaneIssueDialogOpener({ variant }: { variant: CheapLaneVariant }) {
|
||||
const { openNewIssue } = useDialog();
|
||||
useCheapLaneAdapterOverrides(variant);
|
||||
|
||||
const assigneeAgentId = variant === "unsupported" ? "agent-hermes" : "agent-codex";
|
||||
const title =
|
||||
variant === "unsupported"
|
||||
? "Route research summary to HermesRouter"
|
||||
: "Generate weekly Storybook coverage report";
|
||||
const description =
|
||||
variant === "unsupported"
|
||||
? "HermesRouter runs on an adapter that does not advertise a cheap profile, so the Cheap lane should disappear instead of being greyed."
|
||||
: "Lower-cost runs should still pick up the agent's cheap profile so the model badge can show the requested lane.";
|
||||
|
||||
useOpenWhenCompanyReady(() => {
|
||||
openNewIssue({
|
||||
title,
|
||||
description,
|
||||
status: "todo",
|
||||
priority: "medium",
|
||||
projectId: "project-board-ui",
|
||||
projectWorkspaceId: "workspace-board-ui",
|
||||
assigneeAgentId,
|
||||
});
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
const timers: number[] = [];
|
||||
|
||||
timers.push(
|
||||
window.setTimeout(() => {
|
||||
if (cancelled) return;
|
||||
const optionsButton = findAssigneeOptionsButton();
|
||||
optionsButton?.click();
|
||||
}, 300),
|
||||
);
|
||||
|
||||
if (variant === "cheap" || variant === "custom") {
|
||||
timers.push(
|
||||
window.setTimeout(() => {
|
||||
if (cancelled) return;
|
||||
clickModelLaneButton(variant === "cheap" ? "Cheap" : "Custom");
|
||||
}, 600),
|
||||
);
|
||||
}
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
for (const timer of timers) window.clearTimeout(timer);
|
||||
};
|
||||
}, [variant]);
|
||||
|
||||
return <NewIssueDialog />;
|
||||
}
|
||||
|
||||
function PathInstructionsModalStory() {
|
||||
return (
|
||||
<DialogStory
|
||||
|
|
@ -726,6 +884,62 @@ export const NewIssueValidationError: Story = {
|
|||
),
|
||||
};
|
||||
|
||||
export const NewIssueCheapLanePrimary: Story = {
|
||||
name: "New Issue - Cheap lane (Primary)",
|
||||
render: () => (
|
||||
<DialogStory
|
||||
eyebrow="NewIssueDialog"
|
||||
title="Model lane segmented control - Primary selected"
|
||||
description="Codex assignee with the assignee-options drawer expanded so the Primary | Cheap | Custom segmented control is visible. Default helper copy is shown."
|
||||
badges={["model lane", "primary", "default"]}
|
||||
>
|
||||
<CheapLaneIssueDialogOpener variant="primary" />
|
||||
</DialogStory>
|
||||
),
|
||||
};
|
||||
|
||||
export const NewIssueCheapLaneCheap: Story = {
|
||||
name: "New Issue - Cheap lane (Cheap)",
|
||||
render: () => (
|
||||
<DialogStory
|
||||
eyebrow="NewIssueDialog"
|
||||
title="Model lane segmented control - Cheap selected"
|
||||
description='Codex assignee with the Cheap lane selected so the helper line "Sends modelProfile: \"cheap\" · adapter default …" is visible.'
|
||||
badges={["model lane", "cheap", "modelProfile"]}
|
||||
>
|
||||
<CheapLaneIssueDialogOpener variant="cheap" />
|
||||
</DialogStory>
|
||||
),
|
||||
};
|
||||
|
||||
export const NewIssueCheapLaneCustom: Story = {
|
||||
name: "New Issue - Cheap lane (Custom)",
|
||||
render: () => (
|
||||
<DialogStory
|
||||
eyebrow="NewIssueDialog"
|
||||
title="Model lane segmented control - Custom selected"
|
||||
description="Custom selected so the explicit model picker and thinking-effort sub-fields render the way they did before the cheap lane was added."
|
||||
badges={["model lane", "custom", "regression"]}
|
||||
>
|
||||
<CheapLaneIssueDialogOpener variant="custom" />
|
||||
</DialogStory>
|
||||
),
|
||||
};
|
||||
|
||||
export const NewIssueCheapLaneUnsupported: Story = {
|
||||
name: "New Issue - Cheap lane (Unsupported adapter)",
|
||||
render: () => (
|
||||
<DialogStory
|
||||
eyebrow="NewIssueDialog"
|
||||
title="Model lane on an adapter without supportsModelProfiles"
|
||||
description="HermesRouter runs on opencode_local with supportsModelProfiles disabled, so the Cheap option should be hidden — the segmented control collapses to Primary | Custom rather than showing a greyed Cheap entry."
|
||||
badges={["model lane", "unsupported", "cheap hidden"]}
|
||||
>
|
||||
<CheapLaneIssueDialogOpener variant="unsupported" />
|
||||
</DialogStory>
|
||||
),
|
||||
};
|
||||
|
||||
export const NewAgentRecommendation: Story = {
|
||||
name: "New Agent - Recommendation",
|
||||
render: () => (
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import type { Meta, StoryObj } from "@storybook/react-vite";
|
||||
import type { Issue } from "@paperclipai/shared";
|
||||
import type { RunForIssue } from "@/api/activity";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import {
|
||||
ArrowDownAZ,
|
||||
|
|
@ -83,7 +84,7 @@ function Section({
|
|||
}
|
||||
|
||||
function hydrateStorybookQueries(queryClient: ReturnType<typeof useQueryClient>) {
|
||||
queryClient.setQueryData(queryKeys.companies.all, storybookCompanies);
|
||||
queryClient.setQueryData(queryKeys.companies.all, { companies: storybookCompanies, unauthorized: false });
|
||||
queryClient.setQueryData(queryKeys.auth.session, storybookAuthSession);
|
||||
queryClient.setQueryData(queryKeys.agents.list(companyId), storybookAgents);
|
||||
queryClient.setQueryData(queryKeys.projects.list(companyId), storybookProjects);
|
||||
|
|
@ -334,6 +335,116 @@ function OpenFiltersPopover() {
|
|||
);
|
||||
}
|
||||
|
||||
const modelProfileLedgerRuns: RunForIssue[] = [
|
||||
{
|
||||
runId: "run-cheap-applied",
|
||||
status: "succeeded",
|
||||
agentId: "agent-codex",
|
||||
adapterType: "codex_local",
|
||||
startedAt: "2026-04-29T09:30:00.000Z",
|
||||
finishedAt: "2026-04-29T09:32:14.000Z",
|
||||
createdAt: "2026-04-29T09:29:55.000Z",
|
||||
invocationSource: "manual",
|
||||
usageJson: { costCents: 17, inputTokens: 6400, outputTokens: 480 },
|
||||
resultJson: {
|
||||
stopReason: "completed",
|
||||
modelProfile: {
|
||||
requested: "cheap",
|
||||
applied: "cheap",
|
||||
configSource: "agent_runtime_config",
|
||||
},
|
||||
},
|
||||
livenessState: "advanced",
|
||||
livenessReason: "Cheap-lane summary completed inside the planned scope.",
|
||||
continuationAttempt: 0,
|
||||
lastUsefulActionAt: "2026-04-29T09:32:10.000Z",
|
||||
nextAction: "Hand the routine output back to the operator inbox.",
|
||||
},
|
||||
{
|
||||
runId: "run-cheap-fallback",
|
||||
status: "succeeded",
|
||||
agentId: "agent-codex",
|
||||
adapterType: "codex_local",
|
||||
startedAt: "2026-04-29T08:10:00.000Z",
|
||||
finishedAt: "2026-04-29T08:14:42.000Z",
|
||||
createdAt: "2026-04-29T08:09:50.000Z",
|
||||
invocationSource: "manual",
|
||||
usageJson: { costCents: 91, inputTokens: 21800, outputTokens: 3200 },
|
||||
resultJson: {
|
||||
stopReason: "completed",
|
||||
modelProfile: {
|
||||
requested: "cheap",
|
||||
applied: "primary",
|
||||
configSource: "adapter_default",
|
||||
fallbackReason: "Cheap profile not configured for this agent",
|
||||
},
|
||||
},
|
||||
livenessState: "advanced",
|
||||
livenessReason: "Routine fell back to the primary model after the cheap lookup missed.",
|
||||
continuationAttempt: 0,
|
||||
lastUsefulActionAt: "2026-04-29T08:14:36.000Z",
|
||||
nextAction: "Configure agent-codex with a cheap profile to avoid the fallback.",
|
||||
},
|
||||
{
|
||||
runId: "run-baseline",
|
||||
status: "succeeded",
|
||||
agentId: "agent-codex",
|
||||
adapterType: "codex_local",
|
||||
startedAt: "2026-04-28T18:05:00.000Z",
|
||||
finishedAt: "2026-04-28T18:14:11.000Z",
|
||||
createdAt: "2026-04-28T18:04:50.000Z",
|
||||
invocationSource: "scheduler",
|
||||
usageJson: { costCents: 142, inputTokens: 38400, outputTokens: 7200 },
|
||||
resultJson: { stopReason: "completed" },
|
||||
livenessState: "advanced",
|
||||
livenessReason: "Standard primary-lane run with no profile metadata recorded.",
|
||||
continuationAttempt: 0,
|
||||
lastUsefulActionAt: "2026-04-28T18:13:58.000Z",
|
||||
nextAction: "Continue with the next planned subtask.",
|
||||
},
|
||||
];
|
||||
|
||||
function ModelProfileBadgeLedger() {
|
||||
return (
|
||||
<div className="grid gap-5 xl:grid-cols-[minmax(0,1fr)_360px]">
|
||||
<IssueRunLedgerContent
|
||||
runs={modelProfileLedgerRuns}
|
||||
activeRun={null}
|
||||
liveRuns={[]}
|
||||
issueStatus="in_progress"
|
||||
childIssues={[]}
|
||||
agentMap={storybookAgentMap}
|
||||
/>
|
||||
<Card className="shadow-none">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<GitBranch className="h-4 w-4" />
|
||||
Model profile metadata
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Profile badges read <code>resultJson.modelProfile</code> on each run. Applied matching the request renders
|
||||
emerald; an applied fallback renders amber and surfaces the inline reason.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3 text-xs text-muted-foreground">
|
||||
<div className="rounded-md border border-border bg-background/70 p-3">
|
||||
<div className="font-mono text-emerald-600 dark:text-emerald-400">Profile: cheap</div>
|
||||
<p className="mt-1">requested + applied both equal cheap → emerald badge.</p>
|
||||
</div>
|
||||
<div className="rounded-md border border-border bg-background/70 p-3">
|
||||
<div className="font-mono text-amber-600 dark:text-amber-400">Profile: cheap → primary</div>
|
||||
<p className="mt-1">cheap requested but primary applied → amber badge plus inline fallback reason.</p>
|
||||
</div>
|
||||
<div className="rounded-md border border-border bg-background/70 p-3">
|
||||
<div className="font-mono text-muted-foreground">No profile badge</div>
|
||||
<p className="mt-1">Run with no <code>modelProfile</code> metadata renders without a badge for visual contrast.</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function RunLedgerWithCostColumns() {
|
||||
return (
|
||||
<div className="grid gap-5 xl:grid-cols-[minmax(0,1fr)_380px]">
|
||||
|
|
@ -549,6 +660,10 @@ function IssueManagementStories() {
|
|||
<RunLedgerWithCostColumns />
|
||||
</Section>
|
||||
|
||||
<Section eyebrow="IssueRunLedger" title="Model profile badges for cheap, fallback, and baseline runs">
|
||||
<ModelProfileBadgeLedger />
|
||||
</Section>
|
||||
|
||||
<Section eyebrow="IssueWorkspaceCard" title="Workspace info card with branch, path, and runtime status">
|
||||
<WorkspaceCardWithRuntime />
|
||||
</Section>
|
||||
|
|
@ -599,3 +714,40 @@ export default meta;
|
|||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const FullSurfaceMatrix: Story = {};
|
||||
|
||||
function ModelProfileLedgerStandalone() {
|
||||
return (
|
||||
<StorybookData>
|
||||
<div className="paperclip-story">
|
||||
<main className="paperclip-story__inner space-y-6">
|
||||
<section className="paperclip-story__frame p-6">
|
||||
<div className="flex flex-wrap items-start justify-between gap-5">
|
||||
<div>
|
||||
<div className="paperclip-story__label">IssueRunLedger</div>
|
||||
<h1 className="mt-2 text-3xl font-semibold tracking-tight">Model profile badges</h1>
|
||||
<p className="mt-3 max-w-3xl text-sm leading-6 text-muted-foreground">
|
||||
Run ledger isolated to the cheap-lane visual states: an emerald applied=cheap badge, an amber
|
||||
cheap-fell-back-to-primary badge with the inline fallback reason, and a baseline run without a
|
||||
modelProfile so the visual diff stays obvious.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Badge variant="outline">cheap applied</Badge>
|
||||
<Badge variant="outline">cheap → primary</Badge>
|
||||
<Badge variant="outline">no profile</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<Section eyebrow="IssueRunLedger" title="Cheap, fallback, and baseline runs">
|
||||
<ModelProfileBadgeLedger />
|
||||
</Section>
|
||||
</main>
|
||||
</div>
|
||||
</StorybookData>
|
||||
);
|
||||
}
|
||||
|
||||
export const RunLedgerModelProfileBadges: Story = {
|
||||
name: "Run ledger - Model profile badges",
|
||||
render: () => <ModelProfileLedgerStandalone />,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@ function Section({
|
|||
|
||||
function hydrateStorybookQueries(queryClient: ReturnType<typeof useQueryClient>) {
|
||||
queryClient.setQueryData(queryKeys.auth.session, storybookAuthSession);
|
||||
queryClient.setQueryData(queryKeys.companies.all, storybookCompanies);
|
||||
queryClient.setQueryData(queryKeys.companies.all, { companies: storybookCompanies, unauthorized: false });
|
||||
queryClient.setQueryData(queryKeys.agents.list(COMPANY_ID), storybookAgents);
|
||||
queryClient.setQueryData(queryKeys.projects.list(COMPANY_ID), storybookProjects);
|
||||
queryClient.setQueryData(queryKeys.projects.detail(boardProject.id), boardProject);
|
||||
|
|
|
|||
|
|
@ -172,7 +172,7 @@ const viewStateKey = "storybook:sub-issues-workflow:list";
|
|||
const scopedKey = `${viewStateKey}:${companyId}`;
|
||||
|
||||
function hydrateQueries(client: ReturnType<typeof useQueryClient>) {
|
||||
client.setQueryData(queryKeys.companies.all, storybookCompanies);
|
||||
client.setQueryData(queryKeys.companies.all, { companies: storybookCompanies, unauthorized: false });
|
||||
client.setQueryData(queryKeys.auth.session, storybookAuthSession);
|
||||
client.setQueryData(queryKeys.agents.list(companyId), storybookAgents);
|
||||
client.setQueryData(queryKeys.projects.list(companyId), storybookProjects);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue