Files
OpenJarvis/frontend/src/components/ui/input.tsx
T
e240fde74a feat(ui): Raycast-inspired visual refresh with System Pulse and X-Ray footers (#57)
* feat(ui): update design tokens — system-ui font, warmer palette, accent triad

- Remove Merriweather serif font, switch to system-ui font stack
- Warmer dark mode neutrals (#161618 bg instead of #09090b)
- Add amber/purple accent tokens for signature color triad
- Update borders to rgba for softer feel
- Tighter line-height (1.5) and letter-spacing (-0.01em)
- Update PWA theme_color to match new palette

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* feat(ui): frosted glass sidebar with backdrop-blur

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* feat(ui): initialize shadcn/ui with button, dialog, input, select, tooltip, sonner

Set up shadcn/ui (v4) for Tailwind CSS v4 with CSS-first config. Added
path aliases (@/) to tsconfig.json and vite.config.ts. Installed six
components (button, dialog, input, select, tooltip, sonner) and wired
Sonner's <Toaster> into App.tsx for toast notifications. Removed the
next-themes dependency since this is a Vite/React project, not Next.js.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* fix(ui): disable create agent when unavailable, replace errors with toasts

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* feat(ui): add System Pulse bar and health check banner

- 3px gradient bar at top reflecting system state (idle/inferencing/agent)
- Health check banner when backend is unreachable
- Pulse colors: blue (inference), purple (agents), dim blue (idle)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* feat(ui): add X-Ray message footers with collapsible telemetry

- MessageTelemetry type on ChatMessage (engine, model, speed, TTFT, timing)
- Capture timing data during SSE streaming in InputArea
- XRayFooter component: collapsed one-liner + expandable trace grid
- Integrated into MessageBubble, replacing old token count display

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* fix(ui): resolve shadcn/ui CSS token conflicts with design system

- Namespace shadcn @theme inline variables (--color-cn-*) to avoid
  overriding project's --color-border, --color-accent, --radius-* tokens
- Remove @apply border-border, bg-background, text-foreground, font-sans
  that conflicted with our explicit CSS custom properties
- Remove dead Geist font import (we use system-ui)
- Remove ---break--- comment artifacts from shadcn CLI

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-14 13:38:07 -07:00

21 lines
1.0 KiB
TypeScript

import * as React from "react"
import { Input as InputPrimitive } from "@base-ui/react/input"
import { cn } from "@/lib/utils"
function Input({ className, type, ...props }: React.ComponentProps<"input">) {
return (
<InputPrimitive
type={type}
data-slot="input"
className={cn(
"h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
className
)}
{...props}
/>
)
}
export { Input }