Vektos

Loading the page

statement

0 design-system14 qualityDone

moonshotai/kimi-k3.1-pro · storybook-mcp · all runs of statement · Nov 9, 09:54

Run

Batch

Runs from different design-system versions should not be compared.

The page

A screenshot in each theme, as the benchmark took it.

page.stories.tsx

As the agent left it; marked lines broke a rule.

1import type { Meta, StoryObj } from "@storybook/react-vite";2import OctoberStatementPage from "./page";

Violations

14 counted, under 2 rules. “Not counted” marks a compiler error that restates a design-system violation, “Ignored” one the agent silenced with a comment.

Steps

One row per model call, with the tools it asked for. An agent that reads the guidelines before writing shows it here; what a checker or submit_view answered is under its call.

Step	Tools	Tokens in	Tokens out	Cost
0	docs-list	152	191	$0.0029
1	get-storybook-story-instructions, list_files, docs-show, docs-show, docs-show, docs-show, docs-show	857	227	$0.0046
2	read_file	5,849	62	$0.0132

page.tsx

As the agent left it; marked lines broke a rule.

1import {2  Badge,3  Card,4  CardBody,5  CardDescription,6  CardHeader,7  CardTitle,8  Table,9  TableBody,10  TableCell,11  TableHead,12  TableHeader,13  TableRow,14} from "@vektos/ds";15import { css } from "styled-system/css";16import data from "./fixture.json";17 18const pageStyles = css({19  minHeight: "screen",20  bg: "bg.canvas",21  color: "fg.default",22  fontFamily: "sans",23  px: { base: "4", md: "8" },24  py: { base: "6", md: "10" },25});26 27const containerStyles = css({28  width: "full",29  maxWidth: "6xl",30  mx: "auto",31  display: "flex",32  flexDirection: "column",33  gap: "6",34});35 36const eyebrowStyles = css({37  color: "fg.muted",38  fontSize: "sm",39  fontWeight: "semibold",40  letterSpacing: "wide",41  textTransform: "uppercase",42});43 44const titleStyles = css({45  marginBlockStart: "2",46  fontSize: { base: "3xl", md: "4xl" },47  lineHeight: "tight",48  fontWeight: "bold",49  letterSpacing: "tight",50});51 52const periodStyles = css({53  marginBlockStart: "2",54  color: "fg.muted",55  fontSize: "md",56});57 58const summaryStyles = css({59  display: "flex",60  flexDirection: { base: "column", md: "row" },61  alignItems: { base: "stretch", md: "center" },62  gap: { base: "6", md: "10" },63});64 65const summaryItemStyles = css({66  display: "flex",67  flexDirection: "column",68  gap: "1",69});70 71const balanceItemStyles = css({72  display: "flex",73  flexDirection: "column",74  gap: "1",75  marginInlineStart: { base: "0", md: "auto" },76  textAlign: { base: "left", md: "right" },77});78 79const labelStyles = css({80  color: "fg.muted",81  fontSize: "sm",82  fontWeight: "medium",83});84 85const accountValueStyles = css({86  fontSize: "lg",87  lineHeight: "normal",88  fontWeight: "semibold",89});90 91const ibanStyles = css({92  fontFamily: "mono",93  fontSize: "sm",94  lineHeight: "normal",95  overflowWrap: "anywhere",96});97 98const balanceStyles = css({99  fontSize: { base: "2xl", md: "3xl" },100  lineHeight: "tight",101  fontWeight: "bold",102  fontVariantNumeric: "tabular-nums",103  whiteSpace: "nowrap",104});105 106const tableScrollerStyles = css({107  marginBlockStart: "4",108  overflowX: "auto",109});110 111const tableStyles = css({112  minWidth: "3xl",113});114 115const dateStyles = css({116  color: "fg.muted",117  whiteSpace: "nowrap",118});119 120const descriptionStyles = css({121  fontWeight: "medium",122});123 124const categoryStyles = css({125  color: "fg.muted",126});127 128const amountStyles = css({129  color: "fg.default",130  fontWeight: "semibold",131  whiteSpace: "nowrap",132});133 134const creditAmountStyles = css({135  color: "success.text",136  fontWeight: "semibold",137  whiteSpace: "nowrap",138});139 140const asUtcDate = (value: string) => new Date(`${value}T00:00:00Z`);141 142const moneyFormatter = new Intl.NumberFormat("en-IE", {143  style: "currency",144  currency: data.account.currency,145  currencyDisplay: "symbol",146  minimumFractionDigits: 2,147  maximumFractionDigits: 2,148});149 150const dateFormatter = new Intl.DateTimeFormat("en-GB", {151  day: "2-digit",152  month: "short",153  year: "numeric",154  timeZone: "UTC",155});156 157const longDateFormatter = new Intl.DateTimeFormat("en-GB", {158  day: "numeric",159  month: "long",160  year: "numeric",161  timeZone: "UTC",162});163 164const monthFormatter = new Intl.DateTimeFormat("en-GB", {165  month: "long",166  timeZone: "UTC",167});168 169const formatTransactionAmount = (amount: number) => {170  const absoluteAmount = moneyFormatter.format(Math.abs(amount));171 172  if (amount < 0) return `−${absoluteAmount}`;173  if (amount > 0) return `+${absoluteAmount}`;174  return absoluteAmount;175};176 177export default function OctoberStatementPage() {178  const periodStart = asUtcDate(data.account.period.from);179  const periodEnd = asUtcDate(data.account.period.to);180  const statementMonth = monthFormatter.format(periodStart);181  const periodLabel = `${longDateFormatter.format(periodStart)} – ${longDateFormatter.format(periodEnd)}`;182  const pendingCount = data.transactions.filter(183    (transaction) => transaction.status === "pending",184  ).length;185 186  return (187    <main className={`vektos ${pageStyles}`}>188      <div className={containerStyles}>189        <header>190          <p className={eyebrowStyles}>Current account</p>191          <h1 className={titleStyles}>{statementMonth} statement</h1>192          <p className={periodStyles}>{periodLabel}</p>193        </header>194 195        <Card>196          <CardBody>197            <dl className={summaryStyles}>198              <div className={summaryItemStyles}>199                <dt className={labelStyles}>Account holder</dt>200                <dd className={accountValueStyles}>{data.account.holder}</dd>201              </div>202              <div className={summaryItemStyles}>203                <dt className={labelStyles}>IBAN</dt>204                <dd className={ibanStyles}>{data.account.iban}</dd>205              </div>206              <div className={balanceItemStyles}>207                <dt className={labelStyles}>208                  Current balance ({data.account.currency})209                </dt>210                <dd className={balanceStyles}>211                  {moneyFormatter.format(data.account.balance)}212                </dd>213              </div>214            </dl>215          </CardBody>216        </Card>217 218        <Card>219          <CardHeader>220            <CardTitle asChild>221              <h2>Transactions</h2>222            </CardTitle>223            <CardDescription>224              {data.transactions.length} transactions · {pendingCount} pending.225              Pending transactions are not final yet.226            </CardDescription>227          </CardHeader>228          <div className={tableScrollerStyles}>229            <Table230              aria-label={`${statementMonth} account transactions`}231              className={tableStyles}232            >233              <TableHead>234                <TableRow>235                  <TableHeader>Date</TableHeader>236                  <TableHeader>Description</TableHeader>237                  <TableHeader>Category</TableHeader>238                  <TableHeader>Status</TableHeader>239                  <TableHeader numeric>240                    Amount ({data.account.currency})241                  </TableHeader>242                </TableRow>243              </TableHead>244              <TableBody>245                {data.transactions.map((transaction) => {246                  const isPending = transaction.status === "pending";247 248                  return (249                    <TableRow key={transaction.id}>250                      <TableCell className={dateStyles}>251                        <time dateTime={transaction.date}>252                          {dateFormatter.format(asUtcDate(transaction.date))}253                        </time>254                      </TableCell>255                      <TableCell className={descriptionStyles}>256                        {transaction.description}257                      </TableCell>258                      <TableCell className={categoryStyles}>259                        {transaction.category}260                      </TableCell>261                      <TableCell>262                        <Badge tone={isPending ? "warning" : "neutral"}>263                          {isPending ? "Pending" : "Booked"}264                        </Badge>265                      </TableCell>266                      <TableCell267                        numeric268                        className={269                          transaction.amount > 0270                            ? creditAmountStyles271                            : amountStyles272                        }273                      >274                        {formatTransactionAmount(transaction.amount)}275                      </TableCell>276                    </TableRow>277                  );278                })}279              </TableBody>280            </Table>281          </div>282        </Card>283      </div>284    </main>285  );286}287