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

UI: richer toasts, log viewer scroll fix, multi-goal projects, active panel issue context

Browse Source 
Improve activity toasts with actor names, issue identifiers, and
action links. Fix LogViewer auto-scroll to work with scrollable
parent containers instead of only window. Add issue context display
to ActiveAgentsPanel run cards. Support multi-goal selection in
NewProjectDialog. Update GoalDetail to match multi-goal project
linking.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Forgotten
2026-02-20 15:48:42 -06:00
parent 82da8739c1
commit 65f09a1a9d
7 changed files with 337 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
ui/src/components/ActiveAgentsPanel.tsx
View File

@@ -1,8 +1,9 @@
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 type { Issue, LiveEvent } from "@paperclip/shared";
import { heartbeatsApi, type LiveRunForIssue } from "../api/heartbeats";
import { issuesApi } from "../api/issues";
import { getUIAdapter } from "../adapters";
import type { TranscriptEntry } from "../adapters";
import { queryKeys } from "../lib/queryKeys";
@@ -152,6 +153,20 @@ export function ActiveAgentsPanel({ companyId }: ActiveAgentsPanelProps) {
});
const runs = liveRuns ?? [];
const { data: issues } = useQuery({
queryKey: queryKeys.issues.list(companyId),
queryFn: () => issuesApi.list(companyId),
enabled: runs.length > 0,
});
const issueById = useMemo(() => {
const map = new Map<string, Issue>();
for (const issue of issues ?? []) {
map.set(issue.id, issue);
}
return map;
}, [issues]);
const runById = useMemo(() => new Map(runs.map((r) => [r.id, r])), [runs]);
const activeRunIds = useMemo(() => new Set(runs.map((r) => r.id)), [runs]);
@@ -290,6 +305,7 @@ export function ActiveAgentsPanel({ companyId }: ActiveAgentsPanelProps) {
<AgentRunCard
key={run.id}
run={run}
issue={run.issueId ? issueById.get(run.issueId) : undefined}
feed={feedByRun.get(run.id) ?? []}
/>
))}
@@ -298,7 +314,15 @@ export function ActiveAgentsPanel({ companyId }: ActiveAgentsPanelProps) {
);
}
function AgentRunCard({ run, feed }: { run: LiveRunForIssue; feed: FeedItem[] }) {
function AgentRunCard({
run,
issue,
feed,
}: {
run: LiveRunForIssue;
issue?: Issue;
feed: FeedItem[];
}) {
const bodyRef = useRef<HTMLDivElement>(null);
const recent = feed.slice(-20);
@@ -331,6 +355,20 @@ function AgentRunCard({ run, feed }: { run: LiveRunForIssue; feed: FeedItem[] })
</Link>
</div>
{run.issueId && (
<div className="px-3 py-1.5 border-b border-border/40 text-xs flex items-center gap-1 min-w-0">
<span className="text-muted-foreground mr-1">Working on:</span>
<Link
to={`/issues/${run.issueId}`}
className="text-blue-400 hover:text-blue-300 hover:underline min-w-0 truncate"
title={issue?.title ? `${issue?.identifier ?? run.issueId.slice(0, 8)} - ${issue.title}` : issue?.identifier ?? run.issueId.slice(0, 8)}
>
{issue?.identifier ?? run.issueId.slice(0, 8)}
{issue?.title ? ` - ${issue.title}` : ""}
</Link>
</div>
)}
<div ref={bodyRef} className="max-h-[180px] overflow-y-auto p-2 font-mono text-[11px] space-y-1">
{recent.length === 0 && (
<div className="text-xs text-muted-foreground">Waiting for output...</div>

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

@@ -130,7 +130,7 @@ export function NewIssueDialog() {
title: `${issue.identifier ?? "Issue"} created`,
body: issue.title,
tone: "success",
action: { label: "View issue", href: `/issues/${issue.id}` },
action: { label: `View ${issue.identifier ?? "issue"}`, href: `/issues/${issue.id}` },
});
},
});

76
ui/src/components/NewProjectDialog.tsx
View File

@@ -21,11 +21,12 @@ import {
Minimize2,
Target,
Calendar,
Plus,
X,
} from "lucide-react";
import { cn } from "../lib/utils";
import { MarkdownEditor, type MarkdownEditorRef } from "./MarkdownEditor";
import { StatusBadge } from "./StatusBadge";
import type { Goal } from "@paperclip/shared";
const projectStatuses = [
{ value: "backlog", label: "Backlog" },
@@ -42,7 +43,7 @@ export function NewProjectDialog() {
const [name, setName] = useState("");
const [description, setDescription] = useState("");
const [status, setStatus] = useState("planned");
const [goalId, setGoalId] = useState("");
const [goalIds, setGoalIds] = useState<string[]>([]);
const [targetDate, setTargetDate] = useState("");
const [expanded, setExpanded] = useState(false);
@@ -77,7 +78,7 @@ export function NewProjectDialog() {
setName("");
setDescription("");
setStatus("planned");
setGoalId("");
setGoalIds([]);
setTargetDate("");
setExpanded(false);
}
@@ -88,7 +89,7 @@ export function NewProjectDialog() {
name: name.trim(),
description: description.trim() || undefined,
status,
...(goalId ? { goalId } : {}),
...(goalIds.length > 0 ? { goalIds } : {}),
...(targetDate ? { targetDate } : {}),
});
}
@@ -100,7 +101,8 @@ export function NewProjectDialog() {
}
}
const currentGoal = (goals ?? []).find((g) => g.id === goalId);
const selectedGoals = (goals ?? []).filter((g) => goalIds.includes(g.id));
const availableGoals = (goals ?? []).filter((g) => !goalIds.includes(g.id));
return (
<Dialog
@@ -206,36 +208,60 @@ export function NewProjectDialog() {
</PopoverContent>
</Popover>
{/* Goal */}
{selectedGoals.map((goal) => (
<span
key={goal.id}
className="inline-flex items-center gap-1 rounded-md border border-border px-2 py-1 text-xs"
>
<Target className="h-3 w-3 text-muted-foreground" />
<span className="max-w-[160px] truncate">{goal.title}</span>
<button
className="text-muted-foreground hover:text-foreground"
onClick={() => setGoalIds((prev) => prev.filter((id) => id !== goal.id))}
aria-label={`Remove goal ${goal.title}`}
type="button"
>
<X className="h-3 w-3" />
</button>
</span>
))}
<Popover open={goalOpen} onOpenChange={setGoalOpen}>
<PopoverTrigger asChild>
<button className="inline-flex items-center gap-1.5 rounded-md border border-border px-2 py-1 text-xs hover:bg-accent/50 transition-colors">
<Target className="h-3 w-3 text-muted-foreground" />
{currentGoal ? currentGoal.title : "Goal"}
<button
className="inline-flex items-center gap-1.5 rounded-md border border-border px-2 py-1 text-xs hover:bg-accent/50 transition-colors disabled:opacity-60"
disabled={selectedGoals.length > 0 && availableGoals.length === 0}
>
{selectedGoals.length > 0 ? <Plus className="h-3 w-3 text-muted-foreground" /> : <Target className="h-3 w-3 text-muted-foreground" />}
{selectedGoals.length > 0 ? "+ Goal" : "Goal"}
</button>
</PopoverTrigger>
<PopoverContent className="w-48 p-1" align="start">
<button
className={cn(
"flex items-center gap-2 w-full px-2 py-1.5 text-xs rounded hover:bg-accent/50",
!goalId && "bg-accent"
)}
onClick={() => { setGoalId(""); setGoalOpen(false); }}
>
No goal
</button>
{(goals ?? []).map((g) => (
<PopoverContent className="w-56 p-1" align="start">
{selectedGoals.length === 0 && (
<button
className="flex items-center gap-2 w-full px-2 py-1.5 text-xs rounded hover:bg-accent/50 text-muted-foreground"
onClick={() => setGoalOpen(false)}
>
No goal
</button>
)}
{availableGoals.map((g) => (
<button
key={g.id}
className={cn(
"flex items-center gap-2 w-full px-2 py-1.5 text-xs rounded hover:bg-accent/50 truncate",
g.id === goalId && "bg-accent"
)}
onClick={() => { setGoalId(g.id); setGoalOpen(false); }}
className="flex items-center gap-2 w-full px-2 py-1.5 text-xs rounded hover:bg-accent/50 truncate"
onClick={() => {
setGoalIds((prev) => [...prev, g.id]);
setGoalOpen(false);
}}
>
{g.title}
</button>
))}
{selectedGoals.length > 0 && availableGoals.length === 0 && (
<div className="px-2 py-1.5 text-xs text-muted-foreground">
All goals already selected.
</div>
)}
</PopoverContent>
</Popover>