Add better github issue tracking and UX

auto-claude-ui/src/renderer/App.tsx

@@ -258,8 +258,8 @@ export function App() {
   const handleGoToTask = (taskId: string) => {
     // Switch to kanban view
     setActiveView('kanban');
-    // Find and select the task
-    const task = tasks.find((t) => t.id === taskId);
+    // Find and select the task (match by id or specId)
+    const task = tasks.find((t) => t.id === taskId || t.specId === taskId);
     if (task) {
       setSelectedTask(task);
     }
@@ -340,10 +340,13 @@ export function App() {
                   <Insights projectId={selectedProjectId} />
                 )}
                 {activeView === 'github-issues' && selectedProjectId && (
-                  <GitHubIssues onOpenSettings={() => {
-                    setSettingsInitialProjectSection('github');
-                    setIsSettingsDialogOpen(true);
-                  }} />
+                  <GitHubIssues
+                    onOpenSettings={() => {
+                      setSettingsInitialProjectSection('github');
+                      setIsSettingsDialogOpen(true);
+                    }}
+                    onNavigateToTask={handleGoToTask}
+                  />
                 )}
                 {activeView === 'changelog' && selectedProjectId && (
                   <Changelog />

auto-claude-ui/src/renderer/components/GitHubIssues.tsx

@@ -1,5 +1,6 @@
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useMemo } from 'react';
 import { useProjectStore } from '../stores/project-store';
+import { useTaskStore } from '../stores/task-store';
 import { useGitHubIssues, useGitHubInvestigation, useIssueFiltering } from './github-issues/hooks';
 import {
   NotConnectedState,
@@ -12,10 +13,11 @@ import {
 import type { GitHubIssue } from '../../shared/types';
 import type { GitHubIssuesProps } from './github-issues/types';
 
-export function GitHubIssues({ onOpenSettings }: GitHubIssuesProps) {
+export function GitHubIssues({ onOpenSettings, onNavigateToTask }: GitHubIssuesProps) {
   const projects = useProjectStore((state) => state.projects);
   const selectedProjectId = useProjectStore((state) => state.selectedProjectId);
   const selectedProject = projects.find((p) => p.id === selectedProjectId);
+  const tasks = useTaskStore((state) => state.tasks);
 
   const {
     issues,
@@ -43,6 +45,17 @@ export function GitHubIssues({ onOpenSettings }: GitHubIssuesProps) {
   const [showInvestigateDialog, setShowInvestigateDialog] = useState(false);
   const [selectedIssueForInvestigation, setSelectedIssueForInvestigation] = useState<GitHubIssue | null>(null);
 
+  // Build a map of GitHub issue numbers to task IDs for quick lookup
+  const issueToTaskMap = useMemo(() => {
+    const map = new Map<number, string>();
+    for (const task of tasks) {
+      if (task.metadata?.githubIssueNumber) {
+        map.set(task.metadata.githubIssueNumber, task.specId || task.id);
+      }
+    }
+    return map;
+  }, [tasks]);
+
   const handleInvestigate = useCallback((issue: GitHubIssue) => {
     setSelectedIssueForInvestigation(issue);
     setShowInvestigateDialog(true);
@@ -110,6 +123,8 @@ export function GitHubIssues({ onOpenSettings }: GitHubIssuesProps) {
                   ? lastInvestigationResult
                   : null
               }
+              linkedTaskId={issueToTaskMap.get(selectedIssue.number)}
+              onViewTask={onNavigateToTask}
             />
           ) : (
             <EmptyState message="Select an issue to view details" />

auto-claude-ui/src/renderer/components/github-issues/components/IssueDetail.tsx

@@ -1,4 +1,4 @@
-import { ExternalLink, User, Clock, MessageCircle, Sparkles, CheckCircle2 } from 'lucide-react';
+import { ExternalLink, User, Clock, MessageCircle, Sparkles, CheckCircle2, Eye } from 'lucide-react';
 import { Badge } from '../../ui/badge';
 import { Button } from '../../ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '../../ui/card';
@@ -11,7 +11,17 @@ import {
 import { formatDate } from '../utils';
 import type { IssueDetailProps } from '../types';
 
-export function IssueDetail({ issue, onInvestigate, investigationResult }: IssueDetailProps) {
+export function IssueDetail({ issue, onInvestigate, investigationResult, linkedTaskId, onViewTask }: IssueDetailProps) {
+  // Determine which task ID to use - either already linked or just created
+  const taskId = linkedTaskId || (investigationResult?.success ? investigationResult.taskId : undefined);
+  const hasLinkedTask = !!taskId;
+
+  const handleViewTask = () => {
+    if (taskId && onViewTask) {
+      onViewTask(taskId);
+    }
+  };
+
   return (
     <ScrollArea className="flex-1">
       <div className="p-4 space-y-4">
@@ -77,31 +87,48 @@ export function IssueDetail({ issue, onInvestigate, investigationResult }: Issue
 
         {/* Actions */}
         <div className="flex items-center gap-2">
-          <Button onClick={onInvestigate} className="flex-1">
-            <Sparkles className="h-4 w-4 mr-2" />
-            Create Task
-          </Button>
+          {hasLinkedTask ? (
+            <Button onClick={handleViewTask} className="flex-1" variant="secondary">
+              <Eye className="h-4 w-4 mr-2" />
+              View Task
+            </Button>
+          ) : (
+            <Button onClick={onInvestigate} className="flex-1">
+              <Sparkles className="h-4 w-4 mr-2" />
+              Create Task
+            </Button>
+          )}
         </div>
 
-        {/* Task Created Result */}
-        {investigationResult?.success && (
+        {/* Task Linked Info */}
+        {hasLinkedTask && (
           <Card className="bg-success/5 border-success/30">
             <CardHeader className="pb-2">
               <CardTitle className="text-sm flex items-center gap-2 text-success">
                 <CheckCircle2 className="h-4 w-4" />
-                Task Created
+                Task Linked
               </CardTitle>
             </CardHeader>
             <CardContent className="text-sm space-y-2">
-              <p className="text-foreground">{investigationResult.analysis.summary}</p>
-              <div className="flex items-center gap-2">
-                <Badge className={GITHUB_COMPLEXITY_COLORS[investigationResult.analysis.estimatedComplexity]}>
-                  {investigationResult.analysis.estimatedComplexity}
-                </Badge>
-                <span className="text-xs text-muted-foreground">
-                  Task ID: {investigationResult.taskId}
-                </span>
-              </div>
+              {investigationResult?.success ? (
+                <>
+                  <p className="text-foreground">{investigationResult.analysis.summary}</p>
+                  <div className="flex items-center gap-2">
+                    <Badge className={GITHUB_COMPLEXITY_COLORS[investigationResult.analysis.estimatedComplexity]}>
+                      {investigationResult.analysis.estimatedComplexity}
+                    </Badge>
+                    <span className="text-xs text-muted-foreground">
+                      Task ID: {taskId}
+                    </span>
+                  </div>
+                </>
+              ) : (
+                <div className="flex items-center gap-2">
+                  <span className="text-xs text-muted-foreground">
+                    Task ID: {taskId}
+                  </span>
+                </div>
+              )}
             </CardContent>
           </Card>
         )}

auto-claude-ui/src/renderer/components/github-issues/types/index.ts

@@ -4,6 +4,8 @@ export type FilterState = 'open' | 'closed' | 'all';
 
 export interface GitHubIssuesProps {
   onOpenSettings?: () => void;
+  /** Navigate to view a task in the kanban board */
+  onNavigateToTask?: (taskId: string) => void;
 }
 
 export interface IssueListItemProps {
@@ -17,6 +19,10 @@ export interface IssueDetailProps {
   issue: GitHubIssue;
   onInvestigate: () => void;
   investigationResult: GitHubInvestigationResult | null;
+  /** ID of existing task linked to this issue (from metadata.githubIssueNumber) */
+  linkedTaskId?: string;
+  /** Handler to navigate to view the linked task */
+  onViewTask?: (taskId: string) => void;
 }
 
 export interface InvestigationDialogProps {

auto-claude-ui/src/renderer/stores/task-store.ts

@@ -514,6 +514,19 @@ export function isDraftEmpty(draft: TaskDraft | null): boolean {
   );
 }
 
+// ============================================
+// GitHub Issue Linking Helpers
+// ============================================
+
+/**
+ * Find a task by GitHub issue number
+ * Used to check if a task already exists for a GitHub issue
+ */
+export function getTaskByGitHubIssue(issueNumber: number): Task | undefined {
+  const store = useTaskStore.getState();
+  return store.tasks.find(t => t.metadata?.githubIssueNumber === issueNumber);
+}
+
 // ============================================
 // Task State Detection Helpers
 // ============================================