ros/claude-task-master
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(extension): complete VS Code extension with kanban board interface (#997)

Browse Source 
---------
Co-authored-by: DavidMaliglowka <13022280+DavidMaliglowka@users.noreply.github.com>
Co-authored-by: Ralph Khreish <35776126+Crunchyman-ralph@users.noreply.github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
This commit is contained in:
DavidMaliglowka
2025-08-01 07:04:22 -05:00
committed by GitHub
parent 60c03c548d
commit 64302dc191
101 changed files with 20608 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
apps/extension/src/webview/components/EmptyState.tsx Normal file
View File

@@ -0,0 +1,138 @@
import React from 'react';
import { ExternalLink, Terminal, MessageSquare, Plus } from 'lucide-react';
import { TaskMasterLogo } from '../../components/TaskMasterLogo';
interface EmptyStateProps {
currentTag: string;
}
export const EmptyState: React.FC<EmptyStateProps> = ({ currentTag }) => {
return (
<div className="flex items-center justify-center h-full overflow-auto">
<div className="max-w-2xl mx-auto text-center p-8">
{/* Empty state illustration */}
<div className="mb-8 max-w-96 mx-auto">
<TaskMasterLogo className="w-32 h-32 mx-auto text-vscode-foreground/20" />
</div>
<h2 className="text-2xl font-semibold mb-2 text-vscode-foreground">
No tasks in "{currentTag}" tag
</h2>
<p className="text-vscode-foreground/70 mb-8">
Get started by adding tasks to this tag using the commands below
</p>
{/* Command suggestions */}
<div className="space-y-4 text-left">
<div className="bg-vscode-editor-background/50 border border-vscode-panel-border rounded-lg p-4">
<div className="flex items-center gap-2 mb-2">
<Terminal className="w-4 h-4 text-vscode-terminal-ansiGreen" />
<h3 className="font-medium">CLI Commands</h3>
</div>
<div className="space-y-2">
<div className="bg-vscode-editor-background rounded p-2 font-mono text-sm">
<span className="text-vscode-terminal-ansiYellow">
task-master
</span>{' '}
<span className="text-vscode-terminal-ansiCyan">parse-prd</span>{' '}
<span className="text-vscode-foreground/70">
&lt;path-to-prd&gt;
</span>{' '}
<span className="text-vscode-terminal-ansiMagenta">
--append
</span>
<div className="text-xs text-vscode-foreground/50 mt-1">
Parse a PRD and append tasks to current tag
</div>
</div>
<div className="bg-vscode-editor-background rounded p-2 font-mono text-sm">
<span className="text-vscode-terminal-ansiYellow">
task-master
</span>{' '}
<span className="text-vscode-terminal-ansiCyan">add-task</span>{' '}
<span className="text-vscode-terminal-ansiMagenta">
--prompt
</span>{' '}
<span className="text-vscode-foreground/70">
"Your task description"
</span>
<div className="text-xs text-vscode-foreground/50 mt-1">
Add a single task with AI assistance
</div>
</div>
<div className="bg-vscode-editor-background rounded p-2 font-mono text-sm">
<span className="text-vscode-terminal-ansiYellow">
task-master
</span>{' '}
<span className="text-vscode-terminal-ansiCyan">add-task</span>{' '}
<span className="text-vscode-terminal-ansiMagenta">--help</span>
<div className="text-xs text-vscode-foreground/50 mt-1">
View all options for adding tasks
</div>
</div>
</div>
</div>
<div className="bg-vscode-editor-background/50 border border-vscode-panel-border rounded-lg p-4">
<div className="flex items-center gap-2 mb-2">
<MessageSquare className="w-4 h-4 text-vscode-textLink-foreground" />
<h3 className="font-medium">MCP Examples</h3>
</div>
<div className="space-y-2 text-sm">
<div className="flex items-start gap-2">
<Plus className="w-4 h-4 mt-0.5 text-vscode-foreground/50" />
<div>
<div className="text-vscode-foreground">
"Add a task to tag {currentTag}: Implement user
authentication"
</div>
</div>
</div>
<div className="flex items-start gap-2">
<Plus className="w-4 h-4 mt-0.5 text-vscode-foreground/50" />
<div>
<div className="text-vscode-foreground">
"Parse this PRD and add tasks to {currentTag}: [paste PRD
content]"
</div>
</div>
</div>
<div className="flex items-start gap-2">
<Plus className="w-4 h-4 mt-0.5 text-vscode-foreground/50" />
<div>
<div className="text-vscode-foreground">
"Create 5 tasks for building a REST API in tag {currentTag}"
</div>
</div>
</div>
</div>
</div>
{/* Documentation link */}
<div className="flex justify-center pt-4">
<a
href="https://docs.task-master.dev"
className="inline-flex items-center gap-2 text-vscode-textLink-foreground hover:text-vscode-textLink-activeForeground transition-colors"
onClick={(e) => {
e.preventDefault();
// Use VS Code API to open external link
if (window.acquireVsCodeApi) {
const vscode = window.acquireVsCodeApi();
vscode.postMessage({
type: 'openExternal',
url: 'https://docs.task-master.dev'
});
}
}}
>
<ExternalLink className="w-4 h-4" />
<span className="text-sm font-medium">
View TaskMaster Documentation
</span>
</a>
</div>
</div>
</div>
</div>
);
};