Files
scarf/README.md
T
Alan Wizemann 2a3e8b1422 Add webview widget for embedded web browser in project dashboards
New widget type that renders any URL (local dev servers, HTML reports)
directly in the dashboard via WKWebView. Sections with webviews
automatically split layout: grid widgets left, webview right.
Configurable height, non-persistent data store, navigation error logging.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-02 10:29:05 -04:00

13 KiB
Raw Blame History

Scarf app icon

Scarf

A native macOS companion app for the Hermes AI agent.
Full visibility into what Hermes is doing, when, and what it creates.

macOS Swift License

Buy Me a Coffee

Features

  • Dashboard — System health, token usage, recent sessions with live refresh
  • Insights — Usage analytics with token breakdown, model/platform stats, top tools bar chart, activity heatmaps, notable sessions, and time period filtering (7/30/90 days or all time)
  • Sessions Browser — Full conversation history with message rendering, tool call inspection, full-text search, rename, delete, and JSONL export
  • Activity Feed — Recent tool execution log with filtering by kind and session, detail inspector with pretty-printed arguments
  • Live Chat — Embedded terminal running hermes chat with full ANSI color and Rich formatting via SwiftTerm, session persistence across navigation, resume/continue previous sessions, and voice mode controls
  • Memory Viewer/Editor — View and edit Hermes's MEMORY.md and USER.md with live file-watcher refresh
  • Skills Browser — Browse all installed skills by category with file content viewer and file switcher
  • Tools Manager — Enable/disable toolsets per platform (CLI, Telegram, Discord, etc.) with toggle switches, MCP server status
  • Gateway Control — Start/stop/restart the messaging gateway, view platform connection status, manage user pairing (approve/revoke)
  • Cron Manager — View scheduled jobs, their status, prompts, and output
  • Log Viewer — Real-time log tailing with level filtering and text search
  • Project Dashboards — Custom, agent-generated dashboards for any project. Define stat boxes, charts, tables, progress bars, checklists, rich text, and embedded web views in a simple JSON file — Scarf renders them with live refresh. Let your Hermes agent build and maintain project-specific visualizations automatically
  • Settings — Structured config editor for all Hermes settings
  • Menu Bar — Status icon showing Hermes running state with quick actions

Requirements

  • macOS 26.2+
  • Xcode 26.3+
  • Hermes agent v0.6.0+ installed at ~/.hermes/

Compatibility

Scarf reads Hermes's SQLite database (schema v6) and parses CLI output from hermes status, hermes doctor, hermes tools, hermes sessions, hermes gateway, and hermes pairing. Tested and verified against:

Hermes Version Status
v0.6.0 (2026-03-30) Verified
v0.6.0 (2026-03-31, latest) Verified

If a Hermes update changes the database schema or CLI output format, Scarf may need to be updated. Check the Health view for compatibility warnings.

Install

Pre-built Binary (no Xcode required)

Download the latest universal binary (Apple Silicon + Intel) from Releases:

  1. Download Scarf-vX.X.X-Universal.zip
  2. Unzip and drag Scarf.app to Applications
  3. On first launch, right-click and choose Open (or go to System Settings → Privacy & Security → Open Anyway)

Build from Source

git clone https://github.com/awizemann/scarf.git
cd scarf/scarf
open scarf.xcodeproj

Or from the command line:

xcodebuild -project scarf/scarf.xcodeproj -scheme scarf -configuration Release -arch arm64 -arch x86_64 ONLY_ACTIVE_ARCH=NO build

Architecture

Scarf follows the MVVM-Feature pattern with zero external dependencies beyond SwiftTerm:

scarf/
  Core/
    Models/       Plain data structs (HermesSession, HermesMessage, HermesConfig, etc.)
    Services/     Data access (SQLite reader, file I/O, log tailing, file watcher)
  Features/       Self-contained feature modules
    Dashboard/    System overview and stats
    Insights/     Usage analytics and activity patterns
    Sessions/     Conversation browser with rename, delete, export
    Activity/     Tool execution feed with inspector
    Projects/     Agent-generated project dashboards with widget rendering
    Chat/         Embedded terminal via SwiftTerm with voice controls
    Memory/       Memory viewer and editor
    Skills/       Skill browser by category
    Tools/        Toolset management per platform
    Gateway/      Messaging gateway control and pairing
    Cron/         Scheduled job viewer
    Logs/         Real-time log viewer
    Settings/     Structured config editor
  Navigation/     AppCoordinator + SidebarView

Data Sources

Scarf reads Hermes data directly from ~/.hermes/:

Source Format Access
state.db SQLite (WAL mode) Read-only
config.yaml YAML Read-only
memories/*.md Markdown Read/Write
cron/jobs.json JSON Read-only
logs/*.log Text Read-only
gateway_state.json JSON Read-only
skills/ Directory tree Read-only
hermes chat Terminal subprocess Interactive
hermes tools CLI commands Enable/Disable
hermes sessions CLI commands Rename/Delete/Export
hermes gateway CLI commands Start/Stop/Restart
hermes pairing CLI commands Approve/Revoke
.scarf/dashboard.json JSON (per-project) Read-only
scarf/projects.json JSON (registry) Read/Write

The app opens state.db in read-only mode to avoid WAL contention with Hermes. Management actions (tool toggles, session rename/delete/export) go through the Hermes CLI.

Dependencies

Package Purpose
SwiftTerm Terminal emulator for the Chat feature

Everything else uses system frameworks: SQLite3 C API, Foundation JSON, AttributedString markdown, SwiftUI Charts, GCD file watching.

How It Works

Scarf watches ~/.hermes/ for file changes and queries the SQLite database for sessions, messages, and analytics. Views refresh automatically when Hermes writes new data.

The Chat tab spawns hermes chat as a subprocess in a pseudo-terminal, giving you the full interactive CLI experience with proper ANSI rendering. Sessions persist across navigation — switch tabs and come back without losing your conversation.

Management actions (renaming sessions, toggling tools, editing memory) call the Hermes CLI or write directly to the appropriate files, keeping Scarf and Hermes in sync.

The app sandbox is disabled because Scarf needs direct access to ~/.hermes/ and the ability to spawn the Hermes binary.

Project Dashboards

Project Dashboards turn Scarf into a customizable monitoring hub for all your projects. You define a simple JSON file in your project folder describing what to display — stat boxes, charts, tables, progress bars, checklists, rich text, and embedded web views — and Scarf renders it as a live-updating dashboard. Your Hermes agent can generate and maintain these dashboards automatically.

What You Can Build

  • Development dashboards — test coverage, build status, open issues, sprint progress
  • Data project trackers — pipeline metrics, data quality scores, processing throughput
  • Deployment monitors — deploy history tables, uptime stats, error rate charts
  • Research dashboards — experiment results, key findings, paper status checklists
  • Agent activity views — cron job results, content generation stats, task completion rates
  • Any project status — if your agent can measure it, Scarf can display it

Quick Start

1. Create the dashboard file

Create .scarf/dashboard.json in any project folder:

{
  "version": 1,
  "title": "My Project",
  "description": "Project status at a glance",
  "sections": [
    {
      "title": "Overview",
      "columns": 3,
      "widgets": [
        {
          "type": "stat",
          "title": "Test Coverage",
          "value": "87%",
          "icon": "checkmark.shield",
          "color": "green",
          "subtitle": "+2.1% this week"
        },
        {
          "type": "progress",
          "title": "Sprint Progress",
          "value": 0.73,
          "label": "73% complete",
          "color": "blue"
        },
        {
          "type": "list",
          "title": "Tasks",
          "items": [
            { "text": "Write unit tests", "status": "done" },
            { "text": "Update API docs", "status": "active" },
            { "text": "Deploy to prod", "status": "pending" }
          ]
        }
      ]
    }
  ]
}

2. Register your project

In Scarf, go to Projects in the sidebar and click the + button to add your project folder. Or have your agent add it directly to the registry at ~/.hermes/scarf/projects.json:

{
  "projects": [
    { "name": "my-project", "path": "/Users/you/Developer/my-project" }
  ]
}

3. View in Scarf

Select your project in the Projects sidebar — the dashboard renders immediately. Scarf watches the file for changes and refreshes automatically whenever the JSON is updated.

Widget Types

Type Description Key Fields
stat Key metric with large value display value, icon, color, subtitle
progress Progress bar with label value (0.01.0), label, color
text Rich text block content, format ("markdown" or "plain")
table Data table with headers columns, rows
chart Line, bar, or pie chart chartType, series (each with name, color, data)
list Checklist with status indicators items (each with text, status: done/active/pending)
webview Embedded web browser url, height (default 400)

The webview widget embeds a live web browser directly in your dashboard — perfect for displaying local dev servers, HTML reports, or any web-based tool your agent generates. When a section contains a webview alongside other widgets, Scarf automatically splits the layout: widgets on the left, webview on the right. If the section only has a webview, it takes the full width.

{
  "type": "webview",
  "title": "Project Report",
  "url": "http://localhost:8000/dashboard",
  "height": 500
}
  • url: Any URL — typically a local server (http://localhost:...) or file path
  • height: Height in points (default: 400)

Colors: red, orange, yellow, green, blue, purple, pink, teal, indigo, mint, brown, gray

Icons: Any SF Symbol name (e.g., checkmark.shield, cpu, doc.text, chart.bar)

Agent-Generated Dashboards

The real power is letting your Hermes agent build and update dashboards automatically. Add instructions like this to your agent's context:

Analyze this project and create a .scarf/dashboard.json dashboard with relevant metrics and status. Use stat widgets for key numbers, charts for trends, tables for structured data, and lists for task tracking. Register the project in ~/.hermes/scarf/projects.json if not already registered.

Your agent can update the dashboard as part of cron jobs, after builds, or whenever project state changes. Since Scarf watches the file, updates appear in real-time.

Dashboard Schema Reference

{
  "version": 1,
  "title": "Required — dashboard title",
  "description": "Optional — subtitle text",
  "updatedAt": "Optional — ISO 8601 timestamp",
  "sections": [
    {
      "title": "Section Name",
      "columns": 3,
      "widgets": [{ "type": "...", "title": "..." }]
    }
  ]
}

Each section defines a grid with 14 columns. Widgets flow left-to-right, wrapping to new rows. See DASHBOARD_SCHEMA.md for the full schema reference with examples of every widget type.

Contributing

Contributions are welcome. Please open an issue to discuss what you'd like to change before submitting a PR.

  1. Fork the repo
  2. Create your feature branch (git checkout -b feature/my-feature)
  3. Commit your changes (git commit -m 'Add my feature')
  4. Push to the branch (git push origin feature/my-feature)
  5. Open a Pull Request

Support

If you find Scarf useful, consider buying me a coffee.

Buy Me a Coffee

License

MIT