Skip to content
Sign up

flagon-io/g1t

public
00

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
189 linesCodeBlameRaw
1/**
2 * Home's way into Ask (components/ask-composer): the box at the top of the
3 * page, What changed (g1t's plain-English summary of the span, streamed
4 * onto the page by components/home-summary), and Explain on each change
5 * that landed (components/home.tsx). The box and Explain hand their
6 * question to the top bar's Ask panel (lib/ask.ts askG1t). Every question
7 * goes to the viewer's direct message with @g1t, so the answers stay in
8 * Chat and Ask carries on from them.
9 */
10import { ArrowUp, MessageSquare, RotateCcw, Sparkles } from "lucide-react";
11import { type FormEvent, type KeyboardEvent, Suspense, lazy, useCallback, useEffect, useRef, useState } from "react";
12import { Link } from "react-router";
13
14import { askG1t, openAsk } from "../lib/ask";
15import { HOME_STARTERS, type Span, summarizeQuestion } from "../lib/home";
16import { Suggestion, Suggestions } from "./ai-elements/suggestion";
17import { MarkGlyph } from "./logo";
18import { Button } from "./ui/button";
19import { Hint } from "./ui/hint";
20import { Skeleton } from "./ui/skeleton";
21import { Textarea } from "./ui/textarea";
22
23const loadSummary = () => import("./home-summary");
24const HomeSummary = lazy(loadSummary);
25
26type AskSpan = Pick<Span, "key" | "note" | "words" | "from" | "now">;
27
28/** The window event Home's box sends to have What changed summarize the span. */
29const SUMMARIZE_EVENT = "g1t:home-summarize";
30
31/** What the span is called on a button: "since I was last here", "in the last 24 hours". */
32function spanLabel(span: AskSpan): string {
33 return span.key === "last" && span.note == null ? "since I was last here" : `${span.words.charAt(0).toLowerCase()}${span.words.slice(1)}`;
34}
35
36/**
37 * Home's box that asks g1t, with a few things to ask first. It leads the
38 * page, above everything it can be asked about, with what are we building
39 * today.
40 */
41export function HomeAsk({ span }: { span: AskSpan }) {
42 const [draft, setDraft] = useState("");
43 const send = () => {
44 if (!draft.trim()) return;
45 askG1t(draft);
46 setDraft("");
47 };
48 const submit = (event: FormEvent) => {
49 event.preventDefault();
50 send();
51 };
52 const onKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
53 if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing) {
54 event.preventDefault();
55 send();
56 }
57 };
58 return (
59 <section aria-labelledby="home-ask" className="mx-auto flex w-full max-w-5xl flex-col items-center gap-5 pt-4 pb-3 md:pt-8 md:pb-5">
60 <h1 id="home-ask" className="text-center text-[1.75rem] leading-tight font-semibold tracking-tight md:text-[2rem]">
61 What are we building today?
62 </h1>
63 <form onSubmit={submit} className="w-full">
64 <div className="flex items-end gap-2 rounded-2xl border border-line bg-surface p-2 pl-4 shadow-sm transition-shadow focus-within:border-accent-dim focus-within:ring-2 focus-within:ring-accent/25">
65 <MarkGlyph className="mb-2.5 h-4 shrink-0 max-sm:hidden" />
66 <label htmlFor="home-ask-box" className="sr-only">
67 Ask g1t
68 </label>
69 <Textarea
70 id="home-ask-box"
71 value={draft}
72 onChange={(event) => setDraft(event.target.value)}
73 onKeyDown={onKeyDown}
74 rows={1}
75 maxLength={16_000}
76 placeholder="Ask g1t what changed, what's blocked, or what to do next"
77 className="field-sizing-content max-h-40 min-h-10 resize-none border-0 bg-transparent px-1 py-2 text-base shadow-none focus-visible:ring-0 sm:text-[0.9375rem]"
78 />
79 <Hint label="Ask (Enter)">
80 <Button type="submit" variant="accent" size="icon-sm" disabled={!draft.trim()} aria-label="Ask" className="mb-1">
81 <ArrowUp size={15} />
82 </Button>
83 </Hint>
84 </div>
85 </form>
86 <Suggestions className="justify-center">
87 <Suggestion
88 suggestion={`Summarize what changed ${spanLabel(span)}`}
89 onPick={() => window.dispatchEvent(new CustomEvent(SUMMARIZE_EVENT))}
90 onPointerEnter={() => void loadSummary()}
91 className="border-accent-dim text-fg"
92 />
93 {HOME_STARTERS.map((starter) => (
94 <Suggestion key={starter.label} suggestion={starter.label} onPick={() => askG1t(starter.question)} />
95 ))}
96 </Suggestions>
97 </section>
98 );
99}
100
101/**
102 * What changed: g1t's summary of the span in plain English, on the page,
103 * a strip in the span's card. Asked only when the viewer presses
104 * Summarize (each answer is a call to the workspace's own AI provider);
105 * asked again for another span.
106 */
107export function WhatChangedCard({ slug, span, tz }: { slug: string; span: AskSpan; tz: string | null }) {
108 // Each ask is its own: Summarize again asks anew.
109 const [asked, setAsked] = useState<{ question: string; at: number } | null>(null);
110 const [done, setDone] = useState<{ channelId: string | null } | null>(null);
111 const card = useRef<HTMLDivElement>(null);
112 const label = spanLabel(span);
113
114 const summarize = useCallback(() => {
115 setDone(null);
116 setAsked({ question: summarizeQuestion(span, tz), at: Date.now() });
117 }, [span, tz]);
118
119 // Home's box asks for it: bring the card into view and start.
120 useEffect(() => {
121 const onAsk = () => {
122 card.current?.scrollIntoView({ behavior: "smooth", block: "start" });
123 summarize();
124 };
125 window.addEventListener(SUMMARIZE_EVENT, onAsk);
126 return () => window.removeEventListener(SUMMARIZE_EVENT, onAsk);
127 }, [summarize]);
128
129 const onDone = useCallback((channelId: string | null) => setDone({ channelId }), []);
130
131 return (
132 <div ref={card} className="scroll-mt-4 border-t border-line">
133 <div className="px-5 py-3.5">
134 {!asked ? (
135 <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
136 <p className="grow text-sm text-muted">
137 <span className="font-medium text-fg">What changed, in plain English.</span> g1t reads the commits, pull requests, deploys and conversations{" "}
138 {label} and tells you what changed, why, and what is live.
139 </p>
140 <Button
141 type="button"
142 variant="accent"
143 size="sm"
144 onClick={summarize}
145 onPointerEnter={() => void loadSummary()}
146 className="shrink-0 self-start sm:self-auto"
147 >
148 <Sparkles size={14} />
149 Summarize
150 </Button>
151 </div>
152 ) : (
153 <>
154 <Suspense
155 fallback={
156 <div className="space-y-2.5">
157 <Skeleton className="h-3.5 w-11/12" />
158 <Skeleton className="h-3.5 w-3/4" />
159 </div>
160 }
161 >
162 <HomeSummary key={asked.at} slug={slug} question={asked.question} onDone={onDone} />
163 </Suspense>
164 {done && (
165 <div className="mt-4 flex flex-wrap items-center gap-2 border-t border-line pt-3">
166 <Button type="button" variant="soft" size="sm" onClick={openAsk}>
167 <MarkGlyph className="h-3" />
168 Ask a follow-up
169 </Button>
170 <Button type="button" variant="ghost" size="sm" onClick={summarize}>
171 <RotateCcw size={13} />
172 Summarize again
173 </Button>
174 {done.channelId && (
175 <Button asChild variant="ghost" size="sm" className="sm:ml-auto">
176 <Link to={`/${slug}/-/chat/dm/${done.channelId}`}>
177 <MessageSquare size={13} />
178 In your direct message with g1t
179 </Link>
180 </Button>
181 )}
182 </div>
183 )}
184 </>
185 )}
186 </div>
187 </div>
188 );
189}