Sign in

flagon-io/g1t

public

Where people and agents ship software together. The open-source git platform for the whole job: issues, agents, checks and deploys to the edge.

gitagentscloudflarerustforgemcp

g1t/apps/web/app/routes/repo/session.tsx

152 lines5,946 bytesCodeBlame
1import { ArrowLeft, MessageSquare, StickyNote, Terminal, Wrench } from "lucide-react";
2import { Link, useSearchParams } from "react-router";
3
4import type { SessionEntry } from "@g1t/contracts";
5
6import type { Route } from "./+types/session";
7import { page } from "../../lib/meta";
8import { RunCard, formatCost, useLiveRefresh } from "../../components/agents";
9import { Avatar, TimeAgo } from "../../components/ui";
10import { agents } from "../../lib/services.server";
11import { getViewer, roleIn, unwrap } from "../../lib/session.server";
12
13export function meta({ loaderData, params, ...args }: Route.MetaArgs) {
14 return page(args, {
15 title: `Session of #${params.number}${loaderData ? ` ${loaderData.session.pull.title}` : ""} · ${params.owner}/${params.repo} · g1t`,
16 });
17}
18
19export async function loader({ params, context }: Route.LoaderArgs) {
20 const viewer = getViewer(context);
21 const session = await agents.getSession(viewer, { namespace: params.owner, name: params.repo }, Number(params.number));
22 return { session: unwrap(session), member: roleIn(viewer, params.owner) != null };
23}
24
25function Entry({ entry }: { entry: SessionEntry }) {
26 const at = (
27 <span className="shrink-0 text-xs text-faint">
28 <TimeAgo at={entry.at} />
29 </span>
30 );
31 if (entry.kind === "prompt") {
32 return (
33 <li className="px-4 py-3">
34 <details>
35 <summary className="flex cursor-pointer items-center gap-2 text-sm font-medium">
36 <Terminal size={14} className="text-merged" />
37 <span className="grow">Prompt</span>
38 {at}
39 </summary>
40 <pre className="mt-2 max-h-96 overflow-auto rounded-lg bg-bg p-3 text-xs whitespace-pre-wrap text-muted">{entry.text}</pre>
41 </details>
42 </li>
43 );
44 }
45 if (entry.kind === "message") {
46 return (
47 <li className="flex gap-2.5 px-4 py-3 text-sm">
48 <MessageSquare size={14} className="mt-0.5 shrink-0 text-faint" />
49 <p className="min-w-0 grow whitespace-pre-wrap">{entry.text}</p>
50 {at}
51 </li>
52 );
53 }
54 if (entry.kind === "tool_call") {
55 return (
56 <li className="flex gap-2.5 px-4 py-2 text-xs">
57 <Wrench size={13} className="mt-0.5 shrink-0 text-faint" />
58 <span className="shrink-0 font-medium text-muted">{entry.tool}</span>
59 <code className="min-w-0 grow truncate font-mono text-fg/85" title={entry.text}>
60 {entry.text}
61 </code>
62 </li>
63 );
64 }
65 if (entry.kind === "tool_result") {
66 return (
67 <li className="px-4 py-1.5 pl-10">
68 <details>
69 <summary className="cursor-pointer text-xs text-faint">Result</summary>
70 <pre className="mt-1.5 max-h-72 overflow-auto rounded-lg bg-bg p-3 text-xs text-muted">{entry.text}</pre>
71 </details>
72 </li>
73 );
74 }
75 return (
76 <li className="flex gap-2.5 px-4 py-2.5 text-xs text-muted">
77 <StickyNote size={13} className="mt-0.5 shrink-0 text-faint" />
78 <span className="min-w-0 grow">{entry.text}</span>
79 {at}
80 </li>
81 );
82}
83
84export default function SessionPage({ loaderData, params }: Route.ComponentProps) {
85 const { session, member } = loaderData;
86 const { pull, entries, runs } = session;
87 const base = `/${params.owner}/${params.repo}`;
88 const live = runs.some((run) => run.status === "queued" || run.status === "running");
89 useLiveRefresh(live);
90 const [search, setSearch] = useSearchParams();
91 const quiet = search.get("results") !== "1";
92 const shown = quiet ? entries.filter((entry) => entry.kind !== "tool_result") : entries;
93 const tools = entries.filter((entry) => entry.kind === "tool_call").length;
94 return (
95 <div className="max-w-4xl">
96 <Link to={`${base}/sessions`} className="inline-flex items-center gap-1.5 text-sm text-muted hover:text-fg">
97 <ArrowLeft size={14} />
98 Sessions
99 </Link>
100 <div className="mt-4 flex flex-wrap items-center gap-x-3 gap-y-2">
101 <Avatar name={pull.agent} size={22} />
102 <h2 className="min-w-0 grow text-lg font-semibold tracking-tight">
103 <Link to={`${base}/pull/${pull.number}`} className="hover:text-accent">
104 {pull.title} <span className="font-normal text-faint">#{pull.number}</span>
105 </Link>
106 </h2>
107 </div>
108 <p className="mt-1.5 text-sm text-muted">
109 {pull.agent} · {pull.status} · {entries.length} entries · {tools} tool calls
110 {formatCost(session.costUsd) && ` · ${formatCost(session.costUsd)} over ${runs.length} ${runs.length === 1 ? "run" : "runs"}`}
111 </p>
112
113 {runs.length > 0 && (
114 <section className="mt-8">
115 <h3 className="text-sm font-medium">Runs</h3>
116 <ul className="mt-3 space-y-3">
117 {runs.map((run) => (
118 <RunCard key={run.id} run={run} member={member} />
119 ))}
120 </ul>
121 </section>
122 )}
123
124 <section className="mt-8">
125 <div className="flex items-baseline justify-between">
126 <h3 className="text-sm font-medium">What happened</h3>
127 <button
128 type="button"
129 onClick={() => setSearch(quiet ? { results: "1" } : {}, { replace: true, preventScrollReset: true })}
130 className="text-xs text-muted hover:text-fg"
131 >
132 {quiet ? "Show tool results" : "Hide tool results"}
133 </button>
134 </div>
135 {shown.length === 0 ? (
136 <p className="mt-3 text-sm text-muted">Nothing recorded yet.</p>
137 ) : (
138 <ol className="mt-3 divide-y divide-line rounded-xl border border-line bg-surface">
139 {shown.map((entry) => (
140 <Entry key={entry.seq} entry={entry} />
141 ))}
142 </ol>
143 )}
144 {entries.length >= 2000 && (
145 <p className="mt-3 text-xs text-muted">
146 The first 2000 entries. The rest are in the API's read_session, page by page.
147 </p>
148 )}
149 </section>
150 </div>
151 );
152}