From e27e0b2343797cbc4986d13ffe94906682326af5 Mon Sep 17 00:00:00 2001 From: SuperComboGamer Date: Sat, 13 Dec 2025 13:23:13 -0500 Subject: [PATCH] feat: add Wiki view and sidebar link - Introduced a new Wiki view component to the application. - Updated the sidebar to include a button for navigating to the Wiki view. - Modified the app store to support the new "wiki" view mode. --- apps/app/src/app/page.tsx | 3 + apps/app/src/components/layout/sidebar.tsx | 40 ++ apps/app/src/components/views/wiki-view.tsx | 479 ++++++++++++++++++++ apps/app/src/store/app-store.ts | 3 +- 4 files changed, 524 insertions(+), 1 deletion(-) create mode 100644 apps/app/src/components/views/wiki-view.tsx diff --git a/apps/app/src/app/page.tsx b/apps/app/src/app/page.tsx index 2fb46f87..06dfd503 100644 --- a/apps/app/src/app/page.tsx +++ b/apps/app/src/app/page.tsx @@ -13,6 +13,7 @@ import { ProfilesView } from "@/components/views/profiles-view"; import { SetupView } from "@/components/views/setup-view"; import { RunningAgentsView } from "@/components/views/running-agents-view"; import { TerminalView } from "@/components/views/terminal-view"; +import { WikiView } from "@/components/views/wiki-view"; import { useAppStore } from "@/store/app-store"; import { useSetupStore } from "@/store/setup-store"; import { getElectronAPI, isElectron } from "@/lib/electron"; @@ -209,6 +210,8 @@ function HomeContent() { return ; case "terminal": return ; + case "wiki": + return ; default: return ; } diff --git a/apps/app/src/components/layout/sidebar.tsx b/apps/app/src/components/layout/sidebar.tsx index 425234bc..dce4a435 100644 --- a/apps/app/src/components/layout/sidebar.tsx +++ b/apps/app/src/components/layout/sidebar.tsx @@ -1247,6 +1247,46 @@ export function Sidebar() {
{/* Course Promo Badge */} + {/* Wiki Link */} +
+ +
{/* Running Agents Link */}
+ {isOpen && ( +
+
+ {section.content} +
+
+ )} +
+ ); +} + +function CodeBlock({ children, title }: { children: string; title?: string }) { + return ( +
+ {title && ( +
+ {title} +
+ )} + 
+        {children}
+
+
+ ); +} + +function FeatureList({ items }: { items: { icon: React.ElementType; title: string; description: string }[] }) { + return ( +
+ {items.map((item, index) => { + const ItemIcon = item.icon; + return ( +
+
+ +
+
+
{item.title}
+
{item.description}
+
+
+ ); + })} +
+ ); +} + +export function WikiView() { + const [openSections, setOpenSections] = useState>(new Set(["overview"])); + + const toggleSection = (id: string) => { + setOpenSections((prev) => { + const newSet = new Set(prev); + if (newSet.has(id)) { + newSet.delete(id); + } else { + newSet.add(id); + } + return newSet; + }); + }; + + const expandAll = () => { + setOpenSections(new Set(sections.map((s) => s.id))); + }; + + const collapseAll = () => { + setOpenSections(new Set()); + }; + + const sections: WikiSection[] = [ + { + id: "overview", + title: "Project Overview", + icon: Rocket, + content: ( +
+

+ Automaker is an autonomous AI development studio that helps developers build software faster using AI agents. +

+

+ At its core, Automaker provides a visual Kanban board to manage features. When you're ready, AI agents automatically implement those features in your codebase, complete with git worktree isolation for safe parallel development. +

+
+

+ Think of it as having a team of AI developers that can work on multiple features simultaneously while you focus on the bigger picture. +

+
+
+ ), + }, + { + id: "architecture", + title: "Architecture", + icon: Layers, + content: ( +
+

Automaker is built as a monorepo with two main applications:

+
    +
  • + apps/app - Next.js + Electron frontend for the desktop application +
    • +
  • + apps/server - Express backend handling API requests and agent orchestration +
    • +
+
+

Key Technologies:

+
    +
  • Electron wraps Next.js for cross-platform desktop support
    • +
  • Real-time communication via WebSocket for live agent updates
    • +
  • State management with Zustand for reactive UI updates
    • +
  • Claude Agent SDK for AI capabilities
    • +
+
+
+ ), + }, + { + id: "features", + title: "Key Features", + icon: Sparkles, + content: ( +
+ +
+ ), + }, + { + id: "data-flow", + title: "How It Works (Data Flow)", + icon: GitBranch, + content: ( +
+

Here's what happens when you use Automaker to implement a feature:

+
    +
  1. + Create Feature +

    Add a new feature card to the Kanban board with description and steps

    +
    2. +
  2. + Feature Saved +

    Feature saved to .automaker/features/{id}/feature.json

    +
    3. +
  3. + Start Work +

    Drag to "In Progress" or enable auto mode to start implementation

    +
    4. +
  4. + Git Worktree Created +

    Backend AutoModeService creates isolated git worktree (if enabled)

    +
    5. +
  5. + Agent Executes +

    Claude Agent SDK runs with file/bash/git tool access

    +
    6. +
  6. + Progress Streamed +

    Real-time updates via WebSocket as agent works

    +
    7. +
  7. + Completion +

    On success, feature moves to "waiting_approval" for your review

    +
    8. +
  8. + Verify +

    Review changes and move to "verified" when satisfied

    +
    9. +
+
+ ), + }, + { + id: "structure", + title: "Project Structure", + icon: FolderTree, + content: ( +
+

The Automaker codebase is organized as follows:

+ +{`/automaker/ +├── apps/ +│ ├── app/ # Frontend (Next.js + Electron) +│ │ ├── electron/ # Electron main process +│ │ └── src/ +│ │ ├── app/ # Next.js App Router pages +│ │ ├── components/ # React components +│ │ ├── store/ # Zustand state management +│ │ ├── hooks/ # Custom React hooks +│ │ └── lib/ # Utilities and helpers +│ └── server/ # Backend (Express) +│ └── src/ +│ ├── routes/ # API endpoints +│ └── services/ # Business logic (AutoModeService, etc.) +├── docs/ # Documentation +└── package.json # Workspace root`} + +
+ ), + }, + { + id: "components", + title: "Key Components", + icon: Component, + content: ( +
+

The main UI components that make up Automaker:

+
+ {[ + { file: "sidebar.tsx", desc: "Main navigation with project picker and view switching" }, + { file: "board-view.tsx", desc: "Kanban board with drag-and-drop cards" }, + { file: "agent-view.tsx", desc: "AI chat interface for conversational development" }, + { file: "spec-view.tsx", desc: "Project specification editor" }, + { file: "context-view.tsx", desc: "Context file manager for AI context" }, + { file: "terminal-view.tsx", desc: "Integrated terminal with splits and tabs" }, + { file: "profiles-view.tsx", desc: "AI profile management (model + thinking presets)" }, + { file: "app-store.ts", desc: "Central Zustand state management" }, + ].map((item) => ( +
+ {item.file} + {item.desc} +
+ ))} +
+
+ ), + }, + { + id: "configuration", + title: "Configuration", + icon: Settings, + content: ( +
+

Automaker stores project configuration in the .automaker/ directory:

+
+ {[ + { file: "app_spec.txt", desc: "Project specification describing your app for AI context" }, + { file: "context/", desc: "Additional context files (docs, examples) for AI" }, + { file: "features/", desc: "Feature definitions with descriptions and steps" }, + ].map((item) => ( +
+ {item.file} + {item.desc} +
+ ))} +
+
+

Tip: App Spec Best Practices

+
    +
  • Include your tech stack and key dependencies
    • +
  • Describe the project structure and conventions
    • +
  • List any important patterns or architectural decisions
    • +
  • Note testing requirements and coding standards
    • +
+
+
+ ), + }, + { + id: "getting-started", + title: "Getting Started", + icon: PlayCircle, + content: ( +
+

Follow these steps to start building with Automaker:

+
    +
  1. + Create or Open a Project +

    Use the sidebar to create a new project or open an existing folder

    +
    2. +
  2. + Write an App Spec +

    Go to Spec Editor and describe your project. This helps AI understand your codebase.

    +
    3. +
  3. + Add Context (Optional) +

    Add relevant documentation or examples to the Context view for better AI results

    +
    4. +
  4. + Create Features +

    Add feature cards to your Kanban board with clear descriptions and implementation steps

    +
    5. +
  5. + Configure AI Profile +

    Choose an AI profile or customize model/thinking settings per feature

    +
    6. +
  6. + Start Implementation +

    Drag features to "In Progress" or enable auto mode to let AI work

    +
    7. +
  7. + Review and Verify +

    Check completed features, review changes, and mark as verified

    +
    8. +
+
+

Pro Tips:

+
    +
  • Use keyboard shortcuts for faster navigation (press ? to see all)
    • +
  • Enable git worktree isolation for parallel feature development
    • +
  • Start with "Quick Edit" profile for simple tasks, use "Heavy Task" for complex work
    • +
  • Keep your app spec up to date as your project evolves
    • +
+
+
+ ), + }, + ]; + + return ( +
+ {/* Header */} +
+
+
+

Wiki

+

+ Learn how Automaker works and how to use it effectively +

+
+
+ + +
+
+
+ + {/* Content */} +
+
+ {sections.map((section) => ( + toggleSection(section.id)} + /> + ))} +
+
+
+ ); +} diff --git a/apps/app/src/store/app-store.ts b/apps/app/src/store/app-store.ts index 4976aa07..7dd781d1 100644 --- a/apps/app/src/store/app-store.ts +++ b/apps/app/src/store/app-store.ts @@ -13,7 +13,8 @@ export type ViewMode = | "context" | "profiles" | "running-agents" - | "terminal"; + | "terminal" + | "wiki"; export type ThemeMode = | "light"