buzzert/Sybil-2
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

new look

Browse Source
This commit is contained in:
James Magahern
2026-05-02 15:44:31 -07:00
parent dacab2f6ee
commit adb9e15b6c
8 changed files with 235 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
web/src/components/auth/auth-screen.tsx
View File

@@ -12,14 +12,20 @@ type Props = {
export function AuthScreen({ authTokenInput, setAuthTokenInput, isSigningIn, authError, onSignIn }: Props) {
return (
<div className="flex h-full items-center justify-center bg-[radial-gradient(circle_at_top,#45215f_0%,#2a183d_45%,#191227_100%)] p-4">
<div className="w-full max-w-md rounded-2xl border bg-[hsl(276_32%_14%)] p-6 shadow-xl shadow-violet-950/45">
<div className="app-grid-surface flex h-full items-center justify-center p-4">
<div className="glass-panel w-full max-w-md rounded-2xl border border-violet-300/18 p-6">
<div className="mb-6">
<div className="sybil-wordmark bg-[linear-gradient(90deg,#ff8df8,#9a6dff_54%,#67dfff)] bg-clip-text text-3xl text-transparent">
SYBIL
</div>
</div>
<div className="mb-5 flex items-start gap-3">
<div className="rounded-lg bg-violet-200 p-2 text-violet-900">
<div className="rounded-lg border border-cyan-300/25 bg-cyan-400/12 p-2 text-cyan-200">
<ShieldCheck className="h-4 w-4" />
</div>
<div>
<h1 className="text-lg font-semibold">Sign in to Sybil</h1>
<h1 className="text-lg font-semibold text-violet-50">Sign in to Sybil</h1>
<p className="mt-1 text-sm text-muted-foreground">Use your backend admin token.</p>
</div>
</div>
@@ -38,6 +44,7 @@ export function AuthScreen({ authTokenInput, setAuthTokenInput, isSigningIn, aut
value={authTokenInput}
onInput={(event) => setAuthTokenInput(event.currentTarget.value)}
disabled={isSigningIn}
className="bg-[hsl(235_48%_6%_/_0.84)] text-violet-50"
/>
<Button className="w-full" type="submit" disabled={isSigningIn}>
{isSigningIn ? "Signing in..." : "Sign in"}

18
web/src/components/chat/chat-messages-panel.tsx
View File

@@ -42,7 +42,7 @@ export function ChatMessagesPanel({ messages, isLoading, isSending }: Props) {
return (
<>
{isLoading && messages.length === 0 ? <p className="text-sm text-muted-foreground">Loading messages...</p> : null}
<div className="mx-auto max-w-3xl space-y-6">
<div className="mx-auto max-w-4xl space-y-6">
{messages.map((message) => {
const toolLogMetadata = asToolLogMetadata(message.metadata);
if (message.role === "tool" && toolLogMetadata) {
@@ -53,13 +53,13 @@ export function ChatMessagesPanel({ messages, isLoading, isSending }: Props) {
<div key={message.id} className="flex justify-start">
<div
className={cn(
"inline-flex max-w-[85%] items-center gap-2 rounded-md border px-3 py-2 text-xs leading-5",
"inline-flex max-w-[85%] items-center gap-3 rounded-lg border px-3.5 py-2 text-sm leading-5 shadow-[inset_0_1px_0_hsl(180_100%_88%_/_0.06)]",
isFailed
? "border-rose-500/40 bg-rose-950/20 text-rose-200"
: "border-cyan-500/35 bg-cyan-950/20 text-cyan-100"
? "border-rose-500/40 bg-rose-950/18 text-rose-200"
: "border-cyan-400/34 bg-cyan-950/18 text-cyan-100"
)}
>
<Icon className="h-3.5 w-3.5 shrink-0" />
<Icon className="h-4 w-4 shrink-0 text-cyan-300" />
<span>{getToolSummary(message, toolLogMetadata)}</span>
</div>
</div>
@@ -73,7 +73,9 @@ export function ChatMessagesPanel({ messages, isLoading, isSending }: Props) {
<div
className={cn(
"max-w-[85%]",
isUser ? "rounded-2xl bg-violet-900/80 px-4 py-3 text-sm leading-6 text-fuchsia-50" : "text-base leading-7 text-fuchsia-100"
isUser
? "rounded-xl border border-violet-300/24 bg-[linear-gradient(135deg,hsl(258_86%_48%_/_0.86),hsl(278_72%_29%_/_0.86))] px-4 py-3 text-sm leading-6 text-fuchsia-50 shadow-sm"
: "text-base leading-7 text-violet-50"
)}
>
{isPendingAssistant ? (
@@ -85,7 +87,7 @@ export function ChatMessagesPanel({ messages, isLoading, isSending }: Props) {
) : (
<MarkdownContent
markdown={message.content}
className={cn("[&_a]:text-inherit [&_a]:underline", isUser ? "leading-[1.78] text-fuchsia-50" : "leading-[1.82] text-fuchsia-100")}
className={cn("[&_a]:text-inherit [&_a]:underline", isUser ? "leading-[1.78] text-fuchsia-50" : "leading-[1.82] text-violet-50")}
/>
)}
</div>
@@ -94,7 +96,7 @@ export function ChatMessagesPanel({ messages, isLoading, isSending }: Props) {
})}
{isSending && !hasPendingAssistant ? (
<div className="flex justify-start">
<div className="max-w-[85%] text-base leading-7 text-fuchsia-100">
<div className="max-w-[85%] text-base leading-7 text-violet-50">
<span className="inline-flex items-center gap-1" aria-label="Assistant is typing" role="status">
<span className="inline-block h-1.5 w-1.5 animate-bounce rounded-full bg-muted-foreground [animation-delay:0ms]" />
<span className="inline-block h-1.5 w-1.5 animate-bounce rounded-full bg-muted-foreground [animation-delay:140ms]" />

20
web/src/components/search/search-results-panel.tsx
View File

@@ -139,7 +139,7 @@ export function SearchResultsPanel({
{search?.query ? (
<div className="mb-5">
<p className="text-sm text-muted-foreground">Results for</p>
<h2 className="mt-1 break-words text-xl font-semibold">{search.query}</h2>
<h2 className="mt-1 break-words text-xl font-semibold text-violet-50">{search.query}</h2>
<p className="mt-1 text-xs text-muted-foreground">
{search.results.length} result{search.results.length === 1 ? "" : "s"}
{search.latencyMs ? ` • ${search.latencyMs} ms` : ""}
@@ -148,8 +148,8 @@ export function SearchResultsPanel({
) : null}
{(isRunning || !!search?.answerText || !!search?.answerError) && (
<section className="mb-6 rounded-xl border border-violet-400/35 bg-[hsl(276_31%_15%)] p-4">
<p className="text-xs font-semibold uppercase tracking-wide text-violet-300/90">Answer</p>
<section className="mb-6 rounded-xl border border-violet-300/24 bg-[linear-gradient(135deg,hsl(240_46%_8%_/_0.94),hsl(260_40%_12%_/_0.88))] p-4 shadow-[inset_0_1px_0_hsl(255_100%_92%_/_0.06)]">
<p className="text-xs font-semibold uppercase text-violet-300/90">Answer</p>
{(isAnswerLoading || hasAnswerText) ? (
<div className="mt-2">
<div className="relative">
@@ -172,7 +172,7 @@ export function SearchResultsPanel({
)}
</div>
{!isAnswerExpanded && (isExpandable || isAnswerLoading) ? (
<div className="pointer-events-none absolute inset-x-0 bottom-0 h-7 bg-gradient-to-t from-[hsl(276_31%_15%)] to-transparent" />
<div className="pointer-events-none absolute inset-x-0 bottom-0 h-7 bg-gradient-to-t from-[hsl(252_42%_10%)] to-transparent" />
) : null}
</div>
<div className="mt-2 h-5">
@@ -199,7 +199,7 @@ export function SearchResultsPanel({
href={citation.href}
target={openLinksInNewTab ? "_blank" : undefined}
rel={openLinksInNewTab ? "noreferrer" : undefined}
className="max-w-full truncate rounded-md border border-violet-400/40 px-2 py-1 text-xs text-violet-200 hover:bg-violet-500/20"
className="max-w-full truncate rounded-md border border-violet-300/28 bg-violet-300/8 px-2 py-1 text-xs text-violet-200 hover:bg-violet-500/20"
>
<span className="mr-1 rounded bg-violet-900/70 px-1 py-0.5 text-[10px] text-violet-100">{citation.index}</span>
{citation.label}
@@ -225,23 +225,23 @@ export function SearchResultsPanel({
<article
key={result.id}
className={cn(
"rounded-lg border border-border bg-[hsl(276_30%_13%)] px-4 py-4 shadow-sm transition-colors",
index === activeResultIndex && "border-violet-300 ring-1 ring-violet-300/80"
"rounded-lg border border-violet-300/16 bg-[linear-gradient(135deg,hsl(238_44%_7%_/_0.92),hsl(250_34%_10%_/_0.86))] px-4 py-4 shadow-sm transition-colors",
index === activeResultIndex && "border-violet-300/55 ring-1 ring-violet-300/70"
)}
>
<p className="truncate text-xs text-violet-300/85">{formatHost(result.url)}</p>
<p className="truncate text-xs text-cyan-200/85">{formatHost(result.url)}</p>
<a
href={result.url}
target={openLinksInNewTab ? "_blank" : undefined}
rel={openLinksInNewTab ? "noreferrer" : undefined}
className="mt-1 block break-words text-lg font-medium text-violet-300 hover:underline"
className="mt-1 block break-words text-lg font-medium text-violet-200 hover:underline"
>
{result.title || result.url}
</a>
{(result.publishedDate || result.author) && (
<p className="mt-1 text-xs text-muted-foreground">{[result.publishedDate, result.author].filter(Boolean).join(" • ")}</p>
)}
{result.url ? <p className="mt-2 break-all text-sm leading-6 text-violet-100/90">{result.url}</p> : null}
{result.url ? <p className="mt-2 break-all text-sm leading-6 text-violet-100/82">{result.url}</p> : null}
</article>
);
})}

12
web/src/components/ui/button.tsx
View File

@@ -3,14 +3,16 @@ import type { JSX } from "preact";
import { cn } from "@/lib/utils";
const buttonVariants = cva(
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
{
variants: {
variant: {
default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
ghost: "hover:bg-accent hover:text-accent-foreground",
default:
"border border-violet-300/35 bg-[linear-gradient(135deg,hsl(252_92%_64%_/_0.95),hsl(274_84%_35%_/_0.95))] text-primary-foreground shadow-sm hover:border-violet-200/55 hover:brightness-110",
secondary:
"border border-violet-300/18 bg-secondary/78 text-secondary-foreground shadow-[inset_0_1px_0_hsl(255_100%_92%_/_0.06)] hover:border-violet-300/32 hover:bg-secondary",
outline: "border border-input bg-background/76 hover:border-violet-300/45 hover:bg-accent/65 hover:text-accent-foreground",
ghost: "text-muted-foreground hover:bg-accent/65 hover:text-accent-foreground",
},
size: {
default: "h-10 px-4 py-2",

2
web/src/components/ui/input.tsx
View File

@@ -5,7 +5,7 @@ export function Input({ className, ...props }: JSX.InputHTMLAttributes<HTMLInput
return (
<input
className={cn(
"flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
"flex h-9 w-full rounded-md border border-input bg-background/78 px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
className
)}
{...props}

2
web/src/components/ui/textarea.tsx
View File

@@ -5,7 +5,7 @@ export function Textarea({ className, ...props }: JSX.TextareaHTMLAttributes<HTM
return (
<textarea
className={cn(
"flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
"flex min-h-[80px] w-full rounded-md border border-input bg-background/78 px-3 py-2 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
className
)}
{...props}