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