External/roboco
1
0
Fork 0
mirror of https://github.com/rennf93/roboco.git synced 2026-08-03 07:23:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(panel): clickable Branch/PR links + branch copy button

Browse Source 
The Branch value in the task-detail card and the Branch/PR badges in the task
list were static text. Make them open the real thing on GitHub, keeping their
exact look:

- New repo-url helper normalizes a project git_url (https/ssh, with/without
  .git) into web URLs for a branch (/tree/<branch>) and PR (/pull/<n>),
  returning null so callers fall back to a plain label.
- Task-detail Branch card: the branch is now a link to its GitHub tree URL and
  gains a copy button (reuses CopyButton); PR was already linked.
- List-row git badge (git-status-badge): the PR badge links to task.pr_url
  (or the built pull URL) and the Branch badge links to the branch tree URL.
  The row's click handler already ignores <a> clicks, so opening a branch/PR
  never toggles the row. git_url is threaded via a projectGitUrls map from the
  tasks page, alongside the existing projectNames map.

panel typecheck + eslint clean.
This commit is contained in:
Renn F
2026-06-21 07:15:58 +02:00
parent c3ee5f09ba
commit 0740dc141e
5 changed files with 437 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files
panel/src/components/tasks/git-status-badge.tsx
+48 -9
View File
@@ -1,24 +1,61 @@
"use client";
import type { ReactNode } from "react";
import { GitBranch, GitPullRequest, FileCheck } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Task, TaskStatus } from "@/types";
import { branchUrl, pullUrl } from "@/lib/repo-url";
interface GitStatusBadgeProps {
task: Task;
compact?: boolean;
/** Project git_url — used to build the clickable branch / PR links. */
repoUrl?: string | null;
}
export function GitStatusBadge({ task, compact = true }: GitStatusBadgeProps) {
/**
* Wrap a badge in an external link when a URL is available, otherwise render it
* plain. The badge keeps its exact look; the link only adds the click target
* (and a subtle hover). The parent row's click handler ignores `<a>` clicks, so
* opening a branch/PR never also toggles the row.
*/
function MaybeLink({
href,
children,
}: {
href: string | null;
children: ReactNode;
}) {
if (!href) return <>{children}</>;
return (
<a
href={href}
target="_blank"
rel="noopener noreferrer"
title="Open in GitHub"
className="inline-flex transition-opacity hover:opacity-80"
>
{children}
</a>
);
}
export function GitStatusBadge({
task,
compact = true,
repoUrl,
}: GitStatusBadgeProps) {
// All tasks follow git workflow - show relevant status
// Show PR badge with status (highest priority)
if (task.pr_number) {
return (
<Badge className="gap-1 text-xs bg-purple-500/10 text-purple-600 dark:text-purple-400">
<GitPullRequest className="h-3 w-3" />
PR #{task.pr_number}
</Badge>
<MaybeLink href={task.pr_url ?? pullUrl(repoUrl, task.pr_number)}>
<Badge className="gap-1 text-xs bg-purple-500/10 text-purple-600 dark:text-purple-400">
<GitPullRequest className="h-3 w-3" />
PR #{task.pr_number}
</Badge>
</MaybeLink>
);
}
@@ -55,10 +92,12 @@ export function GitStatusBadge({ task, compact = true }: GitStatusBadgeProps) {
// Show branch badge (when branch exists but no PR yet)
if (task.branch_name) {
return (
<Badge variant="outline" className="gap-1 text-xs">
<GitBranch className="h-3 w-3" />
{compact ? "Branch" : task.branch_name}
</Badge>
<MaybeLink href={branchUrl(repoUrl, task.branch_name)}>
<Badge variant="outline" className="gap-1 text-xs">
<GitBranch className="h-3 w-3" />
{compact ? "Branch" : task.branch_name}
</Badge>
</MaybeLink>
);
}
panel/src/components/tasks/task-detail/task-metadata.tsx
+69 -15
View File
@@ -14,9 +14,24 @@ import {
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { User, Calendar, Clock, Target, AlertTriangle, GitBranch, FolderGit2, Wrench, Briefcase, Hash, GitPullRequest, ExternalLink } from "lucide-react";
import {
User,
Calendar,
Clock,
Target,
AlertTriangle,
GitBranch,
FolderGit2,
Wrench,
Briefcase,
Hash,
GitPullRequest,
ExternalLink,
} from "lucide-react";
import { toast } from "sonner";
import { getAgentDisplayName, resolveToSlug } from "@/lib/agent-utils";
import { branchUrl } from "@/lib/repo-url";
import { CopyButton } from "@/components/ui/copy-button";
import { TaskTypeBadge } from "../task-type-badge";
import { DocsStatusBadge } from "../docs-status-badge";
import Link from "next/link";
@@ -80,6 +95,7 @@ function formatDateForInput(date: string | null): string {
export function TaskMetadata({ task }: TaskMetadataProps) {
const updateTask = useUpdateTask();
const { data: project } = useProject(task.project_id ?? "");
const branchHref = branchUrl(project?.git_url, task.branch_name);
// Editing states - use local state only while editing
const [editingAssigned, setEditingAssigned] = useState(false);
@@ -91,10 +107,14 @@ export function TaskMetadata({ task }: TaskMetadataProps) {
const targetDateInputRef = useRef<HTMLInputElement>(null);
// Display prop value when not editing, local value when editing
const assignedValue = editingAssigned ? localAssignedValue : (task.assigned_to ?? "");
const assignedValue = editingAssigned
? localAssignedValue
: (task.assigned_to ?? "");
const setAssignedValue = (value: string) => setLocalAssignedValue(value);
const targetDateValue = editingTargetDate ? localTargetDateValue : formatDateForInput(task.target_date);
const targetDateValue = editingTargetDate
? localTargetDateValue
: formatDateForInput(task.target_date);
const setTargetDateValue = (value: string) => setLocalTargetDateValue(value);
// Start editing - copy current prop value to local state (resolved to slug)
@@ -173,7 +193,9 @@ export function TaskMetadata({ task }: TaskMetadataProps) {
};
const handleTargetDateSave = async () => {
const newValue = targetDateValue ? new Date(targetDateValue).toISOString() : null;
const newValue = targetDateValue
? new Date(targetDateValue).toISOString()
: null;
if (newValue === task.target_date) {
setEditingTargetDate(false);
return;
@@ -214,13 +236,17 @@ export function TaskMetadata({ task }: TaskMetadataProps) {
onValueChange={handlePriorityChange}
disabled={updateTask.isPending}
>
<SelectTrigger className={`w-full h-8 text-sm border-0 ${priorityColors[task.priority] ?? priorityColors[2]}`}>
<SelectTrigger
className={`w-full h-8 text-sm border-0 ${priorityColors[task.priority] ?? priorityColors[2]}`}
>
<SelectValue />
</SelectTrigger>
<SelectContent>
{Object.entries(priorityLabels).map(([value, label]) => (
<SelectItem key={value} value={value}>
<span className={`px-2 py-0.5 rounded ${priorityColors[parseInt(value)]}`}>
<span
className={`px-2 py-0.5 rounded ${priorityColors[parseInt(value)]}`}
>
{label}
</span>
</SelectItem>
@@ -293,7 +319,9 @@ export function TaskMetadata({ task }: TaskMetadataProps) {
<User className="h-4 w-4" />
Created By
</div>
<span className="font-medium">{getAgentDisplayName(task.created_by)}</span>
<span className="font-medium">
{getAgentDisplayName(task.created_by)}
</span>
</CardContent>
</Card>
@@ -317,7 +345,9 @@ export function TaskMetadata({ task }: TaskMetadataProps) {
<Calendar className="h-4 w-4" />
Created
</div>
<span className="font-medium">{formatRelativeTime(task.created_at)}</span>
<span className="font-medium">
{formatRelativeTime(task.created_at)}
</span>
</CardContent>
</Card>
@@ -328,7 +358,9 @@ export function TaskMetadata({ task }: TaskMetadataProps) {
<Clock className="h-4 w-4" />
Started
</div>
<span className="font-medium">{formatRelativeTime(task.started_at)}</span>
<span className="font-medium">
{formatRelativeTime(task.started_at)}
</span>
</CardContent>
</Card>
@@ -369,7 +401,9 @@ export function TaskMetadata({ task }: TaskMetadataProps) {
<Clock className="h-4 w-4" />
Completed
</div>
<span className="font-medium">{formatRelativeTime(task.completed_at)}</span>
<span className="font-medium">
{formatRelativeTime(task.completed_at)}
</span>
</CardContent>
</Card>
@@ -399,12 +433,15 @@ export function TaskMetadata({ task }: TaskMetadataProps) {
: "bg-purple-100 text-purple-700 dark:bg-purple-900 dark:text-purple-300"
}
>
{task.nature === TaskNature.TECHNICAL ? "Technical" : "Non-Technical"}
{task.nature === TaskNature.TECHNICAL
? "Technical"
: "Non-Technical"}
</Badge>
</CardContent>
</Card>
{/* Branch Name - Read-only (all tasks follow git workflow) */}
{/* Branch Name - read-only, but clickable (opens the branch on GitHub)
and copyable. Same look as before; the link/copy are additive. */}
{task.branch_name && (
<Card>
<CardContent className="pt-4">
@@ -412,9 +449,26 @@ export function TaskMetadata({ task }: TaskMetadataProps) {
<GitBranch className="h-4 w-4" />
Branch
</div>
<Badge variant="outline" className="font-mono text-xs">
{task.branch_name}
</Badge>
<div className="flex items-center gap-1">
{branchHref ? (
<a
href={branchHref}
target="_blank"
rel="noopener noreferrer"
title="Open branch in GitHub"
className="inline-flex transition-opacity hover:opacity-80"
>
<Badge variant="outline" className="font-mono text-xs">
{task.branch_name}
</Badge>
</a>
) : (
<Badge variant="outline" className="font-mono text-xs">
{task.branch_name}
</Badge>
)}
<CopyButton value={task.branch_name} />
</div>
</CardContent>
</Card>
)}
panel/src/components/tasks/task-table.tsx
+124 -35
View File
@@ -54,7 +54,13 @@ const priorityLabels: Record<number, string> = {
};
// Sorting types - exported for parent components
export type SortField = "title" | "status" | "team" | "priority" | "assigned_to" | "created_at";
export type SortField =
| "title"
| "status"
| "team"
| "priority"
| "assigned_to"
| "created_at";
export type SortDirection = "asc" | "desc";
interface SortConfig {
@@ -67,6 +73,8 @@ interface TaskTableProps {
isLoading: boolean;
// id -> display name maps for the Project / Product column
projectNames?: Record<string, string>;
// id -> git_url, used to build clickable branch/PR links on the row badge
projectGitUrls?: Record<string, string>;
productNames?: Record<string, string>;
// Controlled sort props (optional for backwards compatibility)
sortField?: SortField;
@@ -91,7 +99,10 @@ interface TaskTreeNode {
depth: number;
}
function buildTaskTree(tasks: Task[]): { roots: TaskTreeNode[]; childrenMap: Map<string, Task[]> } {
function buildTaskTree(tasks: Task[]): {
roots: TaskTreeNode[];
childrenMap: Map<string, Task[]>;
} {
const taskMap = new Map<string, Task>();
const childrenMap = new Map<string, Task[]>();
@@ -110,7 +121,7 @@ function buildTaskTree(tasks: Task[]): { roots: TaskTreeNode[]; childrenMap: Map
function buildNode(task: Task, depth: number): TaskTreeNode {
const children = (childrenMap.get(task.id) || []).map((child) =>
buildNode(child, depth + 1)
buildNode(child, depth + 1),
);
return { task, children, depth };
}
@@ -129,7 +140,7 @@ function buildTaskTree(tasks: Task[]): { roots: TaskTreeNode[]; childrenMap: Map
function flattenTree(
nodes: TaskTreeNode[],
expandedIds: Set<string>,
result: TaskTreeNode[] = []
result: TaskTreeNode[] = [],
): TaskTreeNode[] {
nodes.forEach((node) => {
result.push(node);
@@ -145,15 +156,33 @@ function TaskTableSkeleton() {
<>
{Array.from({ length: 5 }).map((_, i) => (
<TableRow key={i}>
<TableCell><Skeleton className="h-4 w-3/4" /></TableCell>
<TableCell className="whitespace-nowrap"><Skeleton className="h-6 w-16" /></TableCell>
<TableCell className="whitespace-nowrap"><Skeleton className="h-6 w-12" /></TableCell>
<TableCell className="whitespace-nowrap"><Skeleton className="h-4 w-14" /></TableCell>
<TableCell className="whitespace-nowrap"><Skeleton className="h-4 w-24" /></TableCell>
<TableCell className="whitespace-nowrap"><Skeleton className="h-4 w-8" /></TableCell>
<TableCell className="whitespace-nowrap"><Skeleton className="h-4 w-20" /></TableCell>
<TableCell className="whitespace-nowrap"><Skeleton className="h-4 w-16" /></TableCell>
<TableCell><Skeleton className="h-8 w-8" /></TableCell>
<TableCell>
<Skeleton className="h-4 w-3/4" />
</TableCell>
<TableCell className="whitespace-nowrap">
<Skeleton className="h-6 w-16" />
</TableCell>
<TableCell className="whitespace-nowrap">
<Skeleton className="h-6 w-12" />
</TableCell>
<TableCell className="whitespace-nowrap">
<Skeleton className="h-4 w-14" />
</TableCell>
<TableCell className="whitespace-nowrap">
<Skeleton className="h-4 w-24" />
</TableCell>
<TableCell className="whitespace-nowrap">
<Skeleton className="h-4 w-8" />
</TableCell>
<TableCell className="whitespace-nowrap">
<Skeleton className="h-4 w-20" />
</TableCell>
<TableCell className="whitespace-nowrap">
<Skeleton className="h-4 w-16" />
</TableCell>
<TableCell>
<Skeleton className="h-8 w-8" />
</TableCell>
</TableRow>
))}
</>
@@ -178,7 +207,13 @@ interface SortableHeaderProps {
className?: string;
}
function SortableHeader({ label, field, sortConfig, onSort, className }: SortableHeaderProps) {
function SortableHeader({
label,
field,
sortConfig,
onSort,
className,
}: SortableHeaderProps) {
const isActive = sortConfig?.field === field;
const direction = isActive ? sortConfig.direction : null;
@@ -202,6 +237,7 @@ export function TaskTable({
tasks,
isLoading,
projectNames = {},
projectGitUrls = {},
productNames = {},
sortField: controlledSortField,
sortDirection: controlledSortDirection,
@@ -214,24 +250,35 @@ export function TaskTable({
onExpandedChange,
}: TaskTableProps) {
// Internal state (used when not controlled)
const [internalSortConfig, setInternalSortConfig] = useState<SortConfig | null>({
field: "created_at",
direction: "desc",
});
const [internalSortConfig, setInternalSortConfig] =
useState<SortConfig | null>({
field: "created_at",
direction: "desc",
});
const [internalCurrentPage, setInternalCurrentPage] = useState(1);
const [internalPageSize, setInternalPageSize] = useState(25);
const [internalExpandedIds, setInternalExpandedIds] = useState<Set<string>>(new Set());
const [internalExpandedIds, setInternalExpandedIds] = useState<Set<string>>(
new Set(),
);
// Use controlled or internal state
const isControlled = onSortChange !== undefined;
const sortConfig: SortConfig | null = useMemo(() => {
if (isControlled) {
return controlledSortField
? { field: controlledSortField, direction: controlledSortDirection || "desc" }
? {
field: controlledSortField,
direction: controlledSortDirection || "desc",
}
: null;
}
return internalSortConfig;
}, [isControlled, controlledSortField, controlledSortDirection, internalSortConfig]);
}, [
isControlled,
controlledSortField,
controlledSortDirection,
internalSortConfig,
]);
const currentPage = controlledCurrentPage ?? internalCurrentPage;
const pageSize = controlledPageSize ?? internalPageSize;
const expandedIds = controlledExpandedIds ?? internalExpandedIds;
@@ -292,7 +339,11 @@ export function TaskTable({
const bAssigned = b.task.assigned_to || "";
return multiplier * aAssigned.localeCompare(bAssigned);
case "created_at":
return multiplier * (new Date(a.task.created_at).getTime() - new Date(b.task.created_at).getTime());
return (
multiplier *
(new Date(a.task.created_at).getTime() -
new Date(b.task.created_at).getTime())
);
default:
return 0;
}
@@ -385,10 +436,20 @@ export function TaskTable({
{hasAnyChildren && !isLoading && (
<div className="flex items-center gap-2 px-4 py-2 border-b bg-muted/30">
<span className="text-sm text-muted-foreground">Tree view:</span>
<Button variant="ghost" size="sm" className="h-7 text-xs" onClick={expandAll}>
<Button
variant="ghost"
size="sm"
className="h-7 text-xs"
onClick={expandAll}
>
Expand all
</Button>
<Button variant="ghost" size="sm" className="h-7 text-xs" onClick={collapseAll}>
<Button
variant="ghost"
size="sm"
className="h-7 text-xs"
onClick={collapseAll}
>
Collapse all
</Button>
</div>
@@ -418,7 +479,9 @@ export function TaskTable({
onSort={handleSort}
className="whitespace-nowrap"
/>
<TableHead className="whitespace-nowrap">Project / Product</TableHead>
<TableHead className="whitespace-nowrap">
Project / Product
</TableHead>
<SortableHeader
label="Priority"
field="priority"
@@ -462,7 +525,7 @@ export function TaskTable({
target.closest("a") ||
target.closest("button") ||
target.closest('[role="button"]') ||
target.closest('[data-no-expand]')
target.closest("[data-no-expand]")
) {
return;
}
@@ -477,7 +540,7 @@ export function TaskTable({
className={cn(
"hover:bg-muted/50",
node.depth > 0 && "bg-muted/20",
hasChildren && "cursor-pointer"
hasChildren && "cursor-pointer",
)}
onClick={handleRowClick}
>
@@ -502,12 +565,19 @@ export function TaskTable({
) : (
<span className="w-5 shrink-0" />
)}
<Link href={"/tasks/" + task.id} className="block hover:underline min-w-0">
<Link
href={"/tasks/" + task.id}
className="block hover:underline min-w-0"
>
<div className="font-medium flex items-center gap-2">
<span className="truncate">{task.title}</span>
{childCount > 0 && (
<Badge variant="secondary" className="text-xs shrink-0">
{childCount} subtask{childCount !== 1 ? "s" : ""}
<Badge
variant="secondary"
className="text-xs shrink-0"
>
{childCount} subtask
{childCount !== 1 ? "s" : ""}
</Badge>
)}
</div>
@@ -518,7 +588,14 @@ export function TaskTable({
<TaskStatusBadge status={task.status} />
</TableCell>
<TableCell className="whitespace-nowrap">
<GitStatusBadge task={task} />
<GitStatusBadge
task={task}
repoUrl={
task.project_id
? projectGitUrls[task.project_id]
: undefined
}
/>
</TableCell>
<TableCell className="capitalize whitespace-nowrap">
{task.team.replace(/_/g, " ")}
@@ -536,15 +613,24 @@ export function TaskTable({
)}
</TableCell>
<TableCell className="whitespace-nowrap">
<Badge className={(priorityColors[task.priority] ?? priorityColors[2]) + " text-xs"}>
<Badge
className={
(priorityColors[task.priority] ?? priorityColors[2]) +
" text-xs"
}
>
{priorityLabels[task.priority] ?? "P2 - Medium"}
</Badge>
</TableCell>
<TableCell className="whitespace-nowrap">
<Badge variant="outline">{getAgentDisplayName(task.assigned_to)}</Badge>
<Badge variant="outline">
{getAgentDisplayName(task.assigned_to)}
</Badge>
</TableCell>
<TableCell className="text-muted-foreground text-sm whitespace-nowrap">
{formatDistanceToNow(new Date(task.created_at), { addSuffix: true })}
{formatDistanceToNow(new Date(task.created_at), {
addSuffix: true,
})}
</TableCell>
<TableCell>
<TaskActions task={task} />
@@ -561,7 +647,10 @@ export function TaskTable({
<div className="flex items-center justify-end gap-4 px-4 py-3 border-t">
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<span>Rows:</span>
<Select value={String(pageSize)} onValueChange={handlePageSizeChange}>
<Select
value={String(pageSize)}
onValueChange={handlePageSizeChange}
>
<SelectTrigger className="w-auto min-w-14 h-8">
<SelectValue />
</SelectTrigger>