aevgarik/paperclip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Identity component, LiveRunWidget, issue identifiers, and UX improvements

Browse Source 
Add Identity component (avatar + name) used across agent/issue displays. Add
LiveRunWidget for real-time streaming of active heartbeat runs on issue detail
pages via WebSocket. Display issue identifiers (PAP-42) instead of UUID
fragments throughout Issues, Inbox, CommandPalette, and detail pages.
Enhance CommentThread with re-open checkbox, Cmd+Enter submit, sorted display,
and run linking. Improve Activity page with richer formatting and filtering.
Update Dashboard with live metrics. Add reports-to agent link in AgentProperties.
Various small fixes: StatusIcon centering, CopyText ref init, agent detail
run-issue cross-links.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Forgotten
2026-02-19 09:10:07 -06:00
parent 224d150d86
commit ef7a7ecee8
24 changed files with 1066 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
.claude/skills/design-guide/references/component-index.md
View File

@@ -139,6 +139,20 @@ Always use in a responsive grid: `grid md:grid-cols-2 xl:grid-cols-4 gap-4`.
<FilterBar filters={filters} onRemove={handleRemove} onClear={() => setFilters([])} />
```
### Identity
**File:** `Identity.tsx`
**Props:** `name: string`, `avatarUrl?: string`, `initials?: string`, `size?: "sm" | "default" | "lg"`
**Usage:** Avatar + name display for users and agents. Derives initials from name automatically. Three sizes matching Avatar sizes.
```tsx
<Identity name="Agent Alpha" size="sm" />
<Identity name="CEO Agent" />
<Identity name="Backend Service" size="lg" avatarUrl="/img/bot.png" />
```
Use in property rows, comment headers, assignee displays, and anywhere a user/agent reference is shown.
### InlineEditor
**File:** `InlineEditor.tsx`

20
ui/src/api/activity.ts
View File

@@ -1,6 +1,26 @@
import type { ActivityEvent } from "@paperclip/shared";
import { api } from "./client";
export interface RunForIssue {
runId: string;
status: string;
agentId: string;
startedAt: string | null;
finishedAt: string | null;
createdAt: string;
invocationSource: string;
}
export interface IssueForRun {
issueId: string;
title: string;
status: string;
priority: string;
}
export const activityApi = {
list: (companyId: string) => api.get<ActivityEvent[]>(`/companies/${companyId}/activity`),
forIssue: (issueId: string) => api.get<ActivityEvent[]>(`/issues/${issueId}/activity`),
runsForIssue: (issueId: string) => api.get<RunForIssue[]>(`/issues/${issueId}/runs`),
issuesForRun: (runId: string) => api.get<IssueForRun[]>(`/heartbeat-runs/${runId}/issues`),
};

23
ui/src/api/heartbeats.ts
View File

@@ -1,6 +1,25 @@
import type { HeartbeatRun, HeartbeatRunEvent } from "@paperclip/shared";
import { api } from "./client";
export interface ActiveRunForIssue extends HeartbeatRun {
agentId: string;
agentName: string;
adapterType: string;
}
export interface LiveRunForIssue {
id: string;
status: string;
invocationSource: string;
triggerDetail: string | null;
startedAt: string | null;
finishedAt: string | null;
createdAt: string;
agentId: string;
agentName: string;
adapterType: string;
}
export const heartbeatsApi = {
list: (companyId: string, agentId?: string) => {
const params = agentId ? `?agentId=${agentId}` : "";
@@ -15,4 +34,8 @@ export const heartbeatsApi = {
`/heartbeat-runs/${runId}/log?offset=${encodeURIComponent(String(offset))}&limitBytes=${encodeURIComponent(String(limitBytes))}`,
),
cancel: (runId: string) => api.post<void>(`/heartbeat-runs/${runId}/cancel`, {}),
liveRunsForIssue: (issueId: string) =>
api.get<LiveRunForIssue[]>(`/issues/${issueId}/live-runs`),
activeRunForIssue: (issueId: string) =>
api.get<ActiveRunForIssue | null>(`/issues/${issueId}/active-run`),
};

3
ui/src/api/issues.ts
View File

@@ -15,5 +15,6 @@ export const issuesApi = {
}),
release: (id: string) => api.post<Issue>(`/issues/${id}/release`, {}),
listComments: (id: string) => api.get<IssueComment[]>(`/issues/${id}/comments`),
addComment: (id: string, body: string) => api.post<IssueComment>(`/issues/${id}/comments`, { body }),
addComment: (id: string, body: string, reopen?: boolean) =>
api.post<IssueComment>(`/issues/${id}/comments`, reopen === undefined ? { body } : { body, reopen }),
};

24
ui/src/components/AgentProperties.tsx
View File

@@ -1,5 +1,11 @@
import { useQuery } from "@tanstack/react-query";
import { Link } from "react-router-dom";
import type { Agent, AgentRuntimeState } from "@paperclip/shared";
import { agentsApi } from "../api/agents";
import { useCompany } from "../context/CompanyContext";
import { queryKeys } from "../lib/queryKeys";
import { StatusBadge } from "./StatusBadge";
import { Identity } from "./Identity";
import { formatCents, formatDate } from "../lib/utils";
import { Separator } from "@/components/ui/separator";
@@ -25,6 +31,16 @@ function PropertyRow({ label, children }: { label: string; children: React.React
}
export function AgentProperties({ agent, runtimeState }: AgentPropertiesProps) {
const { selectedCompanyId } = useCompany();
const { data: agents } = useQuery({
queryKey: queryKeys.agents.list(selectedCompanyId!),
queryFn: () => agentsApi.list(selectedCompanyId!),
enabled: !!selectedCompanyId && !!agent.reportsTo,
});
const reportsToAgent = agent.reportsTo ? agents?.find((a) => a.id === agent.reportsTo) : null;
return (
<div className="space-y-4">
<div className="space-y-1">
@@ -82,7 +98,13 @@ export function AgentProperties({ agent, runtimeState }: AgentPropertiesProps) {
)}
{agent.reportsTo && (
<PropertyRow label="Reports To">
<span className="text-sm font-mono">{agent.reportsTo.slice(0, 8)}</span>
{reportsToAgent ? (
<Link to={`/agents/${reportsToAgent.id}`} className="hover:underline">
<Identity name={reportsToAgent.name} size="sm" />
</Link>
) : (
<span className="text-sm font-mono">{agent.reportsTo.slice(0, 8)}</span>
)}
</PropertyRow>
)}
<PropertyRow label="Created">

12
ui/src/components/CommandPalette.tsx
View File

@@ -28,6 +28,7 @@ import {
SquarePen,
Plus,
} from "lucide-react";
import { Identity } from "./Identity";
export function CommandPalette() {
const [open, setOpen] = useState(false);
@@ -151,14 +152,13 @@ export function CommandPalette() {
<CommandItem key={issue.id} onSelect={() => go(`/issues/${issue.id}`)}>
<CircleDot className="mr-2 h-4 w-4" />
<span className="text-muted-foreground mr-2 font-mono text-xs">
{issue.id.slice(0, 8)}
{issue.identifier ?? issue.id.slice(0, 8)}
</span>
<span className="flex-1 truncate">{issue.title}</span>
{issue.assigneeAgentId && (
<span className="text-xs text-muted-foreground ml-2">
{agentName(issue.assigneeAgentId)}
</span>
)}
{issue.assigneeAgentId && (() => {
const name = agentName(issue.assigneeAgentId);
return name ? <Identity name={name} size="sm" className="ml-2" /> : null;
})()}
</CommandItem>
))}
</CommandGroup>

87
ui/src/components/CommentThread.tsx
View File

@@ -1,27 +1,48 @@
import { useState } from "react";
import type { IssueComment } from "@paperclip/shared";
import { useMemo, useState } from "react";
import { Link } from "react-router-dom";
import type { IssueComment, Agent } from "@paperclip/shared";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { Identity } from "./Identity";
import { formatDate } from "../lib/utils";
interface CommentThreadProps {
comments: IssueComment[];
onAdd: (body: string) => Promise<void>;
interface CommentWithRunMeta extends IssueComment {
runId?: string | null;
runAgentId?: string | null;
}
export function CommentThread({ comments, onAdd }: CommentThreadProps) {
interface CommentThreadProps {
comments: CommentWithRunMeta[];
onAdd: (body: string, reopen?: boolean) => Promise<void>;
issueStatus?: string;
agentMap?: Map<string, Agent>;
}
const CLOSED_STATUSES = new Set(["done", "cancelled"]);
export function CommentThread({ comments, onAdd, issueStatus, agentMap }: CommentThreadProps) {
const [body, setBody] = useState("");
const [reopen, setReopen] = useState(true);
const [submitting, setSubmitting] = useState(false);
async function handleSubmit(e: React.FormEvent) {
e.preventDefault();
const isClosed = issueStatus ? CLOSED_STATUSES.has(issueStatus) : false;
// Display oldest-first
const sorted = useMemo(
() => [...comments].sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()),
[comments],
);
async function handleSubmit(e?: React.FormEvent) {
e?.preventDefault();
const trimmed = body.trim();
if (!trimmed) return;
setSubmitting(true);
try {
await onAdd(trimmed);
await onAdd(trimmed, isClosed && reopen ? true : undefined);
setBody("");
setReopen(false);
} finally {
setSubmitting(false);
}
@@ -36,17 +57,32 @@ export function CommentThread({ comments, onAdd }: CommentThreadProps) {
)}
<div className="space-y-3">
{comments.map((comment) => (
{sorted.map((comment) => (
<div key={comment.id} className="border border-border p-3">
<div className="flex items-center justify-between mb-1">
<span className="text-xs font-medium text-muted-foreground">
{comment.authorAgentId ? "Agent" : "Human"}
</span>
<Identity
name={
comment.authorAgentId
? agentMap?.get(comment.authorAgentId)?.name ?? comment.authorAgentId.slice(0, 8)
: "You"
}
size="sm"
/>
<span className="text-xs text-muted-foreground">
{formatDate(comment.createdAt)}
</span>
</div>
<p className="text-sm whitespace-pre-wrap">{comment.body}</p>
{comment.runId && comment.runAgentId && (
<div className="mt-2 pt-2 border-t border-border/60">
<Link
to={`/agents/${comment.runAgentId}/runs/${comment.runId}`}
className="inline-flex items-center rounded-md border border-border bg-accent/30 px-2 py-1 text-[10px] font-mono text-muted-foreground hover:text-foreground hover:bg-accent/50 transition-colors"
>
run {comment.runId.slice(0, 8)}
</Link>
</div>
)}
</div>
))}
</div>
@@ -56,11 +92,30 @@ export function CommentThread({ comments, onAdd }: CommentThreadProps) {
placeholder="Leave a comment..."
value={body}
onChange={(e) => setBody(e.target.value)}
onKeyDown={(e) => {
if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
e.preventDefault();
handleSubmit();
}
}}
rows={3}
/>
<Button type="submit" size="sm" disabled={!body.trim() || submitting}>
{submitting ? "Posting..." : "Comment"}
</Button>
<div className="flex items-center justify-end gap-3">
{isClosed && (
<label className="flex items-center gap-1.5 text-xs text-muted-foreground cursor-pointer select-none">
<input
type="checkbox"
checked={reopen}
onChange={(e) => setReopen(e.target.checked)}
className="rounded border-border"
/>
Re-open
</label>
)}
<Button type="submit" size="sm" disabled={!body.trim() || submitting}>
{submitting ? "Posting..." : "Comment"}
</Button>
</div>
</form>
</div>
);

2
ui/src/components/CopyText.tsx
View File

@@ -12,7 +12,7 @@ interface CopyTextProps {
export function CopyText({ text, children, className, copiedLabel = "Copied!" }: CopyTextProps) {
const [visible, setVisible] = useState(false);
const timerRef = useRef<ReturnType<typeof setTimeout>>();
const timerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
const triggerRef = useRef<HTMLButtonElement>(null);
const handleClick = useCallback(() => {

38
ui/src/components/Identity.tsx Normal file
View File

@@ -0,0 +1,38 @@
import { cn } from "@/lib/utils";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
type IdentitySize = "sm" | "default" | "lg";
export interface IdentityProps {
name: string;
avatarUrl?: string | null;
initials?: string;
size?: IdentitySize;
className?: string;
}
function deriveInitials(name: string): string {
const parts = name.trim().split(/\s+/);
if (parts.length >= 2) return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
return name.slice(0, 2).toUpperCase();
}
const textSize: Record<IdentitySize, string> = {
sm: "text-xs",
default: "text-sm",
lg: "text-sm",
};
export function Identity({ name, avatarUrl, initials, size = "default", className }: IdentityProps) {
const displayInitials = initials ?? deriveInitials(name);
return (
<span className={cn("inline-flex items-center gap-1.5", size === "lg" && "gap-2", className)}>
<Avatar size={size}>
{avatarUrl && <AvatarImage src={avatarUrl} alt={name} />}
<AvatarFallback>{displayInitials}</AvatarFallback>
</Avatar>
<span className={cn("truncate", textSize[size])}>{name}</span>
</span>
);
}

5
ui/src/components/IssueProperties.tsx
View File

@@ -7,6 +7,7 @@ import { useCompany } from "../context/CompanyContext";
import { queryKeys } from "../lib/queryKeys";
import { StatusIcon } from "./StatusIcon";
import { PriorityIcon } from "./PriorityIcon";
import { Identity } from "./Identity";
import { formatDate } from "../lib/utils";
import { timeAgo } from "../lib/timeAgo";
import { Separator } from "@/components/ui/separator";
@@ -87,9 +88,9 @@ export function IssueProperties({ issue, onUpdate }: IssuePropertiesProps) {
{assignee ? (
<Link
to={`/agents/${assignee.id}`}
className="text-sm hover:underline"
className="hover:underline"
>
{assignee.name}
<Identity name={assignee.name} size="sm" />
</Link>
) : (
<span className="text-sm text-muted-foreground">Unassigned</span>

381
ui/src/components/LiveRunWidget.tsx Normal file
View File

@@ -0,0 +1,381 @@
import { useEffect, useMemo, useRef, useState, type MutableRefObject } from "react";
import { Link } from "react-router-dom";
import { useQuery } from "@tanstack/react-query";
import type { LiveEvent } from "@paperclip/shared";
import { heartbeatsApi, type LiveRunForIssue } from "../api/heartbeats";
import { getUIAdapter } from "../adapters";
import type { TranscriptEntry } from "../adapters";
import { queryKeys } from "../lib/queryKeys";
import { cn, relativeTime } from "../lib/utils";
import { ExternalLink } from "lucide-react";
import { Identity } from "./Identity";
interface LiveRunWidgetProps {
issueId: string;
companyId?: string | null;
}
type FeedTone = "info" | "warn" | "error" | "assistant" | "tool";
interface FeedItem {
id: string;
ts: string;
runId: string;
agentId: string;
agentName: string;
text: string;
tone: FeedTone;
}
const MAX_FEED_ITEMS = 80;
function readString(value: unknown): string | null {
return typeof value === "string" && value.trim().length > 0 ? value : null;
}
function summarizeEntry(entry: TranscriptEntry): { text: string; tone: FeedTone } | null {
if (entry.kind === "assistant") {
const text = entry.text.trim();
return text ? { text, tone: "assistant" } : null;
}
if (entry.kind === "thinking") {
const text = entry.text.trim();
return text ? { text: `[thinking] ${text}`, tone: "info" } : null;
}
if (entry.kind === "tool_call") {
return { text: `tool ${entry.name}`, tone: "tool" };
}
if (entry.kind === "tool_result") {
const base = entry.content.trim();
return {
text: entry.isError ? `tool error: ${base}` : `tool result: ${base}`,
tone: entry.isError ? "error" : "tool",
};
}
if (entry.kind === "stderr") {
const text = entry.text.trim();
return text ? { text, tone: "error" } : null;
}
if (entry.kind === "system") {
const text = entry.text.trim();
return text ? { text, tone: "warn" } : null;
}
if (entry.kind === "stdout") {
const text = entry.text.trim();
return text ? { text, tone: "info" } : null;
}
return null;
}
function createFeedItem(
run: LiveRunForIssue,
ts: string,
text: string,
tone: FeedTone,
nextId: number,
): FeedItem | null {
const trimmed = text.trim();
if (!trimmed) return null;
return {
id: `${run.id}:${nextId}`,
ts,
runId: run.id,
agentId: run.agentId,
agentName: run.agentName,
text: trimmed.slice(0, 220),
tone,
};
}
function parseStdoutChunk(
run: LiveRunForIssue,
chunk: string,
ts: string,
pendingByRun: Map<string, string>,
nextIdRef: MutableRefObject<number>,
): FeedItem[] {
const pendingKey = `${run.id}:stdout`;
const combined = `${pendingByRun.get(pendingKey) ?? ""}${chunk}`;
const split = combined.split(/\r?\n/);
pendingByRun.set(pendingKey, split.pop() ?? "");
const adapter = getUIAdapter(run.adapterType);
const items: FeedItem[] = [];
for (const line of split.slice(-8)) {
const trimmed = line.trim();
if (!trimmed) continue;
const parsed = adapter.parseStdoutLine(trimmed, ts);
if (parsed.length === 0) {
const fallback = createFeedItem(run, ts, trimmed, "info", nextIdRef.current++);
if (fallback) items.push(fallback);
continue;
}
for (const entry of parsed) {
const summary = summarizeEntry(entry);
if (!summary) continue;
const item = createFeedItem(run, ts, summary.text, summary.tone, nextIdRef.current++);
if (item) items.push(item);
}
}
return items;
}
function parseStderrChunk(
run: LiveRunForIssue,
chunk: string,
ts: string,
pendingByRun: Map<string, string>,
nextIdRef: MutableRefObject<number>,
): FeedItem[] {
const pendingKey = `${run.id}:stderr`;
const combined = `${pendingByRun.get(pendingKey) ?? ""}${chunk}`;
const split = combined.split(/\r?\n/);
pendingByRun.set(pendingKey, split.pop() ?? "");
const items: FeedItem[] = [];
for (const line of split.slice(-8)) {
const item = createFeedItem(run, ts, line, "error", nextIdRef.current++);
if (item) items.push(item);
}
return items;
}
export function LiveRunWidget({ issueId, companyId }: LiveRunWidgetProps) {
const [feed, setFeed] = useState<FeedItem[]>([]);
const seenKeysRef = useRef(new Set<string>());
const pendingByRunRef = useRef(new Map<string, string>());
const runMetaByIdRef = useRef(new Map<string, { agentId: string; agentName: string }>());
const nextIdRef = useRef(1);
const bodyRef = useRef<HTMLDivElement>(null);
const { data: liveRuns } = useQuery({
queryKey: queryKeys.issues.liveRuns(issueId),
queryFn: () => heartbeatsApi.liveRunsForIssue(issueId),
enabled: !!companyId,
refetchInterval: 3000,
});
const runs = liveRuns ?? [];
const runById = useMemo(() => new Map(runs.map((run) => [run.id, run])), [runs]);
const activeRunIds = useMemo(() => new Set(runs.map((run) => run.id)), [runs]);
useEffect(() => {
const body = bodyRef.current;
if (!body) return;
body.scrollTo({ top: body.scrollHeight, behavior: "smooth" });
}, [feed.length]);
useEffect(() => {
for (const run of runs) {
runMetaByIdRef.current.set(run.id, { agentId: run.agentId, agentName: run.agentName });
}
}, [runs]);
useEffect(() => {
const stillActive = new Set<string>();
for (const runId of activeRunIds) {
stillActive.add(`${runId}:stdout`);
stillActive.add(`${runId}:stderr`);
}
for (const key of pendingByRunRef.current.keys()) {
if (!stillActive.has(key)) {
pendingByRunRef.current.delete(key);
}
}
}, [activeRunIds]);
useEffect(() => {
if (!companyId || activeRunIds.size === 0) return;
let closed = false;
let reconnectTimer: number | null = null;
let socket: WebSocket | null = null;
const appendItems = (items: FeedItem[]) => {
if (items.length === 0) return;
setFeed((prev) => [...prev, ...items].slice(-MAX_FEED_ITEMS));
};
const scheduleReconnect = () => {
if (closed) return;
reconnectTimer = window.setTimeout(connect, 1500);
};
const connect = () => {
if (closed) return;
const protocol = window.location.protocol === "https:" ? "wss" : "ws";
const url = `${protocol}://${window.location.host}/api/companies/${encodeURIComponent(companyId)}/events/ws`;
socket = new WebSocket(url);
socket.onmessage = (message) => {
const raw = typeof message.data === "string" ? message.data : "";
if (!raw) return;
let event: LiveEvent;
try {
event = JSON.parse(raw) as LiveEvent;
} catch {
return;
}
if (event.companyId !== companyId) return;
const payload = event.payload ?? {};
const runId = readString(payload["runId"]);
if (!runId || !activeRunIds.has(runId)) return;
const run = runById.get(runId);
if (!run) return;
if (event.type === "heartbeat.run.event") {
const seq = typeof payload["seq"] === "number" ? payload["seq"] : null;
const eventType = readString(payload["eventType"]) ?? "event";
const messageText = readString(payload["message"]) ?? eventType;
const dedupeKey = `${runId}:event:${seq ?? `${eventType}:${messageText}:${event.createdAt}`}`;
if (seenKeysRef.current.has(dedupeKey)) return;
seenKeysRef.current.add(dedupeKey);
if (seenKeysRef.current.size > 2000) {
seenKeysRef.current.clear();
}
const tone = eventType === "error" ? "error" : eventType === "lifecycle" ? "warn" : "info";
const item = createFeedItem(run, event.createdAt, messageText, tone, nextIdRef.current++);
if (item) appendItems([item]);
return;
}
if (event.type === "heartbeat.run.status") {
const status = readString(payload["status"]) ?? "updated";
const dedupeKey = `${runId}:status:${status}:${readString(payload["finishedAt"]) ?? ""}`;
if (seenKeysRef.current.has(dedupeKey)) return;
seenKeysRef.current.add(dedupeKey);
if (seenKeysRef.current.size > 2000) {
seenKeysRef.current.clear();
}
const tone = status === "failed" || status === "timed_out" ? "error" : "warn";
const item = createFeedItem(run, event.createdAt, `run ${status}`, tone, nextIdRef.current++);
if (item) appendItems([item]);
return;
}
if (event.type === "heartbeat.run.log") {
const chunk = readString(payload["chunk"]);
if (!chunk) return;
const stream = readString(payload["stream"]) === "stderr" ? "stderr" : "stdout";
if (stream === "stderr") {
appendItems(parseStderrChunk(run, chunk, event.createdAt, pendingByRunRef.current, nextIdRef));
return;
}
appendItems(parseStdoutChunk(run, chunk, event.createdAt, pendingByRunRef.current, nextIdRef));
}
};
socket.onerror = () => {
socket?.close();
};
socket.onclose = () => {
scheduleReconnect();
};
};
connect();
return () => {
closed = true;
if (reconnectTimer !== null) window.clearTimeout(reconnectTimer);
if (socket) {
socket.onmessage = null;
socket.onerror = null;
socket.onclose = null;
socket.close(1000, "issue_live_widget_unmount");
}
};
}, [activeRunIds, companyId, runById]);
if (runs.length === 0 && feed.length === 0) return null;
const recent = feed.slice(-25);
const headerRun =
runs[0] ??
(() => {
const last = recent[recent.length - 1];
if (!last) return null;
const meta = runMetaByIdRef.current.get(last.runId);
if (!meta) return null;
return {
id: last.runId,
agentId: meta.agentId,
};
})();
return (
<div className="rounded-lg border border-cyan-500/30 bg-background/80 overflow-hidden shadow-[0_0_12px_rgba(6,182,212,0.08)]">
<div className="flex items-center justify-between px-3 py-2 border-b border-border/50">
<div className="flex items-center gap-2">
{runs.length > 0 && (
<span className="relative flex h-2 w-2">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-cyan-400 opacity-75" />
<span className="relative inline-flex rounded-full h-2 w-2 bg-cyan-400" />
</span>
)}
<span className="text-xs font-medium">
{runs.length > 0 ? `Live issue runs (${runs.length})` : "Recent run updates"}
</span>
</div>
{headerRun && (
<Link
to={`/agents/${headerRun.agentId}/runs/${headerRun.id}`}
className="inline-flex items-center gap-1 text-[10px] text-cyan-300 hover:text-cyan-200"
>
Open run
<ExternalLink className="h-2.5 w-2.5" />
</Link>
)}
</div>
<div ref={bodyRef} className="max-h-[220px] overflow-y-auto p-2 font-mono text-[11px] space-y-1">
{recent.length === 0 && (
<div className="text-xs text-muted-foreground">Waiting for run output...</div>
)}
{recent.map((item, index) => (
<div
key={item.id}
className={cn(
"grid grid-cols-[auto_1fr] gap-2 items-start",
index === recent.length - 1 && "animate-in fade-in slide-in-from-bottom-1 duration-300",
)}
>
<span className="text-[10px] text-muted-foreground">{relativeTime(item.ts)}</span>
<div className={cn(
"min-w-0",
item.tone === "error" && "text-red-300",
item.tone === "warn" && "text-amber-300",
item.tone === "assistant" && "text-emerald-200",
item.tone === "tool" && "text-cyan-300",
item.tone === "info" && "text-foreground/80",
)}>
<Identity name={item.agentName} size="sm" className="text-cyan-400" />
<span className="text-muted-foreground"> [{item.runId.slice(0, 8)}] </span>
<span className="break-words">{item.text}</span>
</div>
</div>
))}
</div>
{runs.length > 0 && (
<div className="border-t border-border/50 px-3 py-2 flex flex-wrap gap-2">
{runs.map((run) => (
<Link
key={run.id}
to={`/agents/${run.agentId}/runs/${run.id}`}
className="inline-flex items-center gap-1 text-[10px] text-cyan-300 hover:text-cyan-200"
>
<Identity name={run.agentName} size="sm" /> {run.id.slice(0, 8)}
<ExternalLink className="h-2.5 w-2.5" />
</Link>
))}
</div>
)}
</div>
);
}

4
ui/src/components/StatusIcon.tsx
View File

@@ -33,14 +33,14 @@ export function StatusIcon({ status, onChange, className }: StatusIconProps) {
const circle = (
<span
className={cn(
"inline-flex items-center justify-center h-4 w-4 rounded-full border-2 shrink-0",
"relative inline-flex h-4 w-4 rounded-full border-2 shrink-0",
colorClass,
onChange && "cursor-pointer",
className
)}
>
{isDone && (
<span className={cn("h-2 w-2 rounded-full bg-current")} />
<span className="absolute inset-0 m-auto h-2 w-2 rounded-full bg-current" />
)}
</span>
);

4
ui/src/context/LiveUpdatesProvider.tsx
View File

@@ -41,6 +41,10 @@ function invalidateActivityQueries(
if (entityId) {
queryClient.invalidateQueries({ queryKey: queryKeys.issues.detail(entityId) });
queryClient.invalidateQueries({ queryKey: queryKeys.issues.comments(entityId) });
queryClient.invalidateQueries({ queryKey: queryKeys.issues.activity(entityId) });
queryClient.invalidateQueries({ queryKey: queryKeys.issues.runs(entityId) });
queryClient.invalidateQueries({ queryKey: queryKeys.issues.liveRuns(entityId) });
queryClient.invalidateQueries({ queryKey: queryKeys.issues.activeRun(entityId) });
}
return;
}

5
ui/src/lib/queryKeys.ts
View File

@@ -14,6 +14,10 @@ export const queryKeys = {
list: (companyId: string) => ["issues", companyId] as const,
detail: (id: string) => ["issues", "detail", id] as const,
comments: (issueId: string) => ["issues", "comments", issueId] as const,
activity: (issueId: string) => ["issues", "activity", issueId] as const,
runs: (issueId: string) => ["issues", "runs", issueId] as const,
liveRuns: (issueId: string) => ["issues", "live-runs", issueId] as const,
activeRun: (issueId: string) => ["issues", "active-run", issueId] as const,
},
projects: {
list: (companyId: string) => ["projects", companyId] as const,
@@ -32,5 +36,6 @@ export const queryKeys = {
costs: (companyId: string) => ["costs", companyId] as const,
heartbeats: (companyId: string, agentId?: string) =>
["heartbeats", companyId, agentId] as const,
runIssues: (runId: string) => ["run-issues", runId] as const,
org: (companyId: string) => ["org", companyId] as const,
};

153
ui/src/pages/Activity.tsx
View File

@@ -1,13 +1,17 @@
import { useEffect, useState } from "react";
import { useEffect, useMemo, useState } from "react";
import { useNavigate } from "react-router-dom";
import { useQuery } from "@tanstack/react-query";
import { activityApi } from "../api/activity";
import { agentsApi } from "../api/agents";
import { issuesApi } from "../api/issues";
import { projectsApi } from "../api/projects";
import { goalsApi } from "../api/goals";
import { useCompany } from "../context/CompanyContext";
import { useBreadcrumbs } from "../context/BreadcrumbContext";
import { queryKeys } from "../lib/queryKeys";
import { EmptyState } from "../components/EmptyState";
import { Identity } from "../components/Identity";
import { timeAgo } from "../lib/timeAgo";
import { Badge } from "@/components/ui/badge";
import {
Select,
SelectContent,
@@ -15,43 +19,46 @@ import {
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { History, Bot, User, Settings } from "lucide-react";
import { History } from "lucide-react";
import type { Agent } from "@paperclip/shared";
function formatAction(action: string, entityType: string, entityId: string): string {
const actionMap: Record<string, string> = {
"company.created": "Company created",
"agent.created": `Agent created`,
"agent.updated": `Agent updated`,
"agent.paused": `Agent paused`,
"agent.resumed": `Agent resumed`,
"agent.terminated": `Agent terminated`,
"agent.key_created": `API key created for agent`,
"issue.created": `Issue created`,
"issue.updated": `Issue updated`,
"issue.checked_out": `Issue checked out`,
"issue.released": `Issue released`,
"issue.commented": `Comment added to issue`,
"heartbeat.invoked": `Heartbeat invoked`,
"heartbeat.completed": `Heartbeat completed`,
"heartbeat.failed": `Heartbeat failed`,
"approval.created": `Approval requested`,
"approval.approved": `Approval granted`,
"approval.rejected": `Approval rejected`,
"project.created": `Project created`,
"project.updated": `Project updated`,
"goal.created": `Goal created`,
"goal.updated": `Goal updated`,
"cost.recorded": `Cost recorded`,
};
return actionMap[action] ?? `${action.replace(/[._]/g, " ")}`;
}
function actorIcon(entityType: string) {
if (entityType === "agent") return <Bot className="h-4 w-4 text-muted-foreground" />;
if (entityType === "company" || entityType === "approval")
return <User className="h-4 w-4 text-muted-foreground" />;
return <Settings className="h-4 w-4 text-muted-foreground" />;
}
// Maps action → verb phrase. When the entity name is available it reads as:
// "[Actor] commented on "Fix the bug""
// When not available, it falls back to just the verb.
const ACTION_VERBS: Record<string, string> = {
"issue.created": "created",
"issue.updated": "updated",
"issue.checked_out": "checked out",
"issue.released": "released",
"issue.comment_added": "commented on",
"issue.commented": "commented on",
"issue.deleted": "deleted",
"agent.created": "created",
"agent.updated": "updated",
"agent.paused": "paused",
"agent.resumed": "resumed",
"agent.terminated": "terminated",
"agent.key_created": "created API key for",
"agent.budget_updated": "updated budget for",
"agent.runtime_session_reset": "reset session for",
"heartbeat.invoked": "invoked heartbeat for",
"heartbeat.cancelled": "cancelled heartbeat for",
"approval.created": "requested approval",
"approval.approved": "approved",
"approval.rejected": "rejected",
"project.created": "created",
"project.updated": "updated",
"project.deleted": "deleted",
"goal.created": "created",
"goal.updated": "updated",
"goal.deleted": "deleted",
"cost.reported": "reported cost for",
"cost.recorded": "recorded cost for",
"company.created": "created",
"company.updated": "updated",
"company.archived": "archived",
"company.budget_updated": "updated budget for",
};
function entityLink(entityType: string, entityId: string): string | null {
switch (entityType) {
@@ -70,6 +77,15 @@ function entityLink(entityType: string, entityId: string): string | null {
}
}
function actorIdentity(actorType: string, actorId: string, agentMap: Map<string, Agent>) {
if (actorType === "agent") {
const agent = agentMap.get(actorId);
return <Identity name={agent?.name ?? actorId.slice(0, 8)} size="sm" />;
}
if (actorType === "system") return <Identity name="System" size="sm" />;
return <Identity name={actorId || "You"} size="sm" />;
}
export function Activity() {
const { selectedCompanyId } = useCompany();
const { setBreadcrumbs } = useBreadcrumbs();
@@ -86,6 +102,46 @@ export function Activity() {
enabled: !!selectedCompanyId,
});
const { data: agents } = useQuery({
queryKey: queryKeys.agents.list(selectedCompanyId!),
queryFn: () => agentsApi.list(selectedCompanyId!),
enabled: !!selectedCompanyId,
});
const { data: issues } = useQuery({
queryKey: queryKeys.issues.list(selectedCompanyId!),
queryFn: () => issuesApi.list(selectedCompanyId!),
enabled: !!selectedCompanyId,
});
const { data: projects } = useQuery({
queryKey: queryKeys.projects.list(selectedCompanyId!),
queryFn: () => projectsApi.list(selectedCompanyId!),
enabled: !!selectedCompanyId,
});
const { data: goals } = useQuery({
queryKey: queryKeys.goals.list(selectedCompanyId!),
queryFn: () => goalsApi.list(selectedCompanyId!),
enabled: !!selectedCompanyId,
});
const agentMap = useMemo(() => {
const map = new Map<string, Agent>();
for (const a of agents ?? []) map.set(a.id, a);
return map;
}, [agents]);
// Unified map: "entityType:entityId" → display name
const entityNameMap = useMemo(() => {
const map = new Map<string, string>();
for (const i of issues ?? []) map.set(`issue:${i.id}`, i.title);
for (const a of agents ?? []) map.set(`agent:${a.id}`, a.name);
for (const p of projects ?? []) map.set(`project:${p.id}`, p.name);
for (const g of goals ?? []) map.set(`goal:${g.id}`, g.title);
return map;
}, [issues, agents, projects, goals]);
if (!selectedCompanyId) {
return <EmptyState icon={History} message="Select a company to view activity." />;
}
@@ -128,25 +184,22 @@ export function Activity() {
<div className="border border-border divide-y divide-border">
{filtered.map((event) => {
const link = entityLink(event.entityType, event.entityId);
const verb = ACTION_VERBS[event.action] ?? event.action.replace(/[._]/g, " ");
const name = entityNameMap.get(`${event.entityType}:${event.entityId}`);
return (
<div
key={event.id}
className={`px-4 py-3 flex items-center justify-between gap-4 ${
className={`px-4 py-2.5 flex items-center justify-between gap-4 ${
link ? "cursor-pointer hover:bg-accent/50 transition-colors" : ""
}`}
onClick={link ? () => navigate(link) : undefined}
>
<div className="flex items-center gap-3 min-w-0">
{actorIcon(event.entityType)}
<span className="text-sm">
{formatAction(event.action, event.entityType, event.entityId)}
</span>
<Badge variant="secondary" className="shrink-0 text-[10px]">
{event.entityType}
</Badge>
<span className="text-xs text-muted-foreground font-mono truncate">
{event.entityId.slice(0, 8)}
</span>
<div className="flex items-center gap-2 min-w-0">
{actorIdentity(event.actorType, event.actorId, agentMap)}
<span className="text-sm text-muted-foreground">{verb}</span>
{name && (
<span className="text-sm truncate">{name}</span>
)}
</div>
<span className="text-xs text-muted-foreground shrink-0">
{timeAgo(event.createdAt)}

106
ui/src/pages/AgentDetail.tsx
View File

@@ -3,6 +3,7 @@ import { useParams, useNavigate, Link, useBeforeUnload, useSearchParams } from "
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { agentsApi, type AgentKey } from "../api/agents";
import { heartbeatsApi } from "../api/heartbeats";
import { activityApi } from "../api/activity";
import { issuesApi } from "../api/issues";
import { usePanel } from "../context/PanelContext";
import { useCompany } from "../context/CompanyContext";
@@ -248,6 +249,7 @@ export function AgentDetail() {
);
const setActiveTab = useCallback((nextTab: string) => {
if (configDirty && !window.confirm("You have unsaved changes. Discard them?")) return;
const next = parseAgentDetailTab(nextTab);
// If we're on a /runs/:runId URL and switching tabs, navigate back to base agent URL
if (urlRunId) {
@@ -259,7 +261,7 @@ export function AgentDetail() {
if (next === "overview") params.delete("tab");
else params.set("tab", next);
setSearchParams(params);
}, [searchParams, setSearchParams, urlRunId, agentId, navigate]);
}, [searchParams, setSearchParams, urlRunId, agentId, navigate, configDirty]);
if (isLoading) return <p className="text-sm text-muted-foreground">Loading...</p>;
if (error) return <p className="text-sm text-destructive">{error.message}</p>;
@@ -362,43 +364,45 @@ export function AgentDetail() {
{actionError && <p className="text-sm text-destructive">{actionError}</p>}
<Tabs value={activeTab} onValueChange={setActiveTab}>
<div className="sticky top-0 z-10 -mx-6 px-6 py-2 bg-background/90 backdrop-blur-sm flex items-center justify-between">
<PageTabBar
items={[
{ value: "overview", label: "Overview" },
{ value: "configuration", label: "Configuration" },
{ value: "runs", label: `Runs${heartbeats ? ` (${heartbeats.length})` : ""}` },
{ value: "issues", label: `Issues (${assignedIssues.length})` },
{ value: "costs", label: "Costs" },
{ value: "keys", label: "API Keys" },
]}
/>
<div
className={cn(
"flex items-center gap-2 transition-opacity duration-150",
activeTab === "configuration" && configDirty
? "opacity-100"
: "opacity-0 pointer-events-none"
)}
{/* Floating Save/Cancel — sticky so it's always reachable when scrolled */}
<div
className={cn(
"sticky top-6 z-10 float-right transition-opacity duration-150",
activeTab === "configuration" && configDirty
? "opacity-100"
: "opacity-0 pointer-events-none"
)}
>
<div className="flex items-center gap-2 bg-background/90 backdrop-blur-sm border border-border rounded-lg px-3 py-1.5 shadow-lg">
<Button
variant="ghost"
size="sm"
onClick={() => cancelConfigActionRef.current?.()}
disabled={configSaving}
>
<Button
variant="ghost"
size="sm"
onClick={() => cancelConfigActionRef.current?.()}
disabled={configSaving}
>
Cancel
</Button>
<Button
size="sm"
onClick={() => saveConfigActionRef.current?.()}
disabled={configSaving}
>
{configSaving ? "Saving..." : "Save"}
</Button>
</div>
Cancel
</Button>
<Button
size="sm"
onClick={() => saveConfigActionRef.current?.()}
disabled={configSaving}
>
{configSaving ? "Saving..." : "Save"}
</Button>
</div>
</div>
<Tabs value={activeTab} onValueChange={setActiveTab}>
<PageTabBar
items={[
{ value: "overview", label: "Overview" },
{ value: "configuration", label: "Configuration" },
{ value: "runs", label: `Runs${heartbeats ? ` (${heartbeats.length})` : ""}` },
{ value: "issues", label: `Issues (${assignedIssues.length})` },
{ value: "costs", label: "Costs" },
{ value: "keys", label: "API Keys" },
]}
/>
{/* OVERVIEW TAB */}
<TabsContent value="overview" className="space-y-6 mt-4">
@@ -520,7 +524,7 @@ export function AgentDetail() {
{assignedIssues.map((issue) => (
<EntityRow
key={issue.id}
identifier={issue.id.slice(0, 8)}
identifier={issue.identifier ?? issue.id.slice(0, 8)}
title={issue.title}
onClick={() => navigate(`/issues/${issue.id}`)}
trailing={<StatusBadge status={issue.status} />}
@@ -698,6 +702,7 @@ function RunsTab({ runs, companyId, agentId, selectedRunId, adapterType }: { run
function RunDetail({ run, adapterType }: { run: HeartbeatRun; adapterType: string }) {
const queryClient = useQueryClient();
const navigate = useNavigate();
const metrics = runMetrics(run);
const [sessionOpen, setSessionOpen] = useState(false);
@@ -708,6 +713,11 @@ function RunDetail({ run, adapterType }: { run: HeartbeatRun; adapterType: strin
},
});
const { data: touchedIssues } = useQuery({
queryKey: queryKeys.runIssues(run.id),
queryFn: () => activityApi.issuesForRun(run.id),
});
const timeFormat: Intl.DateTimeFormatOptions = { hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false };
const startTime = run.startedAt ? new Date(run.startedAt).toLocaleTimeString("en-US", timeFormat) : null;
const endTime = run.finishedAt ? new Date(run.finishedAt).toLocaleTimeString("en-US", timeFormat) : null;
@@ -827,6 +837,28 @@ function RunDetail({ run, adapterType }: { run: HeartbeatRun; adapterType: strin
)}
</div>
{/* Issues touched by this run */}
{touchedIssues && touchedIssues.length > 0 && (
<div className="space-y-2">
<span className="text-xs font-medium text-muted-foreground">Issues Touched ({touchedIssues.length})</span>
<div className="border border-border rounded-lg divide-y divide-border">
{touchedIssues.map((issue) => (
<button
key={issue.issueId}
className="flex items-center justify-between w-full px-3 py-2 text-xs hover:bg-accent/20 transition-colors text-left"
onClick={() => navigate(`/issues/${issue.issueId}`)}
>
<div className="flex items-center gap-2 min-w-0">
<StatusBadge status={issue.status} />
<span className="truncate">{issue.title}</span>
</div>
<span className="font-mono text-muted-foreground shrink-0 ml-2">{issue.issueId.slice(0, 8)}</span>
</button>
))}
</div>
</div>
)}
{/* stderr excerpt for failed runs */}
{run.stderrExcerpt && (
<div className="space-y-1">

22
ui/src/pages/Approvals.tsx
View File

@@ -10,7 +10,8 @@ import { cn } from "../lib/utils";
import { Button } from "@/components/ui/button";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { ShieldCheck, UserPlus, Lightbulb, CheckCircle2, XCircle, Clock } from "lucide-react";
import type { Approval } from "@paperclip/shared";
import { Identity } from "../components/Identity";
import type { Approval, Agent } from "@paperclip/shared";
type StatusFilter = "pending" | "all";
@@ -89,13 +90,13 @@ function CeoStrategyPayload({ payload }: { payload: Record<string, unknown> }) {
function ApprovalCard({
approval,
requesterName,
requesterAgent,
onApprove,
onReject,
isPending,
}: {
approval: Approval;
requesterName: string | null;
requesterAgent: Agent | null;
onApprove: () => void;
onReject: () => void;
isPending: boolean;
@@ -109,11 +110,11 @@ function ApprovalCard({
<div className="flex items-start justify-between gap-3">
<div className="flex items-center gap-2">
<Icon className="h-4 w-4 text-muted-foreground shrink-0" />
<div>
<div className="flex items-center gap-2">
<span className="font-medium text-sm">{label}</span>
{requesterName && (
<span className="text-xs text-muted-foreground ml-2">
requested by {requesterName}
{requesterAgent && (
<span className="text-xs text-muted-foreground">
requested by <Identity name={requesterAgent.name} size="sm" className="inline-flex" />
</span>
)}
</div>
@@ -209,11 +210,6 @@ export function Approvals() {
},
});
const agentName = (id: string | null) => {
if (!id || !agents) return null;
return agents.find((a) => a.id === id)?.name ?? null;
};
const filtered = (data ?? []).filter(
(a) => statusFilter === "all" || a.status === "pending",
);
@@ -264,7 +260,7 @@ export function Approvals() {
<ApprovalCard
key={approval.id}
approval={approval}
requesterName={agentName(approval.requestedByAgentId)}
requesterAgent={approval.requestedByAgentId ? (agents ?? []).find((a) => a.id === approval.requestedByAgentId) ?? null : null}
onApprove={() => approveMutation.mutate(approval.id)}
onReject={() => rejectMutation.mutate(approval.id)}
isPending={approveMutation.isPending || rejectMutation.isPending}

133
ui/src/pages/Dashboard.tsx
View File

@@ -1,10 +1,11 @@
import { useEffect } from "react";
import { useEffect, useMemo } from "react";
import { useNavigate } from "react-router-dom";
import { useQuery } from "@tanstack/react-query";
import { dashboardApi } from "../api/dashboard";
import { activityApi } from "../api/activity";
import { issuesApi } from "../api/issues";
import { agentsApi } from "../api/agents";
import { projectsApi } from "../api/projects";
import { useCompany } from "../context/CompanyContext";
import { useDialog } from "../context/DialogContext";
import { useBreadcrumbs } from "../context/BreadcrumbContext";
@@ -13,34 +14,51 @@ import { MetricCard } from "../components/MetricCard";
import { EmptyState } from "../components/EmptyState";
import { StatusIcon } from "../components/StatusIcon";
import { PriorityIcon } from "../components/PriorityIcon";
import { Identity } from "../components/Identity";
import { timeAgo } from "../lib/timeAgo";
import { formatCents } from "../lib/utils";
import { Bot, CircleDot, DollarSign, ShieldCheck, LayoutDashboard, Clock } from "lucide-react";
import type { Issue } from "@paperclip/shared";
import type { Agent, Issue } from "@paperclip/shared";
const STALE_THRESHOLD_MS = 24 * 60 * 60 * 1000;
function formatAction(action: string): string {
const actionMap: Record<string, string> = {
"company.created": "Company created",
"agent.created": "Agent created",
"agent.updated": "Agent updated",
"agent.key_created": "API key created",
"issue.created": "Issue created",
"issue.updated": "Issue updated",
"issue.checked_out": "Issue checked out",
"issue.released": "Issue released",
"issue.commented": "Comment added",
"heartbeat.invoked": "Heartbeat invoked",
"heartbeat.completed": "Heartbeat completed",
"approval.created": "Approval requested",
"approval.approved": "Approval granted",
"approval.rejected": "Approval rejected",
"project.created": "Project created",
"goal.created": "Goal created",
"cost.recorded": "Cost recorded",
};
return actionMap[action] ?? action.replace(/[._]/g, " ");
const ACTION_VERBS: Record<string, string> = {
"issue.created": "created",
"issue.updated": "updated",
"issue.checked_out": "checked out",
"issue.released": "released",
"issue.comment_added": "commented on",
"issue.commented": "commented on",
"issue.deleted": "deleted",
"agent.created": "created",
"agent.updated": "updated",
"agent.paused": "paused",
"agent.resumed": "resumed",
"agent.terminated": "terminated",
"agent.key_created": "created API key for",
"heartbeat.invoked": "invoked heartbeat for",
"heartbeat.cancelled": "cancelled heartbeat for",
"approval.created": "requested approval",
"approval.approved": "approved",
"approval.rejected": "rejected",
"project.created": "created",
"project.updated": "updated",
"goal.created": "created",
"goal.updated": "updated",
"cost.reported": "reported cost for",
"cost.recorded": "recorded cost for",
"company.created": "created company",
"company.updated": "updated company",
};
function entityLink(entityType: string, entityId: string): string | null {
switch (entityType) {
case "issue": return `/issues/${entityId}`;
case "agent": return `/agents/${entityId}`;
case "project": return `/projects/${entityId}`;
case "goal": return `/goals/${entityId}`;
default: return null;
}
}
function getStaleIssues(issues: Issue[]): Issue[] {
@@ -88,8 +106,28 @@ export function Dashboard() {
enabled: !!selectedCompanyId,
});
const { data: projects } = useQuery({
queryKey: queryKeys.projects.list(selectedCompanyId!),
queryFn: () => projectsApi.list(selectedCompanyId!),
enabled: !!selectedCompanyId,
});
const staleIssues = issues ? getStaleIssues(issues) : [];
const agentMap = useMemo(() => {
const map = new Map<string, Agent>();
for (const a of agents ?? []) map.set(a.id, a);
return map;
}, [agents]);
const entityNameMap = useMemo(() => {
const map = new Map<string, string>();
for (const i of issues ?? []) map.set(`issue:${i.id}`, i.title);
for (const a of agents ?? []) map.set(`agent:${a.id}`, a.name);
for (const p of projects ?? []) map.set(`project:${p.id}`, p.name);
return map;
}, [issues, agents, projects]);
const agentName = (id: string | null) => {
if (!id || !agents) return null;
return agents.find((a) => a.id === id)?.name ?? null;
@@ -157,21 +195,33 @@ export function Dashboard() {
Recent Activity
</h3>
<div className="border border-border divide-y divide-border">
{activity.slice(0, 10).map((event) => (
<div key={event.id} className="px-4 py-2 flex items-center justify-between text-sm">
<div className="flex items-center gap-2 min-w-0">
<span className="font-medium truncate">
{formatAction(event.action)}
</span>
<span className="text-xs text-muted-foreground font-mono shrink-0">
{event.entityId.slice(0, 8)}
{activity.slice(0, 10).map((event) => {
const verb = ACTION_VERBS[event.action] ?? event.action.replace(/[._]/g, " ");
const name = entityNameMap.get(`${event.entityType}:${event.entityId}`);
const link = entityLink(event.entityType, event.entityId);
const actor = event.actorType === "agent" ? agentMap.get(event.actorId) : null;
return (
<div
key={event.id}
className={`px-4 py-2 flex items-center justify-between gap-2 text-sm ${
link ? "cursor-pointer hover:bg-accent/50 transition-colors" : ""
}`}
onClick={link ? () => navigate(link) : undefined}
>
<div className="flex items-center gap-1.5 min-w-0">
<Identity
name={actor?.name ?? (event.actorType === "system" ? "System" : event.actorId || "You")}
size="sm"
/>
<span className="text-muted-foreground shrink-0">{verb}</span>
{name && <span className="truncate">{name}</span>}
</div>
<span className="text-xs text-muted-foreground shrink-0">
{timeAgo(event.createdAt)}
</span>
</div>
<span className="text-xs text-muted-foreground shrink-0 ml-2">
{timeAgo(event.createdAt)}
</span>
</div>
))}
);
})}
</div>
</div>
)}
@@ -197,11 +247,12 @@ export function Dashboard() {
<PriorityIcon priority={issue.priority} />
<StatusIcon status={issue.status} />
<span className="truncate flex-1">{issue.title}</span>
{issue.assigneeAgentId && (
<span className="text-xs text-muted-foreground shrink-0">
{agentName(issue.assigneeAgentId) ?? issue.assigneeAgentId.slice(0, 8)}
</span>
)}
{issue.assigneeAgentId && (() => {
const name = agentName(issue.assigneeAgentId);
return name
? <Identity name={name} size="sm" className="shrink-0" />
: <span className="text-xs text-muted-foreground font-mono shrink-0">{issue.assigneeAgentId.slice(0, 8)}</span>;
})()}
<span className="text-xs text-muted-foreground shrink-0">
{timeAgo(issue.updatedAt)}
</span>

26
ui/src/pages/DesignGuide.tsx
View File

@@ -64,6 +64,7 @@ import { MetricCard } from "@/components/MetricCard";
import { FilterBar, type FilterValue } from "@/components/FilterBar";
import { InlineEditor } from "@/components/InlineEditor";
import { PageSkeleton } from "@/components/PageSkeleton";
import { Identity } from "@/components/Identity";
/* ------------------------------------------------------------------ */
/* Section wrapper */
@@ -624,6 +625,31 @@ export function DesignGuide() {
</SubSection>
</Section>
{/* ============================================================ */}
{/* IDENTITY */}
{/* ============================================================ */}
<Section title="Identity">
<SubSection title="Sizes">
<div className="flex items-center gap-6">
<Identity name="Agent Alpha" size="sm" />
<Identity name="Agent Alpha" />
<Identity name="Agent Alpha" size="lg" />
</div>
</SubSection>
<SubSection title="Initials derivation">
<div className="flex flex-col gap-2">
<Identity name="CEO Agent" size="sm" />
<Identity name="Alpha" size="sm" />
<Identity name="Quality Assurance Lead" size="sm" />
</div>
</SubSection>
<SubSection title="Custom initials">
<Identity name="Backend Service" initials="BS" size="sm" />
</SubSection>
</Section>
{/* ============================================================ */}
{/* TOOLTIPS */}
{/* ============================================================ */}

14
ui/src/pages/Inbox.tsx
View File

@@ -21,6 +21,7 @@ import {
Clock,
ExternalLink,
} from "lucide-react";
import { Identity } from "../components/Identity";
import type { Issue } from "@paperclip/shared";
const STALE_THRESHOLD_MS = 24 * 60 * 60 * 1000; // 24 hours
@@ -241,14 +242,15 @@ export function Inbox() {
<PriorityIcon priority={issue.priority} />
<StatusIcon status={issue.status} />
<span className="text-xs font-mono text-muted-foreground">
{issue.id.slice(0, 8)}
{issue.identifier ?? issue.id.slice(0, 8)}
</span>
<span className="text-sm truncate flex-1">{issue.title}</span>
{issue.assigneeAgentId && (
<span className="text-xs text-muted-foreground">
{agentName(issue.assigneeAgentId) ?? issue.assigneeAgentId.slice(0, 8)}
</span>
)}
{issue.assigneeAgentId && (() => {
const name = agentName(issue.assigneeAgentId);
return name
? <Identity name={name} size="sm" />
: <span className="text-xs text-muted-foreground font-mono">{issue.assigneeAgentId.slice(0, 8)}</span>;
})()}
<span className="text-xs text-muted-foreground shrink-0">
updated {timeAgo(issue.updatedAt)}
</span>

168
ui/src/pages/IssueDetail.tsx
View File

@@ -1,18 +1,59 @@
import { useEffect } from "react";
import { useEffect, useMemo } from "react";
import { useParams, Link } from "react-router-dom";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { issuesApi } from "../api/issues";
import { activityApi } from "../api/activity";
import { agentsApi } from "../api/agents";
import { useCompany } from "../context/CompanyContext";
import { usePanel } from "../context/PanelContext";
import { useBreadcrumbs } from "../context/BreadcrumbContext";
import { queryKeys } from "../lib/queryKeys";
import { relativeTime } from "../lib/utils";
import { InlineEditor } from "../components/InlineEditor";
import { CommentThread } from "../components/CommentThread";
import { IssueProperties } from "../components/IssueProperties";
import { LiveRunWidget } from "../components/LiveRunWidget";
import { StatusIcon } from "../components/StatusIcon";
import { PriorityIcon } from "../components/PriorityIcon";
import { StatusBadge } from "../components/StatusBadge";
import { Identity } from "../components/Identity";
import { Separator } from "@/components/ui/separator";
import { ChevronRight } from "lucide-react";
import type { ActivityEvent } from "@paperclip/shared";
import type { Agent } from "@paperclip/shared";
const ACTION_LABELS: Record<string, string> = {
"issue.created": "created the issue",
"issue.updated": "updated the issue",
"issue.checked_out": "checked out the issue",
"issue.released": "released the issue",
"issue.comment_added": "added a comment",
"issue.deleted": "deleted the issue",
"agent.created": "created an agent",
"agent.updated": "updated the agent",
"agent.paused": "paused the agent",
"agent.resumed": "resumed the agent",
"agent.terminated": "terminated the agent",
"heartbeat.invoked": "invoked a heartbeat",
"heartbeat.cancelled": "cancelled a heartbeat",
"approval.created": "requested approval",
"approval.approved": "approved",
"approval.rejected": "rejected",
};
function formatAction(action: string): string {
return ACTION_LABELS[action] ?? action.replace(/[._]/g, " ");
}
function ActorIdentity({ evt, agentMap }: { evt: ActivityEvent; agentMap: Map<string, Agent> }) {
const id = evt.actorId;
if (evt.actorType === "agent") {
const agent = agentMap.get(id);
return <Identity name={agent?.name ?? id.slice(0, 8)} size="sm" />;
}
if (evt.actorType === "system") return <Identity name="System" size="sm" />;
return <Identity name={id || "You"} size="sm" />;
}
export function IssueDetail() {
const { issueId } = useParams<{ issueId: string }>();
@@ -33,19 +74,74 @@ export function IssueDetail() {
enabled: !!issueId,
});
const { data: activity } = useQuery({
queryKey: queryKeys.issues.activity(issueId!),
queryFn: () => activityApi.forIssue(issueId!),
enabled: !!issueId,
});
const { data: linkedRuns } = useQuery({
queryKey: queryKeys.issues.runs(issueId!),
queryFn: () => activityApi.runsForIssue(issueId!),
enabled: !!issueId,
refetchInterval: 5000,
});
const { data: agents } = useQuery({
queryKey: queryKeys.agents.list(selectedCompanyId!),
queryFn: () => agentsApi.list(selectedCompanyId!),
enabled: !!selectedCompanyId,
});
const agentMap = useMemo(() => {
const map = new Map<string, Agent>();
for (const a of agents ?? []) map.set(a.id, a);
return map;
}, [agents]);
const commentsWithRunMeta = useMemo(() => {
const runMetaByCommentId = new Map<string, { runId: string; runAgentId: string | null }>();
const agentIdByRunId = new Map<string, string>();
for (const run of linkedRuns ?? []) {
agentIdByRunId.set(run.runId, run.agentId);
}
for (const evt of activity ?? []) {
if (evt.action !== "issue.comment_added" || !evt.runId) continue;
const details = evt.details ?? {};
const commentId = typeof details["commentId"] === "string" ? details["commentId"] : null;
if (!commentId || runMetaByCommentId.has(commentId)) continue;
runMetaByCommentId.set(commentId, {
runId: evt.runId,
runAgentId: evt.agentId ?? agentIdByRunId.get(evt.runId) ?? null,
});
}
return (comments ?? []).map((comment) => {
const meta = runMetaByCommentId.get(comment.id);
return meta ? { ...comment, ...meta } : comment;
});
}, [activity, comments, linkedRuns]);
const invalidateIssue = () => {
queryClient.invalidateQueries({ queryKey: queryKeys.issues.detail(issueId!) });
queryClient.invalidateQueries({ queryKey: queryKeys.issues.activity(issueId!) });
queryClient.invalidateQueries({ queryKey: queryKeys.issues.runs(issueId!) });
queryClient.invalidateQueries({ queryKey: queryKeys.issues.liveRuns(issueId!) });
queryClient.invalidateQueries({ queryKey: queryKeys.issues.activeRun(issueId!) });
if (selectedCompanyId) {
queryClient.invalidateQueries({ queryKey: queryKeys.issues.list(selectedCompanyId) });
}
};
const updateIssue = useMutation({
mutationFn: (data: Record<string, unknown>) => issuesApi.update(issueId!, data),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: queryKeys.issues.detail(issueId!) });
if (selectedCompanyId) {
queryClient.invalidateQueries({ queryKey: queryKeys.issues.list(selectedCompanyId) });
}
},
onSuccess: invalidateIssue,
});
const addComment = useMutation({
mutationFn: (body: string) => issuesApi.addComment(issueId!, body),
mutationFn: ({ body, reopen }: { body: string; reopen?: boolean }) =>
issuesApi.addComment(issueId!, body, reopen),
onSuccess: () => {
invalidateIssue();
queryClient.invalidateQueries({ queryKey: queryKeys.issues.comments(issueId!) });
},
});
@@ -105,7 +201,7 @@ export function IssueDetail() {
priority={issue.priority}
onChange={(priority) => updateIssue.mutate({ priority })}
/>
<span className="text-xs font-mono text-muted-foreground">{issue.id.slice(0, 8)}</span>
<span className="text-xs font-mono text-muted-foreground">{issue.identifier ?? issue.id.slice(0, 8)}</span>
</div>
<InlineEditor
@@ -125,14 +221,62 @@ export function IssueDetail() {
/>
</div>
<LiveRunWidget issueId={issueId!} companyId={selectedCompanyId} />
<Separator />
<CommentThread
comments={comments ?? []}
onAdd={async (body) => {
await addComment.mutateAsync(body);
comments={commentsWithRunMeta}
issueStatus={issue.status}
agentMap={agentMap}
onAdd={async (body, reopen) => {
await addComment.mutateAsync({ body, reopen });
}}
/>
{/* Linked Runs */}
{linkedRuns && linkedRuns.length > 0 && (
<>
<Separator />
<div className="space-y-2">
<h3 className="text-sm font-medium text-muted-foreground">Linked Runs</h3>
<div className="border border-border rounded-lg divide-y divide-border">
{linkedRuns.map((run) => (
<Link
key={run.runId}
to={`/agents/${run.agentId}/runs/${run.runId}`}
className="flex items-center justify-between px-3 py-2 text-xs hover:bg-accent/20 transition-colors"
>
<div className="flex items-center gap-2">
<StatusBadge status={run.status} />
<span className="font-mono text-muted-foreground">{run.runId.slice(0, 8)}</span>
</div>
<span className="text-muted-foreground">{relativeTime(run.createdAt)}</span>
</Link>
))}
</div>
</div>
</>
)}
{/* Activity Log */}
{activity && activity.length > 0 && (
<>
<Separator />
<div className="space-y-2">
<h3 className="text-sm font-medium text-muted-foreground">Activity</h3>
<div className="space-y-1.5">
{activity.slice(0, 20).map((evt) => (
<div key={evt.id} className="flex items-center gap-1.5 text-xs text-muted-foreground">
<ActorIdentity evt={evt} agentMap={agentMap} />
<span>{formatAction(evt.action)}</span>
<span className="ml-auto shrink-0">{relativeTime(evt.createdAt)}</span>
</div>
))}
</div>
</div>
</>
)}
</div>
);
}

14
ui/src/pages/Issues.tsx
View File

@@ -17,6 +17,7 @@ import { Button } from "@/components/ui/button";
import { Tabs } from "@/components/ui/tabs";
import { CircleDot, Plus } from "lucide-react";
import { formatDate } from "../lib/utils";
import { Identity } from "../components/Identity";
import type { Issue } from "@paperclip/shared";
const statusOrder = ["in_progress", "todo", "backlog", "in_review", "blocked", "done", "cancelled"];
@@ -152,7 +153,7 @@ export function Issues() {
{items.map((issue) => (
<EntityRow
key={issue.id}
identifier={issue.id.slice(0, 8)}
identifier={issue.identifier ?? issue.id.slice(0, 8)}
title={issue.title}
onClick={() => navigate(`/issues/${issue.id}`)}
leading={
@@ -166,11 +167,12 @@ export function Issues() {
}
trailing={
<div className="flex items-center gap-3">
{issue.assigneeAgentId && (
<span className="text-xs text-muted-foreground">
{agentName(issue.assigneeAgentId) ?? issue.assigneeAgentId.slice(0, 8)}
</span>
)}
{issue.assigneeAgentId && (() => {
const name = agentName(issue.assigneeAgentId);
return name
? <Identity name={name} size="sm" />
: <span className="text-xs text-muted-foreground font-mono">{issue.assigneeAgentId.slice(0, 8)}</span>;
})()}
<span className="text-xs text-muted-foreground">
{formatDate(issue.createdAt)}
</span>

2
ui/src/pages/MyIssues.tsx
View File

@@ -50,7 +50,7 @@ export function MyIssues() {
{myIssues.map((issue) => (
<EntityRow
key={issue.id}
identifier={issue.id.slice(0, 8)}
identifier={issue.identifier ?? issue.id.slice(0, 8)}
title={issue.title}
onClick={() => navigate(`/issues/${issue.id}`)}
leading={

2
ui/src/pages/ProjectDetail.tsx
View File

@@ -91,7 +91,7 @@ export function ProjectDetail() {
{projectIssues.map((issue) => (
<EntityRow
key={issue.id}
identifier={issue.id.slice(0, 8)}
identifier={issue.identifier ?? issue.id.slice(0, 8)}
title={issue.title}
trailing={<StatusBadge status={issue.status} />}
/>