mirrors/hermes-agent
1
0
Fork 0
mirror of https://github.com/NousResearch/hermes-agent.git synced 2026-04-27 01:11:40 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

feat: react-router, sidebar layout, sticky header, dropdown component, remove emojis, rounded corners

Browse source
This commit is contained in:
Austin Pickett 2026-04-14 00:01:18 -04:00
parent 0cc7f79016
commit bc3844c907
16 changed files with 914 additions and 509 deletions
Download patch file Download diff file Expand all files Collapse all files

12
web/src/components/AutoField.tsx
View file

@ -1,6 +1,6 @@
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Select } from "@/components/ui/select";
import { Select, SelectOption } from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";
function FieldHint({ schema, schemaKey }: { schema: Record<string, unknown>; schemaKey: string }) {
@ -44,11 +44,11 @@ export function AutoField({
<div className="grid gap-1.5">
<Label className="text-sm">{label}</Label>
<FieldHint schema={schema} schemaKey={schemaKey} />
<Select value={String(value ?? "")} onChange={(e) => onChange(e.target.value)}>
<Select value={String(value ?? "")} onValueChange={(v) => onChange(v)}>
{options.map((opt) => (
<option key={opt} value={opt}>
<SelectOption key={opt} value={opt}>
{opt || "(none)"}
</option>
</SelectOption>
))}
</Select>
</div>
@ -85,7 +85,7 @@ export function AutoField({
<Label className="text-sm">{label}</Label>
<FieldHint schema={schema} schemaKey={schemaKey} />
<textarea
className="flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
className="flex min-h-[80px] w-full border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
value={String(value ?? "")}
onChange={(e) => onChange(e.target.value)}
/>
@ -117,7 +117,7 @@ export function AutoField({
if (typeof value === "object" && value !== null && !Array.isArray(value)) {
const obj = value as Record<string, unknown>;
return (
<div className="grid gap-3 rounded-lg border border-border p-3">
<div className="grid gap-3 border border-border p-3">
<Label className="text-xs font-medium">{label}</Label>
<FieldHint schema={schema} schemaKey={schemaKey} />
{Object.entries(obj).map(([subKey, subVal]) => (

6
web/src/components/Markdown.tsx
View file

@ -128,7 +128,7 @@ function Block({ block, highlightTerms }: { block: BlockNode; highlightTerms?: s
switch (block.type) {
case "code":
return (
<pre className="rounded-md bg-secondary/60 border border-border px-3 py-2.5 text-xs font-mono leading-relaxed overflow-x-auto">
<pre className="bg-secondary/60 border border-border px-3 py-2.5 text-xs font-mono leading-relaxed overflow-x-auto">
<code>{block.content}</code>
</pre>
);
@ -228,7 +228,7 @@ function InlineContent({ text, highlightTerms }: { text: string; highlightTerms?
return <HighlightedText key={i} text={node.content} terms={highlightTerms} />;
case "code":
return (
<code key={i} className="rounded bg-secondary/60 px-1.5 py-0.5 text-xs font-mono text-primary/90">
<code key={i} className="bg-secondary/60 px-1.5 py-0.5 text-xs font-mono text-primary/90">
{node.content}
</code>
);
@ -269,7 +269,7 @@ function HighlightedText({ text, terms }: { text: string; terms?: string[] }) {
<>
{parts.map((part, i) =>
regex.test(part) ? (
<mark key={i} className="bg-warning/30 text-warning rounded-sm px-0.5">{part}</mark>
<mark key={i} className="bg-warning/30 text-warning px-0.5">{part}</mark>
) : (
<span key={i}>{part}</span>
)

2
web/src/components/OAuthProvidersCard.tsx
View file

@ -188,7 +188,7 @@ export function OAuthProvidersCard({ onError, onSuccess }: Props) {
{!p.status.logged_in && (
<span className="text-xs text-muted-foreground/80">
Not connected. Run{" "}
<code className="text-foreground bg-secondary/40 px-1 rounded">
<code className="text-foreground bg-secondary/40 px-1">
{p.cli_command}
</code>{" "}
in a terminal.

2
web/src/components/ui/card.tsx
View file

@ -4,7 +4,7 @@ export function Card({ className, ...props }: React.HTMLAttributes<HTMLDivElemen
return (
<div
className={cn(
"border border-border bg-card/80 text-card-foreground overflow-hidden w-full",
"border border-border bg-card/80 text-card-foreground w-full",
className,
)}
{...props}

197
web/src/components/ui/select.tsx
View file

@ -1,15 +1,194 @@
import { useState, useRef, useEffect, useCallback } from "react";
import { ChevronDown, Check } from "lucide-react";
import { cn } from "@/lib/utils";
export function Select({ className, ...props }: React.SelectHTMLAttributes<HTMLSelectElement>) {
export function Select({
value,
onValueChange,
children,
className,
id,
disabled,
}: SelectProps) {
const [open, setOpen] = useState(false);
const [highlightedIndex, setHighlightedIndex] = useState(-1);
const containerRef = useRef<HTMLDivElement>(null);
const listRef = useRef<HTMLDivElement>(null);
const options: SelectOptionData[] = [];
flattenChildren(children, options);
const selectedOption = options.find((o) => o.value === value);
const displayLabel = selectedOption?.label ?? value ?? "";
const close = useCallback(() => {
setOpen(false);
setHighlightedIndex(-1);
}, []);
useEffect(() => {
if (!open) return;
const handler = (e: MouseEvent) => {
if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
close();
}
};
document.addEventListener("mousedown", handler);
return () => document.removeEventListener("mousedown", handler);
}, [open, close]);
useEffect(() => {
if (open && listRef.current && highlightedIndex >= 0) {
const el = listRef.current.children[highlightedIndex] as HTMLElement | undefined;
el?.scrollIntoView({ block: "nearest" });
}
}, [open, highlightedIndex]);
const handleKeyDown = (e: React.KeyboardEvent) => {
if (disabled) return;
switch (e.key) {
case "Enter":
case " ":
e.preventDefault();
if (!open) {
setOpen(true);
setHighlightedIndex(options.findIndex((o) => o.value === value));
} else if (highlightedIndex >= 0 && options[highlightedIndex]) {
onValueChange?.(options[highlightedIndex].value);
close();
}
break;
case "ArrowDown":
e.preventDefault();
if (!open) {
setOpen(true);
setHighlightedIndex(options.findIndex((o) => o.value === value));
} else {
setHighlightedIndex((i) => Math.min(i + 1, options.length - 1));
}
break;
case "ArrowUp":
e.preventDefault();
if (open) {
setHighlightedIndex((i) => Math.max(i - 1, 0));
}
break;
case "Escape":
e.preventDefault();
close();
break;
}
};
return (
<select
className={cn(
"flex h-9 w-full border border-border bg-background/40 px-3 py-1 font-courier text-sm",
"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-foreground/30 focus-visible:border-foreground/25",
"disabled:cursor-not-allowed disabled:opacity-50",
className,
<div ref={containerRef} className={cn("relative", className)} id={id}>
<button
type="button"
role="combobox"
aria-expanded={open}
aria-haspopup="listbox"
disabled={disabled}
onClick={() => !disabled && setOpen((o) => !o)}
onKeyDown={handleKeyDown}
className={cn(
"flex h-9 w-full items-center justify-between border border-border bg-background/40 px-3 py-1 font-courier text-sm text-left transition-colors",
"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-foreground/30 focus-visible:border-foreground/25",
"disabled:cursor-not-allowed disabled:opacity-50",
"cursor-pointer",
)}
>
<span className={cn("truncate", !selectedOption && "text-muted-foreground")}>
{displayLabel}
</span>
<ChevronDown
className={cn(
"h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform",
open && "rotate-180",
)}
/>
</button>
{open && (
<div
ref={listRef}
role="listbox"
className={cn(
"absolute z-50 mt-1 w-full border border-border bg-popover text-popover-foreground shadow-lg",
"max-h-60 overflow-auto",
"animate-[fade-in_100ms_ease-out]",
)}
>
{options.map((opt, i) => {
const isSelected = opt.value === value;
const isHighlighted = i === highlightedIndex;
return (
<div
key={opt.value}
role="option"
aria-selected={isSelected}
onMouseEnter={() => setHighlightedIndex(i)}
onClick={() => {
onValueChange?.(opt.value);
close();
}}
className={cn(
"flex items-center gap-2 px-3 py-2 text-sm font-courier cursor-pointer transition-colors",
isHighlighted && "bg-foreground/10",
isSelected && "text-foreground",
!isSelected && "text-muted-foreground",
)}
>
<Check
className={cn(
"h-3.5 w-3.5 shrink-0",
isSelected ? "opacity-100" : "opacity-0",
)}
/>
<span className="truncate">{opt.label}</span>
</div>
);
})}
</div>
)}
{...props}
/>
</div>
);
}
export function SelectOption(_props: SelectOptionProps) {
return null;
}
function flattenChildren(children: React.ReactNode, out: SelectOptionData[]) {
const arr = Array.isArray(children) ? children : [children];
for (const child of arr) {
if (!child || typeof child !== "object" || !("props" in child)) continue;
const props = child.props as Record<string, unknown>;
if (props.value !== undefined) {
out.push({
value: String(props.value),
label: typeof props.children === "string" ? props.children : String(props.value),
});
} else if (props.children) {
flattenChildren(props.children as React.ReactNode, out);
}
}
}
interface SelectProps {
value?: string;
onValueChange?: (value: string) => void;
children?: React.ReactNode;
className?: string;
id?: string;
disabled?: boolean;
}
interface SelectOptionProps {
value: string;
children: React.ReactNode;
}
interface SelectOptionData {
value: string;
label: string;
}