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

feat(kanban): enhance Kanban card detail level settings

Browse Source 
- Introduced a new feature to control the level of detail displayed on Kanban cards, allowing users to choose between minimal, standard, and detailed views.
- Updated the SettingsView to include buttons for selecting the desired detail level, with corresponding descriptions for each option.
- Integrated the new detail level setting into the KanbanCard component to conditionally render information based on user preferences.

This enhancement improves user experience by providing customizable visibility of feature information on Kanban cards.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4 <noreply@anthropic.com>
This commit is contained in:
Kacper
2025-12-10 00:02:24 +01:00
parent b901d2bb6c
commit a2d27b94bc
4 changed files with 105 additions and 293 deletions
Download Patch File Download Diff File Expand all files Collapse all files

286
.automaker/agents-context/feature-1765316742659-rll51tb62.md
View File

@@ -1,286 +0,0 @@
📋 Planning implementation for: We implemented the follow up prompt and waiting approval column its work well but when we click commit button its commiting with the title of follow up prompt i dont like this i would prefer the convencional commit that u as agent is creating when skip automated testing mode is off and u commit it in nice way look how we generate commit / handle it when automated testing is enabled and see how we do it when its disabled and its waiting for our approval and commit button how its handle it
⚡ Executing implementation for: We implemented the follow up prompt and waiting approval column its work well but when we click commit button its commiting with the title of follow up prompt i dont like this i would prefer the convencional commit that u as agent is creating when skip automated testing mode is off and u commit it in nice way look how we generate commit / handle it when automated testing is enabled and see how we do it when its disabled and its waiting for our approval and commit button how its handle it
Starting code implementation...
🔧 Tool: Read
🔧 Tool: Glob
Let me look at the project structure more specifically, focusing on the kanban column and related code for the commit functionality:
🔧 Tool: Glob
🔧 Tool: Read
Let me read the board-view.tsx and kanban-card.tsx to understand the commit button logic better:
🔧 Tool: Read
🔧 Tool: Read
Now I understand the frontend code. I need to look at the electron backend to understand how the commit is currently being done and how it's handled when skipTests is off (TDD mode). Let me search for the relevant electron backend code:
🔧 Tool: Glob
🔧 Tool: Bash
🔧 Tool: Bash
🔧 Tool: Bash
🔧 Tool: Bash
🔧 Tool: Bash
🔧 Tool: Bash
Now let me read the auto-mode-service.js file which likely handles the commit functionality:
🔧 Tool: Read
Now I need to look at the `featureExecutor.commitChangesOnly` method to understand how commits are currently being made:
🔧 Tool: Read
Now I understand the issue. Looking at the `commitChangesOnly` method (lines 366-492), I can see that when the user clicks "Commit" button for a waiting_approval feature, it uses a simple prompt that formats the commit message as:
```
"${feature.category}: ${feature.description}"
```
This is different from how conventional commits are created when automated testing is enabled. In the TDD mode, the agent creates proper conventional commit messages like `feat:`, `fix:`, etc.
Let me also look at the prompt-builder to understand how commits are handled in the TDD mode when automated testing is enabled:
🔧 Tool: Read
Now I have a full understanding of the issue. The problem is in the `commitChangesOnly` method in `/Users/shirone/Documents/Projekty/automaker/app/electron/services/feature-executor.js`. The current commit message prompt is:
```javascript
const prompt = `Please commit the current changes with this commit message:
"${feature.category}: ${feature.description}"
Steps:
1. Run \`git add .\` to stage all changes
2. Run \`git commit -m "message"\` with the provided message
3. Report success
Do NOT modify any code or run tests. Just commit the existing changes.`;
```
This creates a commit message like `"Kanban: We implemented the follow up prompt..."` which is the full feature description.
The user wants a proper conventional commit instead, like how the agent creates nice commits when automated testing mode is enabled. In TDD mode, the agent analyzes the changes and creates commits like `feat: Add follow-up prompt for waiting approval features`.
I need to update the `commitChangesOnly` method to ask the agent to:
1. Look at git status and git diff to understand what was changed
2. Create a proper conventional commit message based on the actual changes, not just the feature description
Let me modify the `feature-executor.js` file:
🔧 Tool: Edit
Input: {
"file_path": "/Users/shirone/Documents/Projekty/automaker/app/electron/services/feature-executor.js",
"old_string": " /**\n * Commit changes for a feature without doing additional work\n * Just runs git add and git commit with the feature description\n */\n async commitChangesOnly(feature, projectPath, sendToRenderer, execution) {\n console.log(`[FeatureExecutor] Committing changes for: ${feature.description}`);\n\n try {\n const commitMessage = `\\n📝 Committing changes for: ${feature.description}\\n`;\n await contextManager.writeToContextFile(projectPath, feature.id, commitMessage);\n\n sendToRenderer({\n type: \"auto_mode_progress\",\n featureId: feature.id,\n content: \"Committing changes to git...\",\n });\n\n const abortController = new AbortController();\n execution.abortController = abortController;\n\n // Create custom MCP server with UpdateFeatureStatus tool\n const featureToolsServer = mcpServerFactory.createFeatureToolsServer(\n featureLoader.updateFeatureStatus.bind(featureLoader),\n projectPath\n );\n\n const options = {\n model: \"claude-sonnet-4-20250514\", // Use sonnet for simple commit task\n systemPrompt: `You are a git assistant. Your only task is to commit the current changes with a proper commit message.\n\nIMPORTANT RULES:\n- DO NOT modify any code\n- DO NOT write tests\n- DO NOT do anything except committing the existing changes\n- Use the git command line tools via Bash`,\n maxTurns: 10, // Short limit for simple task\n cwd: projectPath,\n mcpServers: {\n \"automaker-tools\": featureToolsServer\n },\n allowedTools: [\"Bash\", \"mcp__automaker-tools__UpdateFeatureStatus\"],\n permissionMode: \"acceptEdits\",\n sandbox: {\n enabled: false, // Need to run git commands\n },\n abortController: abortController,\n };\n\n // Simple commit prompt\n const prompt = `Please commit the current changes with this commit message:\n\n\"${feature.category}: ${feature.description}\"\n\nSteps:\n1. Run \\`git add .\\` to stage all changes\n2. Run \\`git commit -m \"message\"\\` with the provided message\n3. Report success\n\nDo NOT modify any code or run tests. Just commit the existing changes.`;",
"new_string": " /**\n * Commit changes for a feature without doing additional work\n * Analyzes changes and creates a proper conventional commit message\n */\n async commitChangesOnly(feature, projectPath, sendToRenderer, execution) {\n console.log(`[FeatureExecutor] Committing changes for: ${feature.description}`);\n\n try {\n const commitMessage = `\\n📝 Committing changes for: ${feature.description}\\n`;\n await contextManager.writeToContextFile(projectPath, feature.id, commitMessage);\n\n sendToRenderer({\n type: \"auto_mode_progress\",\n featureId: feature.id,\n content: \"Analyzing changes and creating commit...\",\n });\n\n const abortController = new AbortController();\n execution.abortController = abortController;\n\n // Create custom MCP server with UpdateFeatureStatus tool\n const featureToolsServer = mcpServerFactory.createFeatureToolsServer(\n featureLoader.updateFeatureStatus.bind(featureLoader),\n projectPath\n );\n\n const options = {\n model: \"claude-sonnet-4-20250514\", // Use sonnet for commit task\n systemPrompt: `You are a git commit assistant that creates professional conventional commit messages.\n\nIMPORTANT RULES:\n- DO NOT modify any code\n- DO NOT write tests\n- DO NOT do anything except analyzing changes and committing them\n- Use the git command line tools via Bash\n- Create proper conventional commit messages based on what was actually changed`,\n maxTurns: 15, // Allow some turns to analyze and commit\n cwd: projectPath,\n mcpServers: {\n \"automaker-tools\": featureToolsServer\n },\n allowedTools: [\"Bash\", \"mcp__automaker-tools__UpdateFeatureStatus\"],\n permissionMode: \"acceptEdits\",\n sandbox: {\n enabled: false, // Need to run git commands\n },\n abortController: abortController,\n };\n\n // Prompt that guides the agent to create a proper conventional commit\n const prompt = `Please commit the current changes with a proper conventional commit message.\n\n**Feature Context:**\nCategory: ${feature.category}\nDescription: ${feature.description}\n\n**Your Task:**\n\n1. First, run \\`git status\\` to see all untracked and modified files\n2. Run \\`git diff\\` to see the actual changes (both staged and unstaged)\n3. Run \\`git log --oneline -5\\` to see recent commit message styles in this repo\n4. Analyze all the changes and draft a proper conventional commit message:\n - Use conventional commit format: \\`type(scope): description\\`\n - Types: feat, fix, refactor, style, docs, test, chore\n - The description should be concise (under 72 chars) and focus on \"what\" was done\n - Summarize the nature of the changes (new feature, enhancement, bug fix, etc.)\n - Make sure the commit message accurately reflects the actual code changes\n5. Run \\`git add .\\` to stage all changes\n6. Create the commit with a message ending with:\n 🤖 Generated with [Claude Code](https://claude.com/claude-code)\n\n Co-Authored-By: Claude Sonnet 4 <noreply@anthropic.com>\n\nUse a HEREDOC for the commit message to ensure proper formatting:\n\\`\\`\\`bash\ngit commit -m \"$(cat <<'EOF'\ntype(scope): Short description here\n\nOptional longer description if needed.\n\n🤖 Generated with [Claude Code](https://claude.com/claude-code)\n\nCo-Authored-By: Claude Sonnet 4 <noreply@anthropic.com>\nEOF\n)\"\n\\`\\`\\`\n\n**IMPORTANT:**\n- DO NOT use the feature description verbatim as the commit message\n- Analyze the actual code changes to determine the appropriate commit message\n- The commit message should be professional and follow conventional commit standards\n- DO NOT modify any code or run tests - ONLY commit the existing changes`;"
}The change has been made. Now when a user clicks the "Commit" button for a feature in the "Waiting Approval" column, the agent will:
1. Run `git status` to see the changed files
2. Run `git diff` to see the actual code changes
3. Check recent commit message styles from `git log`
4. Analyze the changes and create a proper conventional commit message (e.g., `feat(kanban): Add follow-up prompt for waiting approval features`)
5. Stage all changes and commit with the proper format including the "Generated with Claude Code" footer
This matches how commits are done when automated testing is enabled (TDD mode), where the agent creates nice conventional commits based on analyzing the actual changes rather than just using the feature description verbatim.
Let me now mark this feature as verified using the UpdateFeatureStatus tool:
🔧 Tool: mcp__automaker-tools__UpdateFeatureStatus
Input: {
"featureId": "feature-1765316742659-rll51tb62",
"status": "verified"
}The feature has been implemented successfully. Here's a summary of what was changed:
## Summary
**Problem:** When clicking the "Commit" button for features in the "Waiting Approval" column, the commit message was being created using the raw feature description verbatim (e.g., `"Kanban: We implemented the follow up prompt and waiting approval column..."`), which was not a proper conventional commit.
**Solution:** Updated the `commitChangesOnly` method in `/Users/shirone/Documents/Projekty/automaker/app/electron/services/feature-executor.js` to:
1. **Analyze actual changes** - The agent now runs `git status`, `git diff`, and `git log` to understand what was actually changed
2. **Create proper conventional commits** - Uses the conventional commit format (`type(scope): description`) based on the actual code changes
3. **Follow repo conventions** - Checks recent commit history to match the repository's commit style
4. **Include proper footer** - Adds the "🤖 Generated with Claude Code" footer and co-author attribution
This matches how commits are created when automated testing mode is enabled, where the agent creates professional commits like `feat(kanban): Add follow-up prompt for waiting approval features` instead of just dumping the feature description.
The feature is now in "waiting_approval" status for your manual review and commit.
✅ Verifying implementation for: We implemented the follow up prompt and waiting approval column its work well but when we click commit button its commiting with the title of follow up prompt i dont like this i would prefer the convencional commit that u as agent is creating when skip automated testing mode is off and u commit it in nice way look how we generate commit / handle it when automated testing is enabled and see how we do it when its disabled and its waiting for our approval and commit button how its handle it
Verifying implementation and checking test results...
✓ Verification successful: All tests passed
✅ Task completed: Let me look at the project structure more specifically, focusing on the kanban column and related code for the commit functionality:Let me read the board-view.tsx and kanban-card.tsx to understand the commit button logic better:Now I understand the frontend code. I need to look at the electron backend to understand how the commit is currently being done and how it's handled when skipTests is off (TDD mode). Let me search for the relevant electron backend code:Now let me read the auto-mode-servic
📝 Committing changes for: We implemented the follow up prompt and waiting approval column its work well but when we click commit button its commiting with the title of follow up prompt i dont like this i would prefer the convencional commit that u as agent is creating when skip automated testing mode is off and u commit it in nice way look how we generate commit / handle it when automated testing is enabled and see how we do it when its disabled and its waiting for our approval and commit button how its handle it
I'll commit the current changes with the exact commit message you provided. Let me first check the git status and then proceed with the commit.
🔧 Tool: Bash
Input: {
"command": "git status",
"description": "Check current git status"
}Now I'll stage all the changes and commit them with your provided message:
🔧 Tool: Bash
Input: {
"command": "git add .",
"description": "Stage all changes"
}
🔧 Tool: Bash
Input: {
"command": "git commit -m \"$(cat <<'EOF'\nKanban: We implemented the follow up prompt and waiting approval column its work well but when we click commit button its commiting with the title of follow up prompt i dont like this i would prefer the convencional commit that u as agent is creating when skip automated testing mode is off and u commit it in nice way look how we generate commit / handle it when automated testing is enabled and see how we do it when its disabled and its waiting for our approval and commit button how its handle it\nEOF\n)\"",
"description": "Commit changes with provided message"
}Perfect! I've successfully committed all the changes with your exact commit message. Let me verify the commit was created properly:
🔧 Tool: Bash
Input: {
"command": "git status",
"description": "Verify git status after commit"
}## Commit Successful! ✅
I've successfully committed all the changes with your provided commit message. Here's what was committed:
- **Files changed:** 3 files
- **Insertions:** 187 lines added
- **Deletions:** 18 lines removed
- **New file created:** `.automaker/agents-context/feature-1765316742659-rll51tb62.md`
The changes included modifications to:
1. `.automaker/feature_list.json`
2. `app/electron/services/feature-executor.js`
3. A new agents-context file
Your commit message has been preserved exactly as you provided it, documenting the issue about the commit button behavior when using follow-up prompts versus the conventional commits generated when automated testing is enabled.
The commit is now ready and your branch is ahead of `origin/main` by 3 commits total. You can push these changes whenever you're ready.✓ Changes committed successfully
✅ Task completed: Changes committed successfully
## Follow-up Instructions
So its seems there is still something wrong i clicked the commit messsage but u still used our feature as title and didnt follow the rules we have in feature-executor.js maybe the commit button is not using it at all ? debug it
🔄 Resuming implementation for: We implemented the follow up prompt and waiting approval column its work well but when we click commit button its commiting with the title of follow up prompt i dont like this i would prefer the convencional commit that u as agent is creating when skip automated testing mode is off and u commit it in nice way look how we generate commit / handle it when automated testing is enabled and see how we do it when its disabled and its waiting for our approval and commit button how its handle it
I'll debug this issue. Let me trace the flow from when the "Commit" button is clicked to see what's actually happening.
🔧 Tool: Grep
Input: {
"pattern": "commit.*button|commitChangesOnly|commit-feature",
"-i": true,
"output_mode": "content"
}Let me trace the full flow. First, let me look at the kanban-card.tsx to see what IPC call is made when the button is clicked:
🔧 Tool: Read
Input: {
"file_path": "/Users/shirone/Documents/Projekty/automaker/app/src/components/views/kanban-card.tsx"
}Now let me look at the board-view.tsx to see how the `onCommit` callback is defined:
🔧 Tool: Read
Input: {
"file_path": "/Users/shirone/Documents/Projekty/automaker/app/src/components/views/board-view.tsx"
}Now I need to trace where the `handleCommitFeature` function calls. Let me see what IPC it's calling - it uses `api.autoMode.commitFeature`. Let me look at the preload.js and main.js to see how this is routed:
🔧 Tool: Read
Input: {
"file_path": "/Users/shirone/Documents/Projekty/automaker/app/electron/preload.js"
}Now let me look at the main.js to see how "auto-mode:commit-feature" is handled:
🔧 Tool: Read
Input: {
"file_path": "/Users/shirone/Documents/Projekty/automaker/app/electron/main.js",
"offset": 530,
"limit": 50
}So the commit feature goes to `autoModeService.commitFeature`. Let me check the auto-mode-service.js to see how `commitFeature` is implemented:
🔧 Tool: Read
Input: {
"file_path": "/Users/shirone/Documents/Projekty/automaker/app/electron/auto-mode-service.js",
"offset": 650,
"limit": 100
}I see! So it does call `featureExecutor.commitChangesOnly`. Now let me check the current state of the `feature-executor.js` file to see if the previous edit was actually applied:
🔧 Tool: Read
Input: {
"file_path": "/Users/shirone/Documents/Projekty/automaker/app/electron/services/feature-executor.js",
"offset": 360,
"limit": 120
}The code change from the previous session IS there. The `commitChangesOnly` method has been updated to use proper conventional commits. Looking at the logs from the previous context, the agent that was spawned to commit the changes did NOT follow the instructions properly.
Wait - looking at the previous context more carefully:
```
I'll commit the current changes with the exact commit message you provided. Let me first check the git status and then proceed with the commit.
```
And then it used:
```
git commit -m "Kanban: We implemented the follow up prompt and waiting approval column..."
```
This looks like the agent was NOT using the new prompt. The issue could be:
1. The file wasn't saved before the commit was run
2. There's some caching issue
3. The electron app wasn't restarted to pick up the new code
Let me verify the commit was actually made incorrectly by checking git log:
🔧 Tool: Bash
Input: {
"command": "git log --oneline -5",
"description": "Check recent commit history"
}Interesting - the commits in the history are proper conventional commits! Let me check if there are uncommitted changes:
🔧 Tool: Bash
Input: {
"command": "git status",
"description": "Check git status"
}The changes to `feature-executor.js` haven't been committed yet. The previous context shows the agent thought it committed the changes but actually:
1. The changes to `feature-executor.js` were made
2. But then the electron app ran the OLD code (since it wasn't restarted)
3. The agent that was spawned for the commit used the OLD prompt
The feature change IS in place in the file, but it was never actually used because the electron app wasn't restarted to pick up the changes.
Let me verify the current state of the feature-executor.js file has the changes:
🔧 Tool: Bash
Input: {
"command": "git diff app/electron/services/feature-executor.js | head -100",
"description": "Check diff for feature-executor.js"
}The change is correct. The issue is that the previous testing happened before the Electron app was restarted to pick up the new code.
The code change is complete. The `commitChangesOnly` method now:
1. Runs `git status` to see all changes
2. Runs `git diff` to see actual code changes
3. Runs `git log --oneline -5` to see the repo's commit message style
4. Analyzes changes to create a proper conventional commit message
5. Uses `type(scope): description` format
6. Adds the proper footer
Now I need to mark this feature as verified using the UpdateFeatureStatus tool:
🔧 Tool: mcp__automaker-tools__UpdateFeatureStatus
Input: {
"featureId": "feature-1765316742659-rll51tb62",
"status": "verified"
}## Summary
The code change was already correctly implemented in the previous session. The issue you experienced was that **the Electron app was still running the OLD code** because it wasn't restarted after the file was modified.
### What was changed:
**File:** `/Users/shirone/Documents/Projekty/automaker/app/electron/services/feature-executor.js`
**Method:** `commitChangesOnly`
**Before:** The prompt simply told the agent to use `"${feature.category}: ${feature.description}"` as the commit message directly.
**After:** The new prompt instructs the agent to:
1. Run `git status` to see all changed files
2. Run `git diff` to see the actual code changes
3. Run `git log --oneline -5` to see recent commit message styles
4. **Analyze the changes and create a proper conventional commit** using `type(scope): description` format
5. Include the proper footer with "Generated with Claude Code" and co-author
### To test this fix:
1. **Restart the Electron app** (or rebuild/reload if using hot reload)
2. Have a feature in "Waiting Approval" status
3. Click the "Commit" button
4. The agent should now analyze the actual changes and create a proper conventional commit like:
- `feat(kanban): Improve commit message generation for waiting approval features`
- Instead of: `Kanban: We implemented the follow up prompt...`
The feature status has been updated to "waiting_approval" for your manual review and commit.✓ Feature successfully verified and completed
✅ Task completed: I'll debug this issue. Let me trace the flow from when the "Commit" button is clicked to see what's actually happening.Let me trace the full flow. First, let me look at the kanban-card.tsx to see what IPC call is made when the button is clicked:Now let me look at the board-view.tsx to see how the `onCommit` callback is defined:Now I need to trace where the `handleCommitFeature` function calls. Let me see what IPC it's calling - it uses `api.autoMode.commitFeature`. Let me look at the preload.js
📝 Committing changes for: We implemented the follow up prompt and waiting approval column its work well but when we click commit button its commiting with the title of follow up prompt i dont like this i would prefer the convencional commit that u as agent is creating when skip automated testing mode is off and u commit it in nice way look how we generate commit / handle it when automated testing is enabled and see how we do it when its disabled and its waiting for our approval and commit button how its handle it
I'll help you commit the current changes with the provided commit message. Let me follow the steps you outlined.
🔧 Tool: Bash
Input: {
"command": "git add .",
"description": "Stage all changes for commit"
}

32
app/src/components/views/kanban-card.tsx
View File

@@ -20,7 +20,7 @@ import {
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { Feature } from "@/store/app-store";
import { Feature, useAppStore } from "@/store/app-store";
import {
GripVertical,
Edit,
@@ -94,6 +94,12 @@ export function KanbanCard({
const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
const [isSummaryDialogOpen, setIsSummaryDialogOpen] = useState(false);
const [agentInfo, setAgentInfo] = useState<AgentTaskInfo | null>(null);
const { kanbanCardDetailLevel } = useAppStore();
// Helper functions to check what should be shown based on detail level
const showSteps = kanbanCardDetailLevel === "standard" || kanbanCardDetailLevel === "detailed";
const showAgentInfo = kanbanCardDetailLevel === "detailed";
const showProgressBar = kanbanCardDetailLevel === "standard" || kanbanCardDetailLevel === "detailed";
// Load context file for in_progress, waiting_approval, and verified features
useEffect(() => {
@@ -261,8 +267,8 @@ export function KanbanCard({
</div>
</CardHeader>
<CardContent className="p-3 pt-0">
{/* Steps Preview */}
{feature.steps.length > 0 && (
{/* Steps Preview - Show in Standard and Detailed modes */}
{showSteps && feature.steps.length > 0 && (
<div className="mb-3 space-y-1">
{feature.steps.slice(0, 3).map((step, index) => (
<div
@@ -286,9 +292,25 @@ export function KanbanCard({
)}
{/* Agent Info Panel - shows for in_progress, waiting_approval, verified */}
{feature.status !== "backlog" && agentInfo && (
{/* Standard mode: Only show progress bar */}
{showProgressBar && !showAgentInfo && feature.status !== "backlog" && agentInfo && (isCurrentAutoTask || feature.status === "in_progress") && (
<div className="mb-3 space-y-1">
<div className="w-full h-1.5 bg-zinc-800 rounded-full overflow-hidden">
<div
className="w-full h-full bg-primary transition-transform duration-500 ease-out origin-left"
style={{ transform: `translateX(${agentInfo.progressPercentage - 100}%)` }}
/>
</div>
<div className="flex items-center justify-between text-[10px] text-muted-foreground">
<span>{Math.round(agentInfo.progressPercentage)}%</span>
</div>
</div>
)}
{/* Detailed mode: Show all agent info */}
{showAgentInfo && feature.status !== "backlog" && agentInfo && (
<div className="mb-3 space-y-2">
{/* Model & Progress Bar */}
{/* Model & Phase */}
<div className="flex items-center gap-2 text-xs">
<div className="flex items-center gap-1 text-cyan-400">
<Cpu className="w-3 h-3" />

68
app/src/components/views/settings-view.tsx
View File

@@ -6,10 +6,10 @@ import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Settings, Key, Eye, EyeOff, CheckCircle2, AlertCircle, Loader2, Zap, Sun, Moon, Palette } from "lucide-react";
import { Settings, Key, Eye, EyeOff, CheckCircle2, AlertCircle, Loader2, Zap, Sun, Moon, Palette, LayoutGrid, Minimize2, Square, Maximize2 } from "lucide-react";
export function SettingsView() {
const { apiKeys, setApiKeys, setCurrentView, theme, setTheme } = useAppStore();
const { apiKeys, setApiKeys, setCurrentView, theme, setTheme, kanbanCardDetailLevel, setKanbanCardDetailLevel } = useAppStore();
const [anthropicKey, setAnthropicKey] = useState(apiKeys.anthropic);
const [googleKey, setGoogleKey] = useState(apiKeys.google);
const [showAnthropicKey, setShowAnthropicKey] = useState(false);
@@ -353,6 +353,70 @@ export function SettingsView() {
</div>
</div>
{/* Kanban Card Display Section */}
<div className="rounded-xl border border-white/10 bg-zinc-900/50 backdrop-blur-md overflow-hidden">
<div className="p-6 border-b border-white/10">
<div className="flex items-center gap-2 mb-2">
<LayoutGrid className="w-5 h-5 text-brand-500" />
<h2 className="text-lg font-semibold text-white">Kanban Card Display</h2>
</div>
<p className="text-sm text-zinc-400">
Control how much information is displayed on Kanban cards.
</p>
</div>
<div className="p-6 space-y-4">
<div className="space-y-3">
<Label className="text-zinc-300">Detail Level</Label>
<div className="grid grid-cols-3 gap-3">
<button
onClick={() => setKanbanCardDetailLevel("minimal")}
className={`flex flex-col items-center justify-center gap-2 px-4 py-4 rounded-lg border transition-all ${
kanbanCardDetailLevel === "minimal"
? "bg-white/5 border-brand-500 text-white"
: "bg-zinc-950/50 border-white/10 text-zinc-400 hover:text-white hover:bg-white/5"
}`}
data-testid="kanban-detail-minimal"
>
<Minimize2 className="w-5 h-5" />
<span className="font-medium text-sm">Minimal</span>
<span className="text-xs text-zinc-500 text-center">Title & category only</span>
</button>
<button
onClick={() => setKanbanCardDetailLevel("standard")}
className={`flex flex-col items-center justify-center gap-2 px-4 py-4 rounded-lg border transition-all ${
kanbanCardDetailLevel === "standard"
? "bg-white/5 border-brand-500 text-white"
: "bg-zinc-950/50 border-white/10 text-zinc-400 hover:text-white hover:bg-white/5"
}`}
data-testid="kanban-detail-standard"
>
<Square className="w-5 h-5" />
<span className="font-medium text-sm">Standard</span>
<span className="text-xs text-zinc-500 text-center">Steps & progress</span>
</button>
<button
onClick={() => setKanbanCardDetailLevel("detailed")}
className={`flex flex-col items-center justify-center gap-2 px-4 py-4 rounded-lg border transition-all ${
kanbanCardDetailLevel === "detailed"
? "bg-white/5 border-brand-500 text-white"
: "bg-zinc-950/50 border-white/10 text-zinc-400 hover:text-white hover:bg-white/5"
}`}
data-testid="kanban-detail-detailed"
>
<Maximize2 className="w-5 h-5" />
<span className="font-medium text-sm">Detailed</span>
<span className="text-xs text-zinc-500 text-center">Model, tools & tasks</span>
</button>
</div>
<p className="text-xs text-zinc-500">
<strong>Minimal:</strong> Shows only title and category<br />
<strong>Standard:</strong> Adds steps preview and progress bar<br />
<strong>Detailed:</strong> Shows all info including model, tool calls, task list, and summaries
</p>
</div>
</div>
</div>
{/* Save Button */}
<div className="flex items-center gap-4">
<Button

12
app/src/store/app-store.ts
View File

@@ -4,6 +4,7 @@ import type { Project } from "@/lib/electron";
export type ViewMode = "welcome" | "spec" | "board" | "agent" | "settings" | "tools" | "interview" | "context";
export type ThemeMode = "light" | "dark" | "system";
export type KanbanCardDetailLevel = "minimal" | "standard" | "detailed";
export interface ApiKeys {
anthropic: string;
@@ -98,6 +99,9 @@ export interface AppState {
runningAutoTasks: string[]; // Feature IDs being worked on (supports concurrent tasks)
autoModeActivityLog: AutoModeActivity[];
maxConcurrency: number; // Maximum number of concurrent agent tasks
// Kanban Card Display Settings
kanbanCardDetailLevel: KanbanCardDetailLevel; // Level of detail shown on kanban cards
}
export interface AutoModeActivity {
@@ -162,6 +166,9 @@ export interface AppActions {
clearAutoModeActivity: () => void;
setMaxConcurrency: (max: number) => void;
// Kanban Card Settings actions
setKanbanCardDetailLevel: (level: KanbanCardDetailLevel) => void;
// Reset
reset: () => void;
}
@@ -186,6 +193,7 @@ const initialState: AppState = {
runningAutoTasks: [],
autoModeActivityLog: [],
maxConcurrency: 3, // Default to 3 concurrent agents
kanbanCardDetailLevel: "standard", // Default to standard detail level
};
export const useAppStore = create<AppState & AppActions>()(
@@ -400,6 +408,9 @@ export const useAppStore = create<AppState & AppActions>()(
setMaxConcurrency: (max) => set({ maxConcurrency: max }),
// Kanban Card Settings actions
setKanbanCardDetailLevel: (level) => set({ kanbanCardDetailLevel: level }),
// Reset
reset: () => set(initialState),
}),
@@ -415,6 +426,7 @@ export const useAppStore = create<AppState & AppActions>()(
chatSessions: state.chatSessions,
chatHistoryOpen: state.chatHistoryOpen,
maxConcurrency: state.maxConcurrency,
kanbanCardDetailLevel: state.kanbanCardDetailLevel,
}),
}
)