@maidang1/hataraku 0.0.3

package/.claude/CLAUDE.md

@@ -0,0 +1,21 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Development Commands
+
+- `bun run src/index.ts` - Run the application
+- `bun --hot src/index.ts` - Run with hot reload for development
+- `bunx tsc -p tsconfig.json --noEmit` - Typecheck
+- `bun run test-e2e.ts` - Run e2e smoke checks
+
+## Project
+
+- Name: coding
+
+## Architecture Overview
+
+- `src/index.ts` - Entry
+- `src/cli/` - CLI bootstrap (Ink render + wiring)
+- `src/render/` - Ink UI components and Jotai state
+- `src/core/` - Core logic (agent, tools, MCP, skills, config, safety, logging)

package/.codex/skills/beautiful-mermaid/SKILL.md

@@ -0,0 +1,171 @@
+---
+name: beautiful-mermaid
+description: Render Mermaid diagrams as SVG and PNG using the Beautiful Mermaid library. Use when the user asks to render a Mermaid diagram.
+---
+
+# Beautiful Mermaid Diagram Rendering
+
+Render Mermaid diagrams as SVG and PNG images using the Beautiful Mermaid library.
+
+## Dependencies
+
+This skill requires the `agent-browser` skill for PNG rendering. Load it before proceeding with PNG capture.
+
+## Supported Diagram Types
+
+- **Flowchart** - Process flows, decision trees, CI/CD pipelines
+- **Sequence** - API calls, OAuth flows, database transactions
+- **State** - State machines, connection lifecycles
+- **Class** - UML class diagrams, design patterns
+- **Entity-Relationship** - Database schemas, data models
+
+## Available Themes
+
+Default, Dracula, Solarized, Zinc Dark, Tokyo Night, Tokyo Night Storm, Tokyo Night Light, Catppuccin Latte, Nord, Nord Light, GitHub Dark, GitHub Light, One Dark.
+
+If no theme is specified, use `default`.
+
+## Common Syntax Patterns
+
+### Flowchart Edge Labels
+
+Use pipe syntax for edge labels:
+
+```mermaid
+A -->|label| B
+A ---|label| B
+```
+
+Avoid space-dash syntax which can cause incomplete renders:
+
+```mermaid
+A -- label --> B   # May cause issues
+```
+
+### Node Labels with Special Characters
+
+Wrap labels containing special characters in quotes:
+
+```mermaid
+A["Label with (parens)"]
+B["Label with / slash"]
+```
+
+## Workflow
+
+### Step 1: Generate or Validate Mermaid Code
+
+If the user provides a description rather than code, generate valid Mermaid syntax. Consult `references/mermaid-syntax.md` for full syntax details.
+
+### Step 2: Render SVG
+
+Run the rendering script to produce an SVG file:
+
+```bash
+bun run scripts/render.ts --code "graph TD; A-->B" --output diagram --theme default
+```
+
+Or from a file:
+
+```bash
+bun run scripts/render.ts --input diagram.mmd --output diagram --theme tokyo-night
+```
+
+Alternative runtimes:
+```bash
+npx tsx scripts/render.ts --code "..." --output diagram
+deno run --allow-read --allow-write --allow-net scripts/render.ts --code "..." --output diagram
+```
+
+This produces `<output>.svg` in the current working directory.
+
+### Step 3: Create HTML Wrapper
+
+Run the HTML wrapper script to prepare for screenshot:
+
+```bash
+bun run scripts/create-html.ts --svg diagram.svg --output diagram.html
+```
+
+This creates a minimal HTML file that displays the SVG with proper padding and background.
+
+### Step 4: Capture High-Resolution PNG with agent-browser
+
+Use the agent-browser CLI to capture a high-quality screenshot. Refer to the `agent-browser` skill for full CLI documentation.
+
+```bash
+# Set 4K viewport for high-resolution capture
+agent-browser set viewport 3840 2160
+
+# Open the HTML wrapper
+agent-browser open "file://$(pwd)/diagram.html"
+
+# Wait for render to complete
+agent-browser wait 1000
+
+# Capture full-page screenshot
+agent-browser screenshot --full diagram.png
+
+# Close browser
+agent-browser close
+```
+
+For even higher resolution on complex diagrams, increase the viewport further or use the `--padding` option when creating the HTML wrapper to give the diagram more space.
+
+### Step 5: Clean Up Intermediary Files
+
+After rendering, remove all intermediary files. Only the final `.svg` and `.png` should remain.
+
+Files to clean up:
+- The HTML wrapper file (e.g., `diagram.html`)
+- Any temporary `.mmd` files created to hold diagram code
+- Any other files created during the rendering process
+
+```bash
+rm diagram.html
+```
+
+If a temporary `.mmd` file was created, remove it as well.
+
+## Output
+
+Both outputs are always produced:
+- **SVG**: Vector format, infinitely scalable, small file size
+- **PNG**: High-resolution raster, captured at 4K (3840×2160) viewport with minimum 1200px diagram width
+
+Files are saved to the current working directory unless the user explicitly specifies a different path.
+
+## Theme Selection Guide
+
+| Theme | Background | Best For |
+|-------|------------|----------|
+| default | Light grey | General use |
+| dracula | Dark purple | Dark mode preference |
+| tokyo-night | Dark blue | Modern dark aesthetic |
+| tokyo-night-storm | Darker blue | Higher contrast |
+| nord | Dark arctic | Muted, calm visuals |
+| nord-light | Light arctic | Light mode with soft tones |
+| github-dark | GitHub dark | Matches GitHub UI |
+| github-light | GitHub light | Matches GitHub UI |
+| catppuccin-latte | Warm light | Soft pastel aesthetic |
+| solarized | Tan/cream | Solarized colour scheme |
+| one-dark | Atom dark | Atom editor aesthetic |
+| zinc-dark | Neutral dark | Minimal, no colour bias |
+
+## Troubleshooting
+
+### Theme not applied
+
+Check the render script output for the `bg` and `fg` values, or inspect the SVG's opening tag for `--bg` and `--fg` CSS custom properties.
+
+### Diagram appears cut off or incomplete
+
+- Check edge label syntax — use `-->|label|` pipe notation, not `-- label -->`
+- Verify all node IDs are unique
+- Check for unclosed brackets in node labels
+
+### Render produces empty or malformed SVG
+
+- Validate Mermaid syntax at https://mermaid.live before rendering
+- Check for special characters that need escaping (wrap in quotes)
+- Ensure flowchart direction is specified (`graph TD`, `graph LR`, etc.)

package/.codex/skills/beautiful-mermaid/references/mermaid-syntax.md

@@ -0,0 +1,235 @@
+# Mermaid Syntax Reference
+
+Quick reference for generating valid Mermaid diagram code.
+
+## Flowchart
+
+```mermaid
+graph TD
+    A[Start] --> B{Decision}
+    B -->|Yes| C[Action 1]
+    B -->|No| D[Action 2]
+    C --> E[End]
+    D --> E
+```
+
+### Direction
+- `TD` / `TB` - Top to bottom
+- `BT` - Bottom to top
+- `LR` - Left to right
+- `RL` - Right to left
+
+### Node Shapes
+- `A[Text]` - Rectangle
+- `A(Text)` - Rounded rectangle
+- `A([Text])` - Stadium/pill
+- `A[[Text]]` - Subroutine
+- `A[(Text)]` - Cylinder (database)
+- `A((Text))` - Circle
+- `A>Text]` - Asymmetric
+- `A{Text}` - Diamond (decision)
+- `A{{Text}}` - Hexagon
+- `A[/Text/]` - Parallelogram
+- `A[\Text\]` - Parallelogram alt
+- `A[/Text\]` - Trapezoid
+- `A[\Text/]` - Trapezoid alt
+
+### Edge Styles
+- `A --> B` - Arrow
+- `A --- B` - Line
+- `A -.-> B` - Dotted arrow
+- `A ==> B` - Thick arrow
+- `A -->|text| B` - Arrow with label (preferred)
+- `A ---|text| B` - Line with label (preferred)
+
+**Important**: Always use pipe syntax `-->|label|` for edge labels. The space-dash syntax `-- label -->` can cause incomplete renders.
+
+### Subgraphs
+```mermaid
+graph TD
+    subgraph Group1 [Label]
+        A --> B
+    end
+    subgraph Group2
+        C --> D
+    end
+    B --> C
+```
+
+## Sequence Diagram
+
+```mermaid
+sequenceDiagram
+    participant A as Alice
+    participant B as Bob
+    A->>B: Hello
+    B-->>A: Hi there
+    A->>+B: Start process
+    B-->>-A: Done
+```
+
+### Arrow Types
+- `->>` - Solid arrow
+- `-->>` - Dashed arrow
+- `-x` - Solid with x
+- `--x` - Dashed with x
+- `-)` - Solid open arrow
+- `--)` - Dashed open arrow
+
+### Activations
+- `+` after arrow activates participant
+- `-` after arrow deactivates participant
+
+### Notes and Boxes
+```mermaid
+sequenceDiagram
+    Note over A,B: Shared note
+    Note right of A: Side note
+    rect rgb(200, 220, 255)
+        A->>B: In a box
+    end
+```
+
+### Loops and Conditionals
+```mermaid
+sequenceDiagram
+    loop Every minute
+        A->>B: Ping
+    end
+    alt Success
+        B-->>A: Pong
+    else Failure
+        B-->>A: Error
+    end
+    opt Optional
+        A->>B: Extra step
+    end
+```
+
+## State Diagram
+
+```mermaid
+stateDiagram-v2
+    [*] --> Idle
+    Idle --> Processing : start
+    Processing --> Done : complete
+    Processing --> Error : fail
+    Error --> Idle : reset
+    Done --> [*]
+```
+
+### Composite States
+```mermaid
+stateDiagram-v2
+    state Active {
+        [*] --> Running
+        Running --> Paused : pause
+        Paused --> Running : resume
+    }
+    Idle --> Active : activate
+    Active --> Idle : deactivate
+```
+
+### Notes
+```mermaid
+stateDiagram-v2
+    State1 : Description here
+    note right of State1
+        Additional info
+    end note
+```
+
+## Class Diagram
+
+```mermaid
+classDiagram
+    class Animal {
+        +String name
+        +int age
+        +makeSound() void
+    }
+    class Dog {
+        +bark() void
+    }
+    Animal <|-- Dog : extends
+```
+
+### Relationships
+- `<|--` - Inheritance
+- `*--` - Composition
+- `o--` - Aggregation
+- `-->` - Association
+- `--` - Link (solid)
+- `..>` - Dependency
+- `..|>` - Realisation
+- `..` - Link (dashed)
+
+### Cardinality
+```mermaid
+classDiagram
+    Customer "1" --> "*" Order
+    Order "1" --> "1..*" LineItem
+```
+
+### Visibility
+- `+` Public
+- `-` Private
+- `#` Protected
+- `~` Package/Internal
+
+## Entity-Relationship Diagram
+
+```mermaid
+erDiagram
+    CUSTOMER ||--o{ ORDER : places
+    ORDER ||--|{ LINE-ITEM : contains
+    PRODUCT }|..|{ LINE-ITEM : "ordered in"
+```
+
+### Relationship Types
+- `||` - Exactly one
+- `|{` - One or more
+- `o{` - Zero or more
+- `o|` - Zero or one
+
+### Identifying vs Non-identifying
+- `--` - Identifying (solid)
+- `..` - Non-identifying (dashed)
+
+### Attributes
+```mermaid
+erDiagram
+    CUSTOMER {
+        string id PK
+        string name
+        string email UK
+    }
+    ORDER {
+        int id PK
+        string customer_id FK
+        date created_at
+    }
+```
+
+## Styling
+
+### CSS Classes
+```mermaid
+graph TD
+    A:::highlight --> B
+    classDef highlight fill:#f96,stroke:#333
+```
+
+### Inline Styles
+```mermaid
+graph TD
+    A --> B
+    style A fill:#bbf,stroke:#333
+```
+
+## Tips
+
+1. **Escape special characters**: Use quotes for labels with special chars: `A["Label with (parens)"]`
+2. **Multi-line labels**: Use `<br/>` for line breaks
+3. **Comments**: Use `%%` for comments that won't render
+4. **IDs vs Labels**: Node IDs should be simple, labels can be complex: `node1["Complex Label Here"]`

package/.codex/skills/beautiful-mermaid/scripts/create-html.ts

@@ -0,0 +1,177 @@
+#!/usr/bin/env -S npx tsx
+/**
+ * Create an HTML wrapper for an SVG to enable high-quality PNG capture
+ *
+ * Usage:
+ *   bun run create-html.ts --svg diagram.svg --output diagram.html
+ *   bun run create-html.ts --svg diagram.svg --output diagram.html --padding 40
+ *
+ * Runtimes:
+ *   bun run create-html.ts ...
+ *   npx tsx create-html.ts ...
+ *   deno run --allow-read --allow-write create-html.ts ...
+ */
+
+import { readFileSync, writeFileSync, existsSync } from "node:fs";
+import { resolve, basename } from "node:path";
+
+interface Args {
+  svg: string;
+  output: string;
+  padding: number;
+  background?: string;
+}
+
+function parseArgs(): Args {
+  const args = process.argv.slice(2);
+  const result: Partial<Args> = { padding: 40 };
+
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+    const next = args[i + 1];
+
+    switch (arg) {
+      case "--svg":
+      case "-s":
+        result.svg = next;
+        i++;
+        break;
+      case "--output":
+      case "-o":
+        result.output = next;
+        i++;
+        break;
+      case "--padding":
+      case "-p":
+        result.padding = parseInt(next, 10) || 40;
+        i++;
+        break;
+      case "--background":
+      case "-b":
+        result.background = next;
+        i++;
+        break;
+      case "--help":
+      case "-h":
+        printHelp();
+        process.exit(0);
+    }
+  }
+
+  if (!result.svg) {
+    console.error("Error: --svg is required");
+    printHelp();
+    process.exit(1);
+  }
+
+  if (!result.output) {
+    console.error("Error: --output is required");
+    printHelp();
+    process.exit(1);
+  }
+
+  return result as Args;
+}
+
+function printHelp(): void {
+  console.log(`
+SVG to HTML Wrapper
+
+Creates a minimal HTML file for screenshot capture of SVG diagrams.
+
+Usage:
+  create-html.ts --svg <file.svg> --output <file.html> [options]
+
+Options:
+  -s, --svg <file>         Input SVG file
+  -o, --output <file>      Output HTML file
+  -p, --padding <pixels>   Padding around SVG (default: 40)
+  -b, --background <color> Background colour (auto-detected from SVG)
+  -h, --help               Show this help
+
+Examples:
+  create-html.ts --svg diagram.svg --output diagram.html
+  create-html.ts --svg diagram.svg --output diagram.html --padding 60
+  create-html.ts --svg diagram.svg --output diagram.html --background "#1a1b26"
+`);
+}
+
+function extractBackgroundFromSvg(svgContent: string): string | null {
+  // Try to extract background from SVG style or rect
+  const bgMatch = svgContent.match(/background(?:-color)?:\s*([^;"\s]+)/i);
+  if (bgMatch) return bgMatch[1];
+
+  // Check for a background rect
+  const rectMatch = svgContent.match(
+    /<rect[^>]*fill="([^"]+)"[^>]*(?:width="100%"|height="100%")/i
+  );
+  if (rectMatch) return rectMatch[1];
+
+  // Check style attribute on svg element
+  const svgStyleMatch = svgContent.match(
+    /<svg[^>]*style="[^"]*background(?:-color)?:\s*([^;"\s]+)/i
+  );
+  if (svgStyleMatch) return svgStyleMatch[1];
+
+  return null;
+}
+
+function main(): void {
+  const args = parseArgs();
+
+  const svgPath = resolve(args.svg);
+  if (!existsSync(svgPath)) {
+    console.error(`SVG file not found: ${svgPath}`);
+    process.exit(1);
+  }
+
+  const svgContent = readFileSync(svgPath, "utf-8");
+
+  // Determine background colour
+  const background =
+    args.background ?? extractBackgroundFromSvg(svgContent) ?? "#ffffff";
+
+  // Create HTML wrapper optimised for high-resolution screenshot
+  // SVG renders at natural size with generous padding, no constraints
+  const html = `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${basename(args.svg, ".svg")}</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    html, body {
+      background: ${background};
+    }
+    .container {
+      padding: ${args.padding}px;
+      display: inline-block;
+      background: ${background};
+    }
+    .container svg {
+      display: block;
+      min-width: 1200px;
+      height: auto;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    ${svgContent}
+  </div>
+</body>
+</html>`;
+
+  const outputPath = resolve(args.output);
+  writeFileSync(outputPath, html, "utf-8");
+
+  console.log(`HTML wrapper written to: ${outputPath}`);
+  console.log(`Background colour: ${background}`);
+}
+
+main();