App Repository Dashboard

Context

Why This Matters

The Problem

Developers needed to open the full Host KBuilder — a heavyweight desktop application — just to browse app definitions, check revision history, or compare changes between versions.

During debugging sessions, deploy verification, or when working outside the Kahua Shell, this meant breaking flow to launch an entirely separate tool for what should be a simple lookup.

The Host KBuilder is powerful, but it's designed for full app development workflows. When all you need is to check whether an app was published or compare two revisions, it's like opening a full IDE just to read a log file.

The Solution

A full-featured App Repository tab built directly into the Dev Console — the lightweight, browser-based dashboard that developers already have open during their daily workflow.

The new AppRepo tab brings the most-used Repository Explorer features right into the browser: tree navigation of dev groups, a sortable app grid with search and filtering, a built-in diff viewer for comparing revisions, a history panel for tracking changes, and workspace integration for local file operations.

The result: What used to require launching a separate application and navigating to the right context now takes a single click on a tab you already have open.

Dev Console with App Repository tab showing tree navigation and app grid in dark mode

The App Repository tab in the Dev Console — tree navigation, sortable grid, and one-click access to every feature.

Features

Feature Showcase

Authentication & Sign-in

Smart sign-in card with saved credentials and secure token management. Authenticates against the AppDev API and caches sessions locally — credentials are never echoed to the browser.

Tree Navigation & App Grid

Browse dev groups in a collapsible tree with instant search. Select any group to populate the sortable app grid showing version status, dates, and workspace state.

Search, Filter & Favorites

Real-time text search that filters as you type. Use filter pills — Favorites, In Workspace, Pending — to focus on what matters. Star any app for quick access.

Right-click context menu with 14 actions

Context Menu & Actions

Right-click any app row for the full action menu: favorites, get latest, history, compare, clone, diff, publish/unpublish, and open in File Explorer. Every action, one right-click away.

History Panel & Revision Timeline

Resizable right-side panel showing complete revision history. Each entry shows revision number, author, date, and commit message. Select revisions to compare or diff.

Compare Drawer & Settings

The compare drawer slides up to show app definition XML alongside the grid and history panel — a three-panel view of navigation, history, and content simultaneously.

Origin Story

Built with AI

This entire feature — from concept to working code — was built in approximately 2 days using GitHub Copilot CLI with the Superpowers plugin, following a spec-driven development loop with built-in interrogation, self-review, and verification at every stage.

Brainstorm & Interrogate

Every feature started with the /brainstorm skill — an interactive interrogation loop that challenged assumptions, explored edge cases, and shaped requirements before a single line of code was written.

Spec-Driven Plans

Brainstorm output fed into the /write-plan skill, producing numbered implementation plans with tasks, file paths, acceptance criteria, and dependency ordering — the execution roadmap.

Execute → Review → Verify

The /execute-plan skill drove implementation while the rubber-duck and code-review agents provided independent critique at each checkpoint — catching blind spots before they became bugs.

Team Conventions via CLAUDE.md

A single instructions file encoded the team's style — PascalCase, file-scoped namespaces, C# 13 patterns, XAML conventions — so every generated commit read like a team member wrote it.

MCP Integrations

🎨

Figma MCP

Design explorations were coalesced directly in Figma via the MCP server — the agent created frames, placed components, and iterated on layout without leaving the terminal.

📸

Playwright MCP

Every screenshot in this showcase was captured programmatically by the Playwright MCP — navigating the live app, signing in, exercising workflows, and snapping dark-mode shots at each step.

Key Numbers

Total commits	66
Lines of new code	5,456
Design specifications	3
Implementation plans	3
Feature areas delivered	7
Elapsed time	~2 days

Technical

Architecture Overview

A single-page application injected into the Dev Console's HTML via a fragment splice pattern. Zero external framework dependencies — pure vanilla JavaScript and CSS.

🖥 Browser Layer

State Machine — manages loading → signed-out → signed-in lifecycle
Tree Panel — dev group hierarchy with search and selection
App Grid — sortable grid with search, filter, and context menu
Diff Viewer — side-by-side XML comparison with line & char highlighting
History Panel — resizable revision timeline with selectable entries
Compare Drawer — expandable bottom panel for version comparison

⚙ Server Layer (AppRepoHost)

AppRepoHost.cs — all /apprepo/* routes, clean separation from DiagnosticHost
Auth routes — /apprepo/auth/login, /token, /logout
Read routes — /apprepo/groups, /apps/{devGroup}, /history
Write routes — /apprepo/clone, /publish, /get-latest
Workspace routes — /apprepo/workspace/* for local file operations

Key Design Decisions

Separate AppRepoHost.cs avoids bloating the main DiagnosticHost with app repo logic
Token stored server-side at c:\kahua\apprepo-token.json — never sent to the browser
Feature flags allow gradual rollout: --apprepo-enabled-prod (default on) and --apprepo-enabled-local (default off)
Platform-side equivalent of Host KBuilder's ApplicationService — by convention, not code reuse

Roadmap

What's Next

🔀 Merge support — currently scaffolded in the context menu, merge operations will complete the three-way workflow (diff → merge → publish)
📦 Bulk operations — multi-select apps for batch get-latest, compare, or publish
🔔 Notification integration — surface AppRepo events in the Dev Console's notification system

Get Involved

The App Repository dashboard is open for contributions. The codebase is well-documented with architecture docs under architecture/apprepo/ and the implementation follows patterns described in CLAUDE.md.