feat: implement UI enhancements

package.json

@@ -16,6 +16,7 @@
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-collapsible": "^1.1.11",
     "@radix-ui/react-dialog": "^1.1.14",
+    "@radix-ui/react-hover-card": "^1.1.15",
     "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-select": "^2.2.5",
     "@radix-ui/react-separator": "^1.1.7",

src/app/action-required/page.tsx

@@ -33,7 +33,6 @@ import {
   ExternalLink,
   RefreshCw,
   LucideIcon,
-  GitMerge,
   AlertCircle,
   CheckCircle2,
   XCircle,
@@ -74,6 +73,12 @@ interface ActionItem {
 const VALID_TABS = ["assigned", "mentions", "stale"] as const;
 type ValidTab = (typeof VALID_TABS)[number];
 
+function extractIssueNumber(url?: string): string | null {
+  if (!url) return null;
+  const match = url.match(/\/(issues|pull)\/(\d+)/);
+  return match ? match[2] : null;
+}
+
 function formatTimeAgo(dateString: string): string {
   const now = new Date();
   const past = new Date(dateString);
@@ -436,6 +441,11 @@ function ActionRequiredContent() {
                   <div className="flex items-center gap-2">
                     <div className="min-w-0 flex-1">
                       <div className="flex items-center gap-2">
+                        {extractIssueNumber(item.url) && (
+                          <span className="text-sm text-gray-500 dark:text-gray-400 font-mono flex-shrink-0">
+                            #{extractIssueNumber(item.url)}
+                          </span>
+                        )}
                         <a
                           href={isValidUrl(item.url) ? item.url : "#"}
                           target="_blank"

src/app/login/page.tsx

@@ -4,7 +4,7 @@ import { Suspense } from "react";
 import Link from "next/link";
 import { useSearchParams } from "next/navigation";
 import { signIn } from "next-auth/react";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { useRequireGuest } from "@/hooks/useAuth";
 

src/components/command/CommandPalette.tsx

@@ -14,16 +14,13 @@ import {
 import { useNavigationStore, useSearchStore, usePreferencesStore, useAuthStore } from "@/stores"
 import { menuItems } from "@/config/menu"
 import {
-  Home,
   Search,
   Settings,
   Moon,
   Sun,
   LogOut,
   Monitor,
   Clock,
-  Star,
-  Users,
   GitBranch,
 } from "lucide-react"
 import { signOut } from "next-auth/react"

src/components/common/DetailPanel.tsx

@@ -0,0 +1,241 @@
+"use client";
+
+import { X, ExternalLink, Calendar, MessageCircle, Tag, User as UserIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Card, CardContent } from "@/components/ui/card";
+import { useEffect, useState } from "react";
+
+export interface IssueDetail {
+  number: number;
+  title: string;
+  body: string | null;
+  url: string;
+  repository: string;
+  repositoryUrl: string;
+  state: "open" | "closed";
+  author: {
+    login: string;
+    avatar_url: string;
+  };
+  labels: Array<{
+    name: string;
+    color: string;
+  }>;
+  created_at: string;
+  updated_at: string;
+  comments: number;
+  assignees?: Array<{
+    login: string;
+    avatar_url: string;
+  }>;
+}
+
+interface DetailPanelProps {
+  isOpen: boolean;
+  onClose: () => void;
+  issue: IssueDetail | null;
+  comments?: Array<{
+    id: number;
+    user: {
+      login: string;
+      avatar_url: string;
+    };
+    body: string;
+    created_at: string;
+  }>;
+  loading?: boolean;
+}
+
+function formatDate(dateString: string): string {
+  const date = new Date(dateString);
+  return date.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+  });
+}
+
+export function DetailPanel({ isOpen, onClose, issue, comments, loading }: DetailPanelProps) {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    if (isOpen) {
+      setTimeout(() => setIsVisible(true), 10);
+    } else {
+      setIsVisible(false);
+    }
+  }, [isOpen]);
+
+  if (!isOpen && !isVisible) return null;
+
+  return (
+    <>
+      <div
+        className={`fixed inset-0 bg-black/50 z-40 transition-opacity duration-300 ${
+          isVisible ? "opacity-100" : "opacity-0"
+        }`}
+        onClick={onClose}
+      />
+
+      <div
+        className={`fixed right-0 top-0 h-full w-full md:w-[600px] bg-background border-l border-border z-50 shadow-2xl transform transition-transform duration-300 ${
+          isVisible ? "translate-x-0" : "translate-x-full"
+        }`}
+      >
+        <div className="h-full flex flex-col">
+          <div className="flex items-center justify-between p-4 border-b border-border">
+            <h2 className="text-lg font-semibold">Issue Details</h2>
+            <Button variant="ghost" size="icon" onClick={onClose}>
+              <X className="w-5 h-5" />
+            </Button>
+          </div>
+
+          {loading && (
+            <div className="flex-1 flex items-center justify-center">
+              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary" />
+            </div>
+          )}
+
+          {!loading && issue && (
+            <div className="flex-1 overflow-y-auto p-6 space-y-6">
+              <div className="flex items-start justify-between gap-4">
+                <div className="flex-1">
+                  <div className="flex items-center gap-2 text-sm text-muted-foreground mb-2">
+                    <span className="font-mono">#{issue.number}</span>
+                    <Badge variant={issue.state === "open" ? "default" : "secondary"}>
+                      {issue.state}
+                    </Badge>
+                  </div>
+                  <h3 className="text-xl font-bold mb-2">{issue.title}</h3>
+                  <a
+                    href={issue.repositoryUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-sm text-muted-foreground hover:text-foreground flex items-center gap-1"
+                  >
+                    {issue.repository}
+                    <ExternalLink className="w-3 h-3" />
+                  </a>
+                </div>
+              </div>
+
+              <div className="flex items-center gap-4 text-sm text-muted-foreground">
+                <div className="flex items-center gap-2">
+                  <Avatar className="w-6 h-6">
+                    <AvatarImage src={issue.author.avatar_url} alt={issue.author.login} />
+                    <AvatarFallback>{issue.author.login.charAt(0).toUpperCase()}</AvatarFallback>
+                  </Avatar>
+                  <span>{issue.author.login}</span>
+                </div>
+                <div className="flex items-center gap-1">
+                  <Calendar className="w-4 h-4" />
+                  <span>Opened {formatDate(issue.created_at)}</span>
+                </div>
+                <div className="flex items-center gap-1">
+                  <MessageCircle className="w-4 h-4" />
+                  <span>{issue.comments} comments</span>
+                </div>
+              </div>
+
+              {issue.labels && issue.labels.length > 0 && (
+                <div className="flex items-start gap-2">
+                  <Tag className="w-4 h-4 mt-1 text-muted-foreground" />
+                  <div className="flex flex-wrap gap-2">
+                    {issue.labels.map((label, idx) => (
+                      <Badge
+                        key={idx}
+                        variant="outline"
+                        style={{
+                          borderColor: `#${label.color}`,
+                          backgroundColor: `#${label.color}20`,
+                          color: `#${label.color}`,
+                        }}
+                      >
+                        {label.name}
+                      </Badge>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {issue.assignees && issue.assignees.length > 0 && (
+                <div className="flex items-start gap-2">
+                  <UserIcon className="w-4 h-4 mt-1 text-muted-foreground" />
+                  <div className="flex flex-wrap gap-2">
+                    {issue.assignees.map((assignee, idx) => (
+                      <div key={idx} className="flex items-center gap-2">
+                        <Avatar className="w-6 h-6">
+                          <AvatarImage src={assignee.avatar_url} alt={assignee.login} />
+                          <AvatarFallback>{assignee.login.charAt(0).toUpperCase()}</AvatarFallback>
+                        </Avatar>
+                        <span className="text-sm">{assignee.login}</span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              <div>
+                <h4 className="font-semibold mb-3">Description</h4>
+                <Card>
+                  <CardContent className="p-4">
+                    {issue.body ? (
+                      <div className="text-sm whitespace-pre-wrap break-words">
+                        {issue.body}
+                      </div>
+                    ) : (
+                      <p className="text-muted-foreground italic">No description provided.</p>
+                    )}
+                  </CardContent>
+                </Card>
+              </div>
+
+              {comments && comments.length > 0 && (
+                <div>
+                  <h4 className="font-semibold mb-3">Recent Comments ({comments.length})</h4>
+                  <div className="space-y-3">
+                    {comments.slice(0, 5).map((comment) => (
+                      <Card key={comment.id}>
+                        <CardContent className="p-4">
+                          <div className="flex items-center gap-2 mb-2">
+                            <Avatar className="w-6 h-6">
+                              <AvatarImage src={comment.user.avatar_url} alt={comment.user.login} />
+                              <AvatarFallback>{comment.user.login.charAt(0).toUpperCase()}</AvatarFallback>
+                            </Avatar>
+                            <span className="text-sm font-medium">{comment.user.login}</span>
+                            <span className="text-xs text-muted-foreground">
+                              {formatDate(comment.created_at)}
+                            </span>
+                          </div>
+                          <div className="text-sm whitespace-pre-wrap break-words">
+                            {comment.body}
+                          </div>
+                        </CardContent>
+                      </Card>
+                    ))}
+                    {comments.length > 5 && (
+                      <p className="text-sm text-muted-foreground text-center">
+                        And {comments.length - 5} more comments...
+                      </p>
+                    )}
+                  </div>
+                </div>
+              )}
+
+              <div className="flex gap-2 pt-4">
+                <Button asChild className="flex-1">
+                  <a href={issue.url} target="_blank" rel="noopener noreferrer">
+                    <ExternalLink className="w-4 h-4 mr-2" />
+                    View on GitHub
+                  </a>
+                </Button>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+}

src/components/kanban/ColumnManagementModal.tsx

@@ -176,7 +176,7 @@ export function ColumnManagementModal({
   isOpen,
   onClose,
 }: ColumnManagementModalProps) {
-  const { columns, columnOrder, updateColumn, addColumn, deleteColumn, reorderColumns, tasks } =
+  const { columns, columnOrder, updateColumn, addColumn, deleteColumn, reorderColumns } =
     useKanbanStore();
   const [showAddColumn, setShowAddColumn] = useState(false);
   const [newColumnTitle, setNewColumnTitle] = useState("");
@@ -206,6 +206,10 @@ export function ColumnManagementModal({
     }
   };
 
+  const handleUpdateColumn = (id: string, title: string, color: string) => {
+    updateColumn(id, { title, color });
+  };
+
   const handleDeleteColumn = (columnId: string) => {
     const column = columns[columnId];
     const taskCount = column?.taskIds.length || 0;
@@ -262,7 +266,7 @@ export function ColumnManagementModal({
                     title={column.title}
                     color={column.color}
                     taskCount={column.taskIds.length}
-                    onUpdate={updateColumn}
+                    onUpdate={handleUpdateColumn}
                     onDelete={handleDeleteColumn}
                   />
                 );

src/components/kanban/KanbanBoard.tsx

@@ -391,7 +391,7 @@ export function KanbanBoard() {
           const repo = urlParts[urlParts.length - 3];
           const number = parseInt(urlParts[urlParts.length - 1], 10);
 
-          githubAPIClient.setToken(orgData.token);
+          githubAPIClient.setUserToken(orgData.token);
 
           const result =
             task.type === "github-issue"