@monkey-mini-app/dsh-mini-app 0.1.0 → 0.1.4

package/skills/monkey-mini-app/references/examples/item/item-01.tsx

@@ -0,0 +1,19 @@
+/**
+ * @exampleOf Item
+ * @title Item
+ * @scenario A uniform row (title + description + trailing actions) inside menus, lists and cards, with an outline variant for grouping.
+ */
+import { Item, ItemContent, ItemDescription, ItemTitle } from "@monkey-mini-app/ui";
+
+export default function Item01Example() {
+  return (
+    <>
+      <Item variant="outline">
+        <ItemContent>
+          <ItemTitle>Notification</ItemTitle>
+          <ItemDescription>Build finished</ItemDescription>
+        </ItemContent>
+      </Item>
+    </>
+  );
+}

package/skills/monkey-mini-app/references/examples/jql-input/jql-input-01.tsx

@@ -0,0 +1,33 @@
+/**
+ * @exampleOf JqlInput
+ * @title JqlInput
+ * @scenario Query-language field with syntax feedback (JQL/SQL-ish filters) — the CodeMirror-powered sibling of SearchInput.
+ * @hint CodeMirror JQL · type to complete fields
+ */
+import * as React from "react";
+
+import { JqlInput } from "@monkey-mini-app/ui";
+
+const FIELDS = [
+  { name: "project", type: "project" },
+  { name: "status", type: "status" },
+  { name: "assignee", type: "user" },
+  { name: "reporter", type: "user" },
+  { name: "priority", type: "priority" },
+  { name: "issuetype", type: "issuetype" },
+  { name: "resolution", type: "resolution" },
+  { name: "labels", type: "array" },
+  { name: "updated", type: "date" },
+  { name: "created", type: "date" },
+];
+
+export default function JqlInput01Example() {
+  const [jql, setJql] = React.useState('project = TMS AND status = "In Progress" ORDER BY updated DESC');
+
+  return (
+    <>
+      <JqlInput value={jql} onChange={setJql} fields={FIELDS} />
+      <p className="text-muted-foreground mt-2 font-mono text-xs">{jql}</p>
+    </>
+  );
+}

package/skills/monkey-mini-app/references/examples/json-viewer/json-viewer-01.tsx

@@ -0,0 +1,10 @@
+/**
+ * @exampleOf JsonViewer
+ * @title JsonViewer
+ * @scenario Collapsible tree over an API response payload; use for debugging output instead of <pre>{JSON.stringify(...)}.
+ */
+import { JsonViewer } from "@monkey-mini-app/ui";
+
+export default function JsonViewer01Example() {
+  return <JsonViewer value={{ ok: true, count: 2, nested: { a: 1 } }} />;
+}

package/skills/monkey-mini-app/references/examples/kanban/kanban-01.tsx

@@ -0,0 +1,60 @@
+/**
+ * @exampleOf Kanban
+ * @title Kanban
+ * @scenario Card board with drag between columns, plus the issue detail sheet — the workflow/pipeline view; use Table/DataGrid when you need sorting and totals.
+ * @hint Drag between columns · click a card for Jira details
+ */
+import * as React from "react";
+
+import { Kanban, type KanbanCard, KanbanIssuePanel } from "@monkey-mini-app/ui";
+
+export default function Kanban01Example() {
+  const [cards, setCards] = React.useState<KanbanCard[]>([
+    {
+      id: "c1",
+      key: "TMS-1201",
+      title: "Fix grid sort reset",
+      columnId: "todo",
+      type: "Story",
+      status: "running",
+      priority: "P1",
+      assignee: "Ada",
+      reporter: "Lin",
+      tags: ["grid"],
+      description: "Third click should clear sorting.",
+      comments: [{ id: "1", author: "Lin", body: "Please add UT.", time: "1h" }],
+    },
+    {
+      id: "c2",
+      key: "TMS-1208",
+      title: "Write board tests",
+      columnId: "doing",
+      type: "Task",
+      status: "pass",
+      priority: "P2",
+      assignee: "Kai",
+    },
+  ]);
+  const [issue, setIssue] = React.useState<KanbanCard | null>(null);
+
+  return (
+    <>
+      <Kanban
+        columns={[
+          { id: "todo", title: "Todo" },
+          { id: "doing", title: "Doing", limit: 3 },
+          { id: "done", title: "Done" },
+        ]}
+        cards={cards}
+        onCardsChange={setCards}
+        onCardClick={setIssue}
+      />
+      <KanbanIssuePanel
+        card={issue}
+        open={issue != null}
+        onOpenChange={(open) => !open && setIssue(null)}
+        columnTitle={cards.find((c) => c.id === issue?.id)?.columnId}
+      />
+    </>
+  );
+}

package/skills/monkey-mini-app/references/examples/label/label-01.tsx

@@ -0,0 +1,10 @@
+/**
+ * @exampleOf Label
+ * @title Label
+ * @scenario Accessible field label wired by htmlFor; the piece that makes a bare Input keyboard/AT-usable.
+ */
+import { Label } from "@monkey-mini-app/ui";
+
+export default function Label01Example() {
+  return <Label htmlFor="demo-name">Name</Label>;
+}

package/skills/monkey-mini-app/references/examples/list-detail/list-detail-01.tsx

@@ -0,0 +1,117 @@
+/**
+ * @exampleOf ListDetail
+ * @title ListDetail
+ * @scenario Records browser at a fixed height: a long ticket list on the left, the selected ticket on the right, each pane scrolling on its own.
+ * @hint Scroll either pane — the toolbar and the other pane stay put
+ */
+import * as React from "react";
+
+import { Badge, Button, Input, ListDetail } from "@monkey-mini-app/ui";
+
+type Ticket = {
+  id: string;
+  title: string;
+  status: "Open" | "InProgress" | "Blocked";
+  owner: string;
+  updated: string;
+};
+
+const TICKETS: Ticket[] = Array.from({ length: 40 }, (_, i) => ({
+  id: `OPS-${1040 - i}`,
+  title: [
+    "Nightly export drops the last sheet",
+    "Queue depth alarm fires on restart",
+    "Retry button re-sends twice",
+    "Timezone shifts in the weekly digest",
+    "Attachment preview stalls on large PDFs",
+  ][i % 5],
+  status: (["Open", "InProgress", "Blocked"] as const)[i % 3],
+  owner: ["amy", "bo", "cy", "dee"][i % 4],
+  updated: `${(i % 9) + 1}h ago`,
+}));
+
+export default function ListDetail01Example() {
+  const [query, setQuery] = React.useState("");
+  const [selected, setSelected] = React.useState<string | null>(null);
+  const [mobileView, setMobileView] = React.useState<"list" | "detail">("list");
+
+  const rows = TICKETS.filter((t) => (t.title + t.id).toLowerCase().includes(query.toLowerCase()));
+  const current = rows.find((t) => t.id === selected) ?? null;
+
+  return (
+    <div className="h-[420px]">
+      <ListDetail
+        toolbar={
+          <div className="flex items-center gap-2 border-b px-3 py-2">
+            <Input
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder="Search tickets"
+              className="h-8 max-w-60"
+            />
+            <Badge variant="outline">
+              {rows.length} of {TICKETS.length}
+            </Badge>
+          </div>
+        }
+        list={
+          <ul className="divide-border divide-y">
+            {rows.map((t) => (
+              <li key={t.id}>
+                <button
+                  type="button"
+                  onClick={() => {
+                    setSelected(t.id);
+                    setMobileView("detail");
+                  }}
+                  className={`hover:bg-muted/60 flex w-full flex-col items-start gap-1 px-3 py-2 text-left ${
+                    t.id === selected ? "bg-muted" : ""
+                  }`}
+                >
+                  <span className="text-muted-foreground font-mono text-xs">{t.id}</span>
+                  <span className="text-sm">{t.title}</span>
+                </button>
+              </li>
+            ))}
+          </ul>
+        }
+        detail={
+          current ? (
+            <div className="flex flex-col gap-3 p-4">
+              <div className="flex items-center gap-2">
+                <span className="font-mono text-xs">{current.id}</span>
+                <Badge>{current.status}</Badge>
+              </div>
+              <h3 className="font-heading font-medium">{current.title}</h3>
+              <dl className="text-muted-foreground grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-sm">
+                <dt>Owner</dt>
+                <dd>{current.owner}</dd>
+                <dt>Updated</dt>
+                <dd>{current.updated}</dd>
+              </dl>
+              <ul className="text-muted-foreground flex flex-col gap-1 text-sm">
+                {Array.from({ length: 30 }, (_, i) => (
+                  <li key={i}>
+                    Activity {i + 1}: {current.owner} touched {current.id}
+                  </li>
+                ))}
+              </ul>
+              <div>
+                <Button size="sm" variant="outline" onClick={() => setSelected(null)}>
+                  Clear selection
+                </Button>
+              </div>
+            </div>
+          ) : undefined
+        }
+        empty={
+          <div className="text-muted-foreground p-6 text-sm">
+            Select a ticket on the left. Both panes scroll independently — this one included.
+          </div>
+        }
+        mobileView={mobileView}
+        onMobileBack={() => setMobileView("list")}
+      />
+    </div>
+  );
+}

package/skills/monkey-mini-app/references/examples/log-viewer/log-viewer-01.tsx

@@ -0,0 +1,20 @@
+/**
+ * @exampleOf LogViewer
+ * @title LogViewer
+ * @scenario Thousands of streamed log lines: virtualised rows with level colouring and auto-follow; never render logs with a plain map.
+ */
+import { LogViewer } from "@monkey-mini-app/ui";
+
+export default function LogViewer01Example() {
+  return (
+    <>
+      <LogViewer
+        entries={Array.from({ length: 40 }, (_, i) => ({
+          level: (["info", "warn", "error", "debug", "verbose"] as const)[i % 5],
+          message: `line ${i}`,
+          timestamp: new Date(2026, 0, 1, 12, 0, i % 60).toISOString(),
+        }))}
+      />
+    </>
+  );
+}

package/skills/monkey-mini-app/references/examples/markdown-editor/markdown-editor-01.tsx

@@ -0,0 +1,18 @@
+/**
+ * @exampleOf MarkdownEditor
+ * @title MarkdownEditor
+ * @scenario Write markdown with a live preview pane and a mode toggle (edit / split / preview) for docs and descriptions.
+ * @hint Left CodeMirror, right live GFM preview
+ */
+import * as React from "react";
+
+import { MarkdownEditor } from "@monkey-mini-app/ui";
+
+export default function MarkdownEditor01Example() {
+  const [md, setMd] = React.useState(
+    "# Title\n\n**bold**, a [link](https://example.com), and a task:\n\n- [x] Review grid\n- [ ] Ship demo\n",
+  );
+  const [mdMode, setMdMode] = React.useState<"edit" | "split" | "preview">("split");
+
+  return <MarkdownEditor value={md} onChange={setMd} mode={mdMode} onModeChange={setMdMode} />;
+}

package/skills/monkey-mini-app/references/examples/marker/marker-01.tsx

@@ -0,0 +1,16 @@
+/**
+ * @exampleOf Marker
+ * @title Marker
+ * @scenario Small inline marker (icon + text) used to annotate a list row or timeline step with its state/file type.
+ */
+import { Marker, MarkerContent } from "@monkey-mini-app/ui";
+
+export default function Marker01Example() {
+  return (
+    <>
+      <Marker>
+        <MarkerContent>Explored 4 files</MarkerContent>
+      </Marker>
+    </>
+  );
+}

package/skills/monkey-mini-app/references/examples/mini-calendar/mini-calendar-01.tsx

@@ -0,0 +1,14 @@
+/**
+ * @exampleOf MiniCalendar
+ * @title MiniCalendar
+ * @scenario An always-visible inline calendar (no popover) — side rail of a scheduler, or date filtered next to a list.
+ */
+import * as React from "react";
+
+import { MiniCalendar } from "@monkey-mini-app/ui";
+
+export default function MiniCalendar01Example() {
+  const [mini, setMini] = React.useState<Date | undefined>(new Date());
+
+  return <MiniCalendar value={mini} onChange={setMini} />;
+}

package/skills/monkey-mini-app/references/examples/misc-charts-blocks/misc-charts-blocks-01.tsx

@@ -0,0 +1,20 @@
+/**
+ * @group charts-blocks
+ * @title PageHeader / FilterBar
+ * @scenario Page chrome working together: PageHeader (title + description + primary action) with a FilterBar row beneath — the standard screen top for list/monitor pages.
+ */
+import { Button, FilterBar, Input, PageHeader } from "@monkey-mini-app/ui";
+
+export default function MiscChartsBlocks01Example() {
+  return (
+    <>
+      <PageHeader title="QA Runs" description="Latest CI" actions={<Button size="sm">New</Button>} />
+      <FilterBar>
+        <Input placeholder="Filter…" className="max-w-xs" />
+        <Button variant="outline" size="sm">
+          Apply
+        </Button>
+      </FilterBar>
+    </>
+  );
+}

package/skills/monkey-mini-app/references/examples/misc-charts-blocks/misc-charts-blocks-02.tsx

@@ -0,0 +1,32 @@
+/**
+ * @group charts-blocks
+ * @title StatCard / TrendCard / Sparkline / Gauge / ProgressRing
+ * @scenario KPI strip: StatCard for numbers with delta, TrendCard adding a sparkline, plus Sparkline/Gauge/ProgressRing for compact meters in one row.
+ */
+import { Gauge, ProgressRing, Sparkline, StatCard, TrendCard } from "@monkey-mini-app/ui";
+
+const trend = [
+  { label: "Mon", value: 12 },
+  { label: "Tue", value: 18 },
+  { label: "Wed", value: 9 },
+  { label: "Thu", value: 22 },
+  { label: "Fri", value: 16 },
+];
+
+export default function MiscChartsBlocks02Example() {
+  return (
+    <>
+      <div className="grid gap-3 md:grid-cols-3">
+        <StatCard title="Runs" value="128" delta="+12%" trend="up" />
+        <TrendCard title="Throughput" value="22" delta="+4" trend="up" data={trend} />
+        <div className="flex flex-wrap items-center gap-3">
+          <div className="w-32">
+            <Sparkline data={trend} />
+          </div>
+          <Gauge value={72} label="Pass rate" size={64} />
+          <ProgressRing value={72} />
+        </div>
+      </div>
+    </>
+  );
+}

package/skills/monkey-mini-app/references/examples/misc-charts-blocks/misc-charts-blocks-03.tsx

@@ -0,0 +1,47 @@
+/**
+ * @group charts-blocks
+ * @title Donut / StackedBar / Radar
+ * @scenario Recharts-backed set: DonutChart for share-of-total, StackedBarChart for composition over time, RadarChart for multi-axis scorecards — all fed plain arrays.
+ */
+import { DonutChart, RadarChart, StackedBarChart } from "@monkey-mini-app/ui";
+
+export default function MiscChartsBlocks03Example() {
+  return (
+    <>
+      <div className="grid items-center gap-4 md:grid-cols-3">
+        <DonutChart
+          size={190}
+          center="128"
+          config={{
+            pass: { label: "Pass", color: "var(--chart-1)" },
+            fail: { label: "Fail", color: "var(--chart-2)" },
+          }}
+          data={[
+            { name: "pass", value: 90, fill: "var(--color-pass)" },
+            { name: "fail", value: 38, fill: "var(--color-fail)" },
+          ]}
+        />
+        <StackedBarChart
+          keys={["pass", "fail"]}
+          config={{
+            pass: { label: "Pass", color: "var(--chart-1)" },
+            fail: { label: "Fail", color: "var(--chart-2)" },
+          }}
+          data={[
+            { label: "Mon", pass: 12, fail: 2 },
+            { label: "Tue", pass: 18, fail: 1 },
+          ]}
+        />
+        <RadarChart
+          size={190}
+          config={{ value: { label: "Score", color: "var(--chart-1)" } }}
+          data={[
+            { label: "A", value: 80 },
+            { label: "B", value: 60 },
+            { label: "C", value: 90 },
+          ]}
+        />
+      </div>
+    </>
+  );
+}

package/skills/monkey-mini-app/references/examples/misc-charts-blocks/misc-charts-blocks-04.tsx

@@ -0,0 +1,20 @@
+/**
+ * @group charts-blocks
+ * @title StatusBadge / SeverityChip / EnvBadge
+ * @scenario Status vocabulary in one view: StatusBadge (pass/fail/flaky, lowercase statuses), SeverityChip (P0–P3) and EnvBadge (dev/stg/prd) so triage rows read consistently.
+ */
+import { EnvBadge, SeverityChip, StatusBadge } from "@monkey-mini-app/ui";
+
+export default function MiscChartsBlocks04Example() {
+  return (
+    <>
+      <div className="flex flex-wrap gap-2">
+        <StatusBadge status="pass" />
+        <StatusBadge status="fail" />
+        <StatusBadge status="flaky" />
+        <SeverityChip severity="P0" />
+        <EnvBadge env="stg" />
+      </div>
+    </>
+  );
+}

package/skills/monkey-mini-app/references/examples/misc-charts-blocks/misc-charts-blocks-05.tsx

@@ -0,0 +1,24 @@
+/**
+ * @group charts-blocks
+ * @title ActivityFeed / NotificationCenter / CommentThread / TestStepList
+ * @scenario Feed-style blocks: ActivityFeed, NotificationCenter and CommentThread share an items-in / rows-out shape; TestStepList shows pass/fail steps per case.
+ */
+import { ActivityFeed, CommentThread, NotificationCenter, TestStepList } from "@monkey-mini-app/ui";
+
+export default function MiscChartsBlocks05Example() {
+  return (
+    <>
+      <div className="grid gap-4 md:grid-cols-2">
+        <ActivityFeed items={[{ id: "1", title: "Deployed", time: "10:00" }]} />
+        <NotificationCenter items={[{ id: "1", title: "Build failed", body: "login-spec" }]} />
+        <CommentThread comments={[{ id: "1", author: "Ada", body: "Looks good", time: "now" }]} />
+        <TestStepList
+          steps={[
+            { id: "1", title: "Login", status: "pass" },
+            { id: "2", title: "Checkout", status: "fail" },
+          ]}
+        />
+      </div>
+    </>
+  );
+}

package/skills/monkey-mini-app/references/examples/misc-charts-blocks/misc-charts-blocks-06.tsx

@@ -0,0 +1,89 @@
+/**
+ * @group charts-blocks
+ * @title DescriptionList / RequestInspector / Terminal / FileTree / AttachmentGallery
+ * @scenario Inspect/debug kit on one screen: DescriptionList for metadata, RequestInspector for a method/url/response, Terminal for command output, FileTree and AttachmentGallery for artifacts.
+ */
+import {
+  AttachmentGallery,
+  DescriptionList,
+  FileTree,
+  RequestInspector,
+  Terminal,
+} from "@monkey-mini-app/ui";
+
+const REQUEST = JSON.stringify(
+  {
+    buildId: 4812,
+    reason: "flaky: VehicleDamageSpec.TimeoutWhenQueueFull",
+    keepArtifacts: true,
+    notify: ["pwang12"],
+  },
+  null,
+  2,
+);
+
+const RESPONSE = JSON.stringify(
+  {
+    ok: true,
+    data: {
+      buildId: 4813,
+      status: "queued",
+      runner: "macstadium-07",
+      estimatedSeconds: 420,
+    },
+    traceId: "6f2c1a48d0b74e1f",
+  },
+  null,
+  2,
+);
+
+export default function MiscChartsBlocks06Example() {
+  return (
+    <div className="flex flex-col gap-3">
+      <DescriptionList
+        items={[
+          { label: "Pipeline", value: "gls-2.0 / api-cn-stg" },
+          { label: "Build", value: "#4812 · failed after 7m 12s" },
+          { label: "Commit", value: "a3f9c21 fix(veh): 排班道闸超时改 30s" },
+          { label: "Triggered by", value: "pwang12 (manual retry #1)" },
+        ]}
+      />
+      <RequestInspector
+        method="POST"
+        url="/api/v2/pipelines/gls-2.0/builds/4812/retry"
+        request={REQUEST}
+        response={RESPONSE}
+      />
+      <Terminal
+        lines={[
+          "$ pnpm vitest run tests/vehicle-damage.spec.ts",
+          "",
+          " RUN  v4.1.10  packages/api",
+          " ✓ tests/vehicle-damage.spec.ts > list damages by lane",
+          " × tests/vehicle-damage.spec.ts > timeout when queue is full",
+          "   → expected 200 to be 202 // retried 3 times in 30s",
+          "",
+          " Test Files  1 failed | 41 passed (42)",
+          "      Tests  1 failed | 588 passed (589)",
+          "   Duration  31.44s (transform 4.2s, setup 0ms, collect 18.9s)",
+        ]}
+      />
+      <FileTree
+        nodes={[
+          {
+            id: "artifacts",
+            label: "artifacts/",
+            children: [
+              { id: "logs", label: "logs/", children: [{ id: "api", label: "api-cn-stg.log" }] },
+              { id: "cov", label: "coverage/" },
+              { id: "xml", label: "junit.xml" },
+            ],
+          },
+        ]}
+      />
+      <AttachmentGallery
+        files={[{ name: "failure-screen.png" }, { name: "api-cn-stg.log" }, { name: "junit.xml" }]}
+      />
+    </div>
+  );
+}

package/skills/monkey-mini-app/references/examples/misc-editors/misc-editors-01.tsx

@@ -0,0 +1,114 @@
+/**
+ * @group editors
+ * @title DiffViewer
+ * @scenario DiffViewer driven by app state — switch files and unified/split mode from a toolbar, the shape of a PR review screen.
+ * @hint PR-style hunks, line numbers, unified/split
+ */
+import * as React from "react";
+
+import { Button, DiffViewer } from "@monkey-mini-app/ui";
+
+const DIFFS = {
+  "src/products/data-grid.tsx": {
+    original: `export function DataGrid({ columns, data }) {
+  const [sorting, setSorting] = React.useState([])
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  })
+
+  return (
+    <div>
+      <Table>
+        <TableHeader>{/* headers */}</TableHeader>
+        <TableBody>{/* rows */}</TableBody>
+      </Table>
+    </div>
+  )
+}
+`,
+    modified: `export function DataGrid({ columns, data, features }) {
+  const [sorting, setSorting] = React.useState([])
+  const [columnFilters, setColumnFilters] = React.useState([])
+  const [globalFilter, setGlobalFilter] = React.useState("")
+  const table = useReactTable({
+    data,
+    columns,
+    state: { sorting, columnFilters, globalFilter },
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+  })
+
+  return (
+    <div data-testid="data-grid">
+      <Toolbar table={table} />
+      <Table>
+        <TableHeader>{/* sortable headers */}</TableHeader>
+        <TableBody>{/* virtualized rows */}</TableBody>
+      </Table>
+      <Pagination table={table} />
+    </div>
+  )
+}
+`,
+  },
+  "src/products/kanban.tsx": {
+    original: `export type KanbanCard = {
+  id: string
+  title: string
+  columnId: string
+}
+`,
+    modified: `export type KanbanCard = {
+  id: string
+  title: string
+  columnId: string
+  key?: string
+  assignee?: string
+  tags?: string[]
+  priority?: string
+  comments?: KanbanComment[]
+}
+`,
+  },
+};
+
+function DiffPlayground() {
+  const files = Object.keys(DIFFS) as (keyof typeof DIFFS)[];
+  const [file, setFile] = React.useState<(typeof files)[number]>(files[0]);
+  const [mode, setMode] = React.useState<"unified" | "split">("unified");
+  const current = DIFFS[file];
+  return (
+    <div className="space-y-2">
+      <div className="flex flex-wrap gap-1">
+        {files.map((name) => (
+          <Button
+            key={name}
+            size="sm"
+            variant={file === name ? "default" : "outline"}
+            onClick={() => setFile(name)}
+          >
+            {name.split("/").at(-1)}
+          </Button>
+        ))}
+        <Button
+          size="sm"
+          variant="outline"
+          className="ml-auto"
+          data-testid="diff-mode-toggle"
+          onClick={() => setMode((m) => (m === "unified" ? "split" : "unified"))}
+        >
+          {mode}
+        </Button>
+      </div>
+      <DiffViewer fileName={file} original={current.original} modified={current.modified} mode={mode} />
+    </div>
+  );
+}
+
+export default function MiscEditors01Example() {
+  return <DiffPlayground />;
+}