hanh.tonguyen/paperclip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): onboarding wizard, comment thread, markdown editor, and UX polish

Browse Source 
Refactor onboarding wizard with ASCII art animation and expanded adapter
support. Enhance markdown editor with code block, table, and CodeMirror
plugins. Improve comment thread layout. Add activity charts to agent
detail page. Polish metric cards, issue detail reassignment, and new
issue dialog. Simplify agent detail page structure.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Forgotten
2026-02-26 16:33:48 -06:00
parent c2709687b8
commit ad19bc921d
9 changed files with 1014 additions and 844 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
ui/src/components/MetricCard.tsx
View File

@@ -1,7 +1,6 @@
import type { LucideIcon } from "lucide-react";
import type { ReactNode } from "react";
import { Link } from "react-router-dom";
import { Card, CardContent } from "@/components/ui/card";
interface MetricCardProps {
icon: LucideIcon;
@@ -16,26 +15,22 @@ export function MetricCard({ icon: Icon, value, label, description, to, onClick
const isClickable = !!(to || onClick);
const inner = (
<Card className="h-full">
<CardContent className="p-3 sm:p-4 h-full">
<div className="flex gap-2 sm:gap-3">
<div className="flex-1 min-w-0">
<p className={`text-lg sm:text-2xl font-bold${isClickable ? " cursor-pointer" : ""}`}>
{value}
</p>
<p className={`text-sm text-muted-foreground${isClickable ? " cursor-pointer" : ""}`}>
{label}
</p>
{description && (
<div className="text-xs sm:text-sm text-muted-foreground mt-1 hidden sm:block">{description}</div>
)}
</div>
<div className="bg-muted p-1.5 sm:p-2 rounded-md h-fit shrink-0">
<Icon className="h-3.5 w-3.5 sm:h-4 sm:w-4 text-muted-foreground" />
</div>
<div className={`h-full px-4 py-4 sm:px-5 sm:py-5 rounded-lg transition-colors${isClickable ? " hover:bg-accent/50 cursor-pointer" : ""}`}>
<div className="flex items-start justify-between gap-3">
<div className="flex-1 min-w-0">
<p className="text-2xl sm:text-3xl font-semibold tracking-tight">
{value}
</p>
<p className="text-xs sm:text-sm font-medium text-muted-foreground mt-1">
{label}
</p>
{description && (
<div className="text-xs text-muted-foreground/70 mt-1.5 hidden sm:block">{description}</div>
)}
</div>
</CardContent>
</Card>
<Icon className="h-4 w-4 text-muted-foreground/50 shrink-0 mt-1.5" />
</div>
</div>
);
if (to) {
@@ -48,7 +43,7 @@ export function MetricCard({ icon: Icon, value, label, description, to, onClick
if (onClick) {
return (
<div className="cursor-pointer h-full" onClick={onClick}>
<div className="h-full" onClick={onClick}>
{inner}
</div>
);