ros/automaker
1
0
Fork 0
mirror of https://github.com/AutoMaker-Org/automaker.git synced 2026-02-03 08:53:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

✨ update: enhance WikiView component with improved type definitions and documentation

Browse Source 
- Updated type imports for `icon` and `content` in the `WikiSection` interface to use `ElementType` and `ReactNode` for better clarity and type safety.
- Expanded the content description in the WikiView to include shared libraries and updated technology stack details.
- Revised the directory structure representation for clarity and completeness, reflecting the current organization of the codebase.
- Adjusted file paths in the feature list for better accuracy and organization.

These changes aim to improve the documentation and type safety within the WikiView component, enhancing developer experience and understanding of the project structure.
This commit is contained in:
Kacper
2025-12-21 21:44:02 +01:00
parent a40bb6df24
commit 9ea80123fd
1 changed files with 159 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

326
apps/ui/src/components/views/wiki-view.tsx
View File

@@ -1,5 +1,4 @@
import { useState } from "react"; import { useState, type ReactNode, type ElementType } from 'react';
import { cn } from "@/lib/utils";
import { import {
ChevronDown, ChevronDown,
ChevronRight, ChevronRight,
@@ -13,7 +12,6 @@ import {
PlayCircle, PlayCircle,
Bot, Bot,
LayoutGrid, LayoutGrid,
FileText,
Terminal, Terminal,
Palette, Palette,
Keyboard, Keyboard,
@@ -23,13 +21,13 @@ import {
TestTube, TestTube,
Brain, Brain,
Users, Users,
} from "lucide-react"; } from 'lucide-react';
interface WikiSection { interface WikiSection {
id: string; id: string;
title: string; title: string;
icon: React.ElementType; icon: ElementType;
content: React.ReactNode; content: ReactNode;
} }
function CollapsibleSection({ function CollapsibleSection({
@@ -52,9 +50,7 @@ function CollapsibleSection({
<div className="flex items-center justify-center w-8 h-8 rounded-lg bg-brand-500/10 text-brand-500"> <div className="flex items-center justify-center w-8 h-8 rounded-lg bg-brand-500/10 text-brand-500">
<Icon className="w-4 h-4" /> <Icon className="w-4 h-4" />
</div> </div>
<span className="flex-1 font-medium text-foreground"> <span className="flex-1 font-medium text-foreground">{section.title}</span>
{section.title}
</span>
{isOpen ? ( {isOpen ? (
<ChevronDown className="w-4 h-4 text-muted-foreground" /> <ChevronDown className="w-4 h-4 text-muted-foreground" />
) : ( ) : (
@@ -90,7 +86,7 @@ function CodeBlock({ children, title }: { children: string; title?: string }) {
function FeatureList({ function FeatureList({
items, items,
}: { }: {
items: { icon: React.ElementType; title: string; description: string }[]; items: { icon: ElementType; title: string; description: string }[];
}) { }) {
return ( return (
<div className="grid gap-3 mt-3"> <div className="grid gap-3 mt-3">
@@ -105,12 +101,8 @@ function FeatureList({
<ItemIcon className="w-3.5 h-3.5" /> <ItemIcon className="w-3.5 h-3.5" />
</div> </div>
<div> <div>
<div className="font-medium text-foreground text-sm"> <div className="font-medium text-foreground text-sm">{item.title}</div>
{item.title} <div className="text-xs text-muted-foreground mt-0.5">{item.description}</div>
</div>
<div className="text-xs text-muted-foreground mt-0.5">
{item.description}
</div>
</div> </div>
</div> </div>
); );
@@ -120,9 +112,7 @@ function FeatureList({
} }
export function WikiView() { export function WikiView() {
const [openSections, setOpenSections] = useState<Set<string>>( const [openSections, setOpenSections] = useState<Set<string>>(new Set(['overview']));
new Set(["overview"])
);
const toggleSection = (id: string) => { const toggleSection = (id: string) => {
setOpenSections((prev) => { setOpenSections((prev) => {
@@ -146,66 +136,66 @@ export function WikiView() {
const sections: WikiSection[] = [ const sections: WikiSection[] = [
{ {
id: "overview", id: 'overview',
title: "Project Overview", title: 'Project Overview',
icon: Rocket, icon: Rocket,
content: ( content: (
<div className="space-y-3"> <div className="space-y-3">
<p> <p>
<strong className="text-foreground">Automaker</strong> is an <strong className="text-foreground">Automaker</strong> is an autonomous AI development
autonomous AI development studio that helps developers build studio that helps developers build software faster using AI agents.
software faster using AI agents.
</p> </p>
<p> <p>
At its core, Automaker provides a visual Kanban board to manage At its core, Automaker provides a visual Kanban board to manage features. When you're
features. When you're ready, AI agents automatically implement those ready, AI agents automatically implement those features in your codebase, complete with
features in your codebase, complete with git worktree isolation for git worktree isolation for safe parallel development.
safe parallel development.
</p> </p>
<div className="p-3 rounded-lg bg-brand-500/10 border border-brand-500/20 mt-4"> <div className="p-3 rounded-lg bg-brand-500/10 border border-brand-500/20 mt-4">
<p className="text-brand-400 text-sm"> <p className="text-brand-400 text-sm">
Think of it as having a team of AI developers that can work on Think of it as having a team of AI developers that can work on multiple features
multiple features simultaneously while you focus on the bigger simultaneously while you focus on the bigger picture.
picture.
</p> </p>
</div> </div>
</div> </div>
), ),
}, },
{ {
id: "architecture", id: 'architecture',
title: "Architecture", title: 'Architecture',
icon: Layers, icon: Layers,
content: ( content: (
<div className="space-y-3"> <div className="space-y-3">
<p>Automaker is built as a monorepo with two main applications:</p> <p>Automaker is built as a monorepo with two main applications and shared libraries:</p>
<ul className="list-disc list-inside space-y-2 ml-2"> <ul className="list-disc list-inside space-y-2 ml-2">
<li> <li>
<strong className="text-foreground">apps/ui</strong> - Next.js + <strong className="text-foreground">apps/ui</strong> - React + TanStack Router +
Electron frontend for the desktop application Electron frontend for the desktop application
</li> </li>
<li> <li>
<strong className="text-foreground">apps/server</strong> - Express <strong className="text-foreground">apps/server</strong> - Express backend handling
backend handling API requests and agent orchestration API requests and agent orchestration
</li>
<li>
<strong className="text-foreground">libs/</strong> - Shared packages for types,
utilities, and common logic used across apps
</li> </li>
</ul> </ul>
<div className="mt-4 space-y-2"> <div className="mt-4 space-y-2">
<p className="font-medium text-foreground">Key Technologies:</p> <p className="font-medium text-foreground">Key Technologies:</p>
<ul className="list-disc list-inside space-y-1 ml-2"> <ul className="list-disc list-inside space-y-1 ml-2">
<li>Electron wraps Next.js for cross-platform desktop support</li> <li>Electron + React + TanStack Router for cross-platform desktop support</li>
<li> <li>Real-time communication via WebSocket for live agent updates</li>
Real-time communication via WebSocket for live agent updates
</li>
<li>State management with Zustand for reactive UI updates</li> <li>State management with Zustand for reactive UI updates</li>
<li>Claude Agent SDK for AI capabilities</li> <li>Claude Agent SDK for AI capabilities</li>
<li>Shared monorepo packages (@automaker/*) for code reuse</li>
</ul> </ul>
</div> </div>
</div> </div>
), ),
}, },
{ {
id: "features", id: 'features',
title: "Key Features", title: 'Key Features',
icon: Sparkles, icon: Sparkles,
content: ( content: (
<div> <div>
@@ -213,73 +203,69 @@ export function WikiView() {
items={[ items={[
{ {
icon: LayoutGrid, icon: LayoutGrid,
title: "Kanban Board", title: 'Kanban Board',
description: description:
"4 columns: Backlog, In Progress, Waiting Approval, Verified. Drag and drop to manage feature lifecycle.", '4 columns: Backlog, In Progress, Waiting Approval, Verified. Drag and drop to manage feature lifecycle.',
}, },
{ {
icon: Bot, icon: Bot,
title: "AI Agent Integration", title: 'AI Agent Integration',
description: description:
"Powered by Claude via the Agent SDK with full file, bash, and git access.", 'Powered by Claude via the Agent SDK with full file, bash, and git access.',
}, },
{ {
icon: Cpu, icon: Cpu,
title: "Multi-Model Support", title: 'Multi-Model Support',
description: description:
"Claude Haiku/Sonnet/Opus models. Choose the right model for each task.", 'Claude Haiku/Sonnet/Opus models. Choose the right model for each task.',
}, },
{ {
icon: Brain, icon: Brain,
title: "Extended Thinking", title: 'Extended Thinking',
description: description:
"Configurable thinking levels (none, low, medium, high, ultrathink) for complex tasks.", 'Configurable thinking levels (none, low, medium, high, ultrathink) for complex tasks.',
}, },
{ {
icon: Zap, icon: Zap,
title: "Real-time Streaming", title: 'Real-time Streaming',
description: description: 'Watch AI agents work in real-time with live output streaming.',
"Watch AI agents work in real-time with live output streaming.",
}, },
{ {
icon: GitBranch, icon: GitBranch,
title: "Git Worktree Isolation", title: 'Git Worktree Isolation',
description: description:
"Each feature runs in its own git worktree for safe parallel development.", 'Each feature runs in its own git worktree for safe parallel development.',
}, },
{ {
icon: Users, icon: Users,
title: "AI Profiles", title: 'AI Profiles',
description: description:
"Pre-configured model + thinking level combinations for different task types.", 'Pre-configured model + thinking level combinations for different task types.',
}, },
{ {
icon: Terminal, icon: Terminal,
title: "Integrated Terminal", title: 'Integrated Terminal',
description: description: 'Built-in terminal with tab support and split panes.',
"Built-in terminal with tab support and split panes.",
}, },
{ {
icon: Keyboard, icon: Keyboard,
title: "Keyboard Shortcuts", title: 'Keyboard Shortcuts',
description: "Fully customizable shortcuts for power users.", description: 'Fully customizable shortcuts for power users.',
}, },
{ {
icon: Palette, icon: Palette,
title: "14 Themes", title: '14 Themes',
description: description: 'From light to dark, retro to synthwave - pick your style.',
"From light to dark, retro to synthwave - pick your style.",
}, },
{ {
icon: Image, icon: Image,
title: "Image Support", title: 'Image Support',
description: "Attach images to features for visual context.", description: 'Attach images to features for visual context.',
}, },
{ {
icon: TestTube, icon: TestTube,
title: "Test Integration", title: 'Test Integration',
description: description: 'Automatic test running and TDD support for quality assurance.',
"Automatic test running and TDD support for quality assurance.",
}, },
]} ]}
/> />
@@ -287,26 +273,23 @@ export function WikiView() {
), ),
}, },
{ {
id: "data-flow", id: 'data-flow',
title: "How It Works (Data Flow)", title: 'How It Works (Data Flow)',
icon: GitBranch, icon: GitBranch,
content: ( content: (
<div className="space-y-3"> <div className="space-y-3">
<p> <p>Here's what happens when you use Automaker to implement a feature:</p>
Here's what happens when you use Automaker to implement a feature:
</p>
<ol className="list-decimal list-inside space-y-3 ml-2 mt-4"> <ol className="list-decimal list-inside space-y-3 ml-2 mt-4">
<li className="text-foreground"> <li className="text-foreground">
<strong>Create Feature</strong> <strong>Create Feature</strong>
<p className="text-muted-foreground ml-5 mt-1"> <p className="text-muted-foreground ml-5 mt-1">
Add a new feature card to the Kanban board with description and Add a new feature card to the Kanban board with description and steps
steps
</p> </p>
</li> </li>
<li className="text-foreground"> <li className="text-foreground">
<strong>Feature Saved</strong> <strong>Feature Saved</strong>
<p className="text-muted-foreground ml-5 mt-1"> <p className="text-muted-foreground ml-5 mt-1">
Feature saved to{" "} Feature saved to{' '}
<code className="px-1 py-0.5 bg-muted rounded text-xs"> <code className="px-1 py-0.5 bg-muted rounded text-xs">
.automaker/features/&#123;id&#125;/feature.json .automaker/features/&#123;id&#125;/feature.json
</code> </code>
@@ -315,15 +298,13 @@ export function WikiView() {
<li className="text-foreground"> <li className="text-foreground">
<strong>Start Work</strong> <strong>Start Work</strong>
<p className="text-muted-foreground ml-5 mt-1"> <p className="text-muted-foreground ml-5 mt-1">
Drag to "In Progress" or enable auto mode to start Drag to "In Progress" or enable auto mode to start implementation
implementation
</p> </p>
</li> </li>
<li className="text-foreground"> <li className="text-foreground">
<strong>Git Worktree Created</strong> <strong>Git Worktree Created</strong>
<p className="text-muted-foreground ml-5 mt-1"> <p className="text-muted-foreground ml-5 mt-1">
Backend AutoModeService creates isolated git worktree (if Backend AutoModeService creates isolated git worktree (if enabled)
enabled)
</p> </p>
</li> </li>
<li className="text-foreground"> <li className="text-foreground">
@@ -355,38 +336,64 @@ export function WikiView() {
), ),
}, },
{ {
id: "structure", id: 'structure',
title: "Project Structure", title: 'Project Structure',
icon: FolderTree, icon: FolderTree,
content: ( content: (
<div> <div>
<p className="mb-3"> <p className="mb-3">The Automaker codebase is organized as follows:</p>
The Automaker codebase is organized as follows:
</p>
<CodeBlock title="Directory Structure"> <CodeBlock title="Directory Structure">
{`/automaker/ {`automaker/
├── apps/ ├─ apps/
│ ├── app/ # Frontend (Next.js + Electron) │ ├─ ui/ Frontend (React + Electron)
│ │ ├── electron/ # Electron main process │ │ └─ src/
│ │ └── src/ │ │ ├─ routes/ TanStack Router pages
│ │ ├── app/ # Next.js App Router pages │ │ ├─ components/
│ │ ├── components/ # React components │ │ │ ├─ layout/ Layout components (sidebar, etc.)
│ │ ├── store/ # Zustand state management │ │ │ ├─ views/ View components (board, agent, etc.)
│ │ ├── hooks/ # Custom React hooks │ │ │ ├─ dialogs/ Dialog components
│ │ └── lib/ # Utilities and helpers │ │ │ └─ ui/ shadcn/ui components
│ └── server/ # Backend (Express) │ │ ├─ store/ Zustand state management
│ └── src/ │ │ ├─ hooks/ Custom React hooks
│ ├── routes/ # API endpoints │ │ ├─ lib/ Utilities and helpers
│ └── services/ # Business logic (AutoModeService, etc.) │ │ ├─ config/ App configuration files
├── docs/ # Documentation │ │ ├─ contexts/ React context providers
└── package.json # Workspace root`} │ │ ├─ styles/ CSS styles and theme definitions
│ │ ├─ types/ TypeScript type definitions
│ │ ├─ utils/ Utility functions
│ │ ├─ main.ts Electron main process entry
│ │ ├─ preload.ts Electron preload script
│ │ └─ renderer.tsx React renderer entry
│ │
│ └─ server/ Backend (Express)
│ └─ src/
│ ├─ routes/ API endpoints
│ ├─ services/ Business logic (AutoModeService, etc.)
│ ├─ lib/ Library utilities
│ ├─ middleware/ Express middleware
│ ├─ providers/ AI provider implementations
│ ├─ types/ TypeScript type definitions
│ └─ index.ts Server entry point
│
├─ libs/ Shared packages (monorepo)
│ ├─ types/ TypeScript type definitions
│ ├─ utils/ Common utilities (logging, errors)
│ ├─ prompts/ AI prompt templates
│ ├─ platform/ Platform & path utilities
│ ├─ model-resolver/ Claude model resolution
│ ├─ dependency-resolver/ Feature dependency ordering
│ └─ git-utils/ Git operations & parsing
│
├─ docs/ Documentation
└─ package.json Workspace root
`}
</CodeBlock> </CodeBlock>
</div> </div>
), ),
}, },
{ {
id: "components", id: 'components',
title: "Key Components", title: 'Key Components',
icon: Component, icon: Component,
content: ( content: (
<div className="space-y-3"> <div className="space-y-3">
@@ -394,33 +401,36 @@ export function WikiView() {
<div className="grid gap-2 mt-4"> <div className="grid gap-2 mt-4">
{[ {[
{ {
file: "sidebar.tsx", file: 'layout/sidebar.tsx',
desc: "Main navigation with project picker and view switching", desc: 'Main navigation with project picker and view switching',
}, },
{ {
file: "board-view.tsx", file: 'views/board-view.tsx',
desc: "Kanban board with drag-and-drop cards", desc: 'Kanban board with drag-and-drop cards',
}, },
{ {
file: "agent-view.tsx", file: 'views/agent-view.tsx',
desc: "AI chat interface for conversational development", 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", file: 'views/spec-view/',
desc: "Integrated terminal with splits and tabs", desc: 'Project specification editor with AI generation',
}, },
{ {
file: "profiles-view.tsx", file: 'views/context-view.tsx',
desc: "AI profile management (model + thinking presets)", desc: 'Context file manager for AI context',
}, },
{ {
file: "app-store.ts", file: 'views/terminal-view/',
desc: "Central Zustand state management", desc: 'Integrated terminal with splits and tabs',
},
{
file: 'views/profiles-view.tsx',
desc: 'AI profile management (model + thinking presets)',
},
{
file: 'store/app-store.ts',
desc: 'Central Zustand state management',
}, },
].map((item) => ( ].map((item) => (
<div <div
@@ -430,9 +440,7 @@ export function WikiView() {
<code className="text-xs font-mono text-brand-400 bg-brand-500/10 px-2 py-0.5 rounded"> <code className="text-xs font-mono text-brand-400 bg-brand-500/10 px-2 py-0.5 rounded">
{item.file} {item.file}
</code> </code>
<span className="text-xs text-muted-foreground"> <span className="text-xs text-muted-foreground">{item.desc}</span>
{item.desc}
</span>
</div> </div>
))} ))}
</div> </div>
@@ -440,31 +448,28 @@ export function WikiView() {
), ),
}, },
{ {
id: "configuration", id: 'configuration',
title: "Configuration", title: 'Configuration',
icon: Settings, icon: Settings,
content: ( content: (
<div className="space-y-3"> <div className="space-y-3">
<p> <p>
Automaker stores project configuration in the{" "} Automaker stores project configuration in the{' '}
<code className="px-1 py-0.5 bg-muted rounded text-xs"> <code className="px-1 py-0.5 bg-muted rounded text-xs">.automaker/</code> directory:
.automaker/
</code>{" "}
directory:
</p> </p>
<div className="grid gap-2 mt-4"> <div className="grid gap-2 mt-4">
{[ {[
{ {
file: "app_spec.txt", file: 'app_spec.txt',
desc: "Project specification describing your app for AI context", desc: 'Project specification describing your app for AI context',
}, },
{ {
file: "context/", file: 'context/',
desc: "Additional context files (docs, examples) for AI", desc: 'Additional context files (docs, examples) for AI',
}, },
{ {
file: "features/", file: 'features/',
desc: "Feature definitions with descriptions and steps", desc: 'Feature definitions with descriptions and steps',
}, },
].map((item) => ( ].map((item) => (
<div <div
@@ -474,16 +479,12 @@ export function WikiView() {
<code className="text-xs font-mono text-brand-400 bg-brand-500/10 px-2 py-0.5 rounded"> <code className="text-xs font-mono text-brand-400 bg-brand-500/10 px-2 py-0.5 rounded">
{item.file} {item.file}
</code> </code>
<span className="text-xs text-muted-foreground"> <span className="text-xs text-muted-foreground">{item.desc}</span>
{item.desc}
</span>
</div> </div>
))} ))}
</div> </div>
<div className="mt-4 p-3 rounded-lg bg-muted/30 border border-border/50"> <div className="mt-4 p-3 rounded-lg bg-muted/30 border border-border/50">
<p className="text-sm text-foreground font-medium mb-2"> <p className="text-sm text-foreground font-medium mb-2">Tip: App Spec Best Practices</p>
Tip: App Spec Best Practices
</p>
<ul className="list-disc list-inside space-y-1 text-xs text-muted-foreground"> <ul className="list-disc list-inside space-y-1 text-xs text-muted-foreground">
<li>Include your tech stack and key dependencies</li> <li>Include your tech stack and key dependencies</li>
<li>Describe the project structure and conventions</li> <li>Describe the project structure and conventions</li>
@@ -495,8 +496,8 @@ export function WikiView() {
), ),
}, },
{ {
id: "getting-started", id: 'getting-started',
title: "Getting Started", title: 'Getting Started',
icon: PlayCircle, icon: PlayCircle,
content: ( content: (
<div className="space-y-3"> <div className="space-y-3">
@@ -505,43 +506,38 @@ export function WikiView() {
<li className="text-foreground"> <li className="text-foreground">
<strong>Create or Open a Project</strong> <strong>Create or Open a Project</strong>
<p className="text-muted-foreground ml-5 mt-1"> <p className="text-muted-foreground ml-5 mt-1">
Use the sidebar to create a new project or open an existing Use the sidebar to create a new project or open an existing folder
folder
</p> </p>
</li> </li>
<li className="text-foreground"> <li className="text-foreground">
<strong>Write an App Spec</strong> <strong>Write an App Spec</strong>
<p className="text-muted-foreground ml-5 mt-1"> <p className="text-muted-foreground ml-5 mt-1">
Go to Spec Editor and describe your project. This helps AI Go to Spec Editor and describe your project. This helps AI understand your codebase.
understand your codebase.
</p> </p>
</li> </li>
<li className="text-foreground"> <li className="text-foreground">
<strong>Add Context (Optional)</strong> <strong>Add Context (Optional)</strong>
<p className="text-muted-foreground ml-5 mt-1"> <p className="text-muted-foreground ml-5 mt-1">
Add relevant documentation or examples to the Context view for Add relevant documentation or examples to the Context view for better AI results
better AI results
</p> </p>
</li> </li>
<li className="text-foreground"> <li className="text-foreground">
<strong>Create Features</strong> <strong>Create Features</strong>
<p className="text-muted-foreground ml-5 mt-1"> <p className="text-muted-foreground ml-5 mt-1">
Add feature cards to your Kanban board with clear descriptions Add feature cards to your Kanban board with clear descriptions and implementation
and implementation steps steps
</p> </p>
</li> </li>
<li className="text-foreground"> <li className="text-foreground">
<strong>Configure AI Profile</strong> <strong>Configure AI Profile</strong>
<p className="text-muted-foreground ml-5 mt-1"> <p className="text-muted-foreground ml-5 mt-1">
Choose an AI profile or customize model/thinking settings per Choose an AI profile or customize model/thinking settings per feature
feature
</p> </p>
</li> </li>
<li className="text-foreground"> <li className="text-foreground">
<strong>Start Implementation</strong> <strong>Start Implementation</strong>
<p className="text-muted-foreground ml-5 mt-1"> <p className="text-muted-foreground ml-5 mt-1">
Drag features to "In Progress" or enable auto mode to let AI Drag features to "In Progress" or enable auto mode to let AI work
work
</p> </p>
</li> </li>
<li className="text-foreground"> <li className="text-foreground">
@@ -555,16 +551,12 @@ export function WikiView() {
<p className="text-brand-400 text-sm font-medium mb-2">Pro Tips:</p> <p className="text-brand-400 text-sm font-medium mb-2">Pro Tips:</p>
<ul className="list-disc list-inside space-y-1 text-xs text-brand-400/80"> <ul className="list-disc list-inside space-y-1 text-xs text-brand-400/80">
<li> <li>
Use keyboard shortcuts for faster navigation (press{" "} Use keyboard shortcuts for faster navigation (press{' '}
<code className="px-1 py-0.5 bg-brand-500/20 rounded">?</code>{" "} <code className="px-1 py-0.5 bg-brand-500/20 rounded">?</code> to see all)
to see all)
</li> </li>
<li>Enable git worktree isolation for parallel feature development</li>
<li> <li>
Enable git worktree isolation for parallel feature development Start with "Quick Edit" profile for simple tasks, use "Heavy Task" for complex work
</li>
<li>
Start with "Quick Edit" profile for simple tasks, use "Heavy
Task" for complex work
</li> </li>
<li>Keep your app spec up to date as your project evolves</li> <li>Keep your app spec up to date as your project evolves</li>
</ul> </ul>