Grayscale/nanobot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(webui): unify settings and dark mode surfaces (#5058)

Browse Source
This commit is contained in:
chengyongru
2026-07-23 17:47:20 +08:00
committed by GitHub
parent c3ec2e665f
commit 4b1547db7d
14 changed files with 130 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.github/workflows/ci.yml
+31
View File
@@ -18,8 +18,39 @@ permissions:
contents: read contents: read
jobs: jobs:
changes:
name: Detect changes
runs-on: ubuntu-latest
outputs:
python_required: ${{ steps.paths.outputs.python_required }}
steps:
- uses: actions/checkout@v4
with:
fetch-depth: 0
- name: Detect Python-relevant changes
id: paths
shell: bash
env:
BASE_SHA: ${{ github.event_name == 'pull_request' && github.event.pull_request.base.sha || github.event.before }}
HEAD_SHA: ${{ github.sha }}
run: |
python_required=true
if git cat-file -e "${BASE_SHA}^{commit}" 2>/dev/null &&
changed_files="$(git diff --name-only --no-renames "$BASE_SHA" "$HEAD_SHA")" &&
[[ -n "$changed_files" ]] &&
! grep -qvE '^(webui/|nanobot/channels/[^/]+/webui/|docs/)' <<< "$changed_files"; then
python_required=false
fi
echo "python_required=$python_required" >> "$GITHUB_OUTPUT"
test: test:
name: Python (${{ matrix.name }}) name: Python (${{ matrix.name }})
needs: changes
if: needs.changes.outputs.python_required == 'true'
runs-on: ${{ matrix.os }} runs-on: ${{ matrix.os }}
timeout-minutes: 20 timeout-minutes: 20
strategy: strategy:
webui/src/components/SessionSearchDialog.tsx
+1 -1
View File
@@ -121,7 +121,7 @@ export function SessionSearchDialog({
className={cn( className={cn(
"flex max-h-[min(40rem,calc(100vh-2rem))] w-[calc(100vw-2rem)] max-w-[42rem] flex-col gap-0 overflow-hidden p-0", "flex max-h-[min(40rem,calc(100vh-2rem))] w-[calc(100vw-2rem)] max-w-[42rem] flex-col gap-0 overflow-hidden p-0",
"rounded-[22px] border border-border bg-background text-foreground shadow-[0_22px_70px_rgba(0,0,0,0.22)]", "rounded-[22px] border border-border bg-background text-foreground shadow-[0_22px_70px_rgba(0,0,0,0.22)]",
"dark:border-white/14 dark:bg-[#2b2b2b] dark:shadow-[0_26px_90px_rgba(0,0,0,0.44)] sm:rounded-[22px]", "dark:border-white/14 dark:bg-popover dark:shadow-[0_26px_90px_rgba(0,0,0,0.44)] sm:rounded-[22px]",
)} )}
> >
<DialogTitle className="sr-only">{t("sidebar.searchAria")}</DialogTitle> <DialogTitle className="sr-only">{t("sidebar.searchAria")}</DialogTitle>
webui/src/components/settings/SettingsView.tsx
+51 -66
View File
@@ -2034,11 +2034,7 @@ export function SettingsView({
}; };
return ( return (
<div <div className="flex min-h-0 flex-1 flex-col overflow-hidden bg-settings-canvas lg:flex-row">
className={cn(
"flex min-h-0 flex-1 flex-col overflow-hidden bg-background lg:flex-row",
)}
>
{showSidebar ? ( {showSidebar ? (
<SettingsSidebar <SettingsSidebar
activeSection={activeSection} activeSection={activeSection}
@@ -2104,7 +2100,7 @@ export function SettingsView({
<main <main
className={cn( className={cn(
"min-w-0 flex-1 [scrollbar-gutter:stable]", "min-w-0 flex-1 bg-settings-canvas [scrollbar-gutter:stable]",
activeSection === "channels" ? "overflow-y-auto xl:overflow-hidden" : "overflow-y-auto", activeSection === "channels" ? "overflow-y-auto xl:overflow-hidden" : "overflow-y-auto",
)} )}
> >
@@ -2138,7 +2134,7 @@ export function SettingsView({
</div> </div>
{loading ? ( {loading ? (
<div className="flex h-48 items-center justify-center rounded-[24px] border border-border/50 bg-card/75 text-sm text-muted-foreground shadow-[0_20px_70px_rgba(15,23,42,0.07)]"> <div className="flex h-48 items-center justify-center rounded-[22px] bg-settings-surface text-sm text-muted-foreground">
<Loader2 className="mr-2 h-4 w-4 animate-spin" /> <Loader2 className="mr-2 h-4 w-4 animate-spin" />
{t("settings.status.loading")} {t("settings.status.loading")}
</div> </div>
@@ -2225,7 +2221,7 @@ function SettingsSidebar({
return ( return (
<aside <aside
className={cn( className={cn(
"flex w-full shrink-0 flex-col bg-sidebar px-3 pb-2 lg:w-[17rem] lg:px-3 lg:pb-4", "flex w-full shrink-0 flex-col bg-settings-surface px-3 pb-2 lg:w-[17rem] lg:px-3 lg:pb-4",
hostChromeInset ? "pt-[4.25rem] lg:pt-[4.25rem]" : "pt-4 lg:pt-4", hostChromeInset ? "pt-[4.25rem] lg:pt-[4.25rem]" : "pt-4 lg:pt-4",
)} )}
> >
@@ -2370,7 +2366,7 @@ function OverviewSettings({
: tx("settings.values.ready", "Ready"); : tx("settings.values.ready", "Ready");
return ( return (
<div className="space-y-7"> <div className="space-y-7">
<section> <section className="rounded-[22px] bg-settings-surface px-4 py-4 sm:px-5">
<TokenUsageHeatmap usage={settings.usage} timeZone={settings.agent.timezone} /> <TokenUsageHeatmap usage={settings.usage} timeZone={settings.agent.timezone} />
</section> </section>
@@ -2576,7 +2572,8 @@ function AppearanceSettings({
<span <span
className={cn( className={cn(
"rounded-full px-3 py-1 transition-colors", "rounded-full px-3 py-1 transition-colors",
theme === "light" && "bg-background text-foreground shadow-sm", theme === "light" &&
"bg-background text-foreground ring-1 ring-inset ring-border/45",
)} )}
> >
{t("settings.values.light")} {t("settings.values.light")}
@@ -2584,7 +2581,8 @@ function AppearanceSettings({
<span <span
className={cn( className={cn(
"rounded-full px-3 py-1 transition-colors", "rounded-full px-3 py-1 transition-colors",
theme === "dark" && "bg-background text-foreground shadow-sm", theme === "dark" &&
"bg-background text-foreground ring-1 ring-inset ring-border/45",
)} )}
> >
{t("settings.values.dark")} {t("settings.values.dark")}
@@ -3513,7 +3511,7 @@ function ProvidersSettings({
value={query} value={query}
onChange={(event) => onQueryChange(event.target.value)} onChange={(event) => onQueryChange(event.target.value)}
placeholder={tx("settings.providers.searchPlaceholder", "Search providers")} placeholder={tx("settings.providers.searchPlaceholder", "Search providers")}
className="h-10 rounded-full pl-9 text-[13px]" className="h-10 rounded-full border-border/45 bg-settings-surface pl-9 text-[13px]"
/> />
</div> </div>
<ProviderSection <ProviderSection
@@ -4186,7 +4184,7 @@ function AutomationsSettings({
<section className="shrink-0"> <section className="shrink-0">
<div className="mx-auto flex w-full max-w-[56rem] flex-col gap-3"> <div className="mx-auto flex w-full max-w-[56rem] flex-col gap-3">
<div className="-mx-1 overflow-x-auto px-1 pb-0.5"> <div className="-mx-1 overflow-x-auto px-1 pb-0.5">
<div className="grid w-full min-w-[36rem] grid-cols-5 gap-1 rounded-[15px] bg-muted/42 p-1 shadow-[inset_0_0_0_1px_rgba(15,23,42,0.035)] dark:bg-background/30"> <div className="grid w-full min-w-[36rem] grid-cols-5 gap-1 rounded-[15px] bg-muted p-1">
{summaryOptions.map((option) => ( {summaryOptions.map((option) => (
<button <button
key={option.value} key={option.value}
@@ -4194,8 +4192,7 @@ function AutomationsSettings({
onClick={() => onFilterChange(option.value)} onClick={() => onFilterChange(option.value)}
className={cn( className={cn(
"inline-flex h-8 min-w-0 shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-[11px] px-3 text-[12px] font-medium text-muted-foreground transition-colors", "inline-flex h-8 min-w-0 shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-[11px] px-3 text-[12px] font-medium text-muted-foreground transition-colors",
filter === option.value && filter === option.value && "bg-background text-foreground",
"bg-background text-foreground shadow-[0_8px_20px_rgba(15,23,42,0.07)] dark:bg-background/80",
automationFilterToneClass(option.value, option.count, filter === option.value), automationFilterToneClass(option.value, option.count, filter === option.value),
)} )}
> >
@@ -4223,14 +4220,14 @@ function AutomationsSettings({
"settings.automations.search", "settings.automations.search",
"Search task, message, linked chat, or schedule", "Search task, message, linked chat, or schedule",
)} )}
className="h-9 w-full rounded-[13px] border-border/45 bg-background/85 pl-9 text-[13px] shadow-[0_8px_22px_rgba(15,23,42,0.04)] dark:border-white/10 dark:bg-background/40" className="h-9 w-full rounded-[13px] border-border/45 bg-settings-surface pl-9 text-[13px]"
/> />
</div> </div>
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<button <button
type="button" type="button"
className="inline-flex h-9 min-w-[8.5rem] items-center justify-center gap-1.5 whitespace-nowrap rounded-[13px] border border-border/45 bg-background/85 px-3 text-[12px] font-medium text-muted-foreground shadow-[0_8px_22px_rgba(15,23,42,0.04)] transition-colors hover:bg-muted/70 hover:text-foreground dark:border-white/10 dark:bg-background/40 sm:w-auto" className="inline-flex h-9 min-w-[8.5rem] items-center justify-center gap-1.5 whitespace-nowrap rounded-[13px] border border-border/45 bg-settings-surface px-3 text-[12px] font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground sm:w-auto"
> >
<ArrowUpDown className="h-3.5 w-3.5" aria-hidden /> <ArrowUpDown className="h-3.5 w-3.5" aria-hidden />
<span>{sortLabel[sort]}</span> <span>{sortLabel[sort]}</span>
@@ -4258,13 +4255,13 @@ function AutomationsSettings({
) : null} ) : null}
{loading && !payload ? ( {loading && !payload ? (
<div className="flex h-44 items-center justify-center rounded-[24px] border border-border/45 bg-card/80 text-[13px] text-muted-foreground shadow-[0_22px_70px_rgba(15,23,42,0.055)]"> <div className="flex h-44 items-center justify-center rounded-[22px] bg-settings-surface text-[13px] text-muted-foreground">
<Loader2 className="mr-2 h-4 w-4 animate-spin" aria-hidden /> <Loader2 className="mr-2 h-4 w-4 animate-spin" aria-hidden />
{tx("settings.automations.loading", "Loading automations...")} {tx("settings.automations.loading", "Loading automations...")}
</div> </div>
) : filtered.length && selectedJob ? ( ) : filtered.length && selectedJob ? (
<section className="grid min-h-0 overflow-hidden rounded-[22px] border border-border/45 bg-transparent shadow-none dark:border-white/10 xl:grid-cols-[minmax(16rem,18rem)_minmax(0,1fr)] xl:items-stretch"> <section className="grid min-h-0 overflow-hidden rounded-[22px] bg-settings-surface xl:grid-cols-[minmax(16rem,18rem)_minmax(0,1fr)] xl:items-stretch">
<aside className="flex min-h-0 flex-col overflow-hidden border-b border-border/35 bg-background/36 dark:border-white/10 dark:bg-background/18 xl:border-b-0 xl:border-r"> <aside className="flex min-h-0 flex-col overflow-hidden border-b border-border/35 bg-settings-surface xl:border-b-0 xl:border-r">
<div className="flex shrink-0 items-center justify-between gap-3 px-4 py-3"> <div className="flex shrink-0 items-center justify-between gap-3 px-4 py-3">
<h2 className="text-[13px] font-semibold tracking-[-0.01em] text-foreground/85"> <h2 className="text-[13px] font-semibold tracking-[-0.01em] text-foreground/85">
{tx("settings.automations.queue", "Queue")} {tx("settings.automations.queue", "Queue")}
@@ -4299,7 +4296,7 @@ function AutomationsSettings({
/> />
</section> </section>
) : ( ) : (
<div className="rounded-[24px] border border-border/45 bg-card/80 px-5 py-12 text-center text-[13px] text-muted-foreground shadow-[0_22px_70px_rgba(15,23,42,0.055)]"> <div className="rounded-[22px] bg-settings-surface px-5 py-12 text-center text-[13px] text-muted-foreground">
<div> <div>
{jobs.length {jobs.length
? tx("settings.automations.noMatches", "No automations match this view.") ? tx("settings.automations.noMatches", "No automations match this view.")
@@ -4347,8 +4344,8 @@ function AutomationListItem({
className={cn( className={cn(
"group grid w-full grid-cols-[minmax(0,1fr)_auto] gap-3 rounded-[18px] px-3 py-3.5 text-left transition-colors", "group grid w-full grid-cols-[minmax(0,1fr)_auto] gap-3 rounded-[18px] px-3 py-3.5 text-left transition-colors",
selected selected
? "bg-background text-foreground shadow-[0_10px_28px_rgba(15,23,42,0.055)] ring-1 ring-border/45 dark:bg-background/45 dark:ring-white/10" ? "bg-background/80 text-foreground"
: "text-muted-foreground hover:bg-white/48 hover:text-foreground dark:hover:bg-background/24", : "text-muted-foreground hover:bg-background/55 hover:text-foreground",
)} )}
> >
<span className="min-w-0"> <span className="min-w-0">
@@ -4373,7 +4370,7 @@ function AutomationListItem({
</span> </span>
</span> </span>
<span className="flex shrink-0 flex-col items-end gap-2 pt-0.5"> <span className="flex shrink-0 flex-col items-end gap-2 pt-0.5">
<span className="rounded-full bg-white/65 px-2 py-0.5 text-[11px] font-medium text-muted-foreground shadow-[inset_0_0_0_1px_rgba(120,72,25,0.055)] dark:bg-background/35"> <span className="rounded-full bg-background/70 px-2 py-0.5 text-[11px] font-medium text-muted-foreground">
{status.label} {status.label}
</span> </span>
{job.delete_after_run ? ( {job.delete_after_run ? (
@@ -4436,7 +4433,7 @@ function AutomationDetailPanel({
}, [job.id]); }, [job.id]);
return ( return (
<article className="flex min-h-0 min-w-0 flex-col overflow-hidden bg-background/42 dark:bg-background/18"> <article className="flex min-h-0 min-w-0 flex-col overflow-hidden bg-settings-surface">
<div className="shrink-0 border-b border-border/35 px-4 py-3.5 dark:border-white/10 sm:px-5"> <div className="shrink-0 border-b border-border/35 px-4 py-3.5 dark:border-white/10 sm:px-5">
<div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between"> <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
<div className="min-w-0"> <div className="min-w-0">
@@ -4465,7 +4462,7 @@ function AutomationDetailPanel({
<div className="grid min-h-0 min-w-0 flex-1 overflow-hidden lg:grid-cols-[minmax(0,1fr)_14.5rem]"> <div className="grid min-h-0 min-w-0 flex-1 overflow-hidden lg:grid-cols-[minmax(0,1fr)_14.5rem]">
<div className="min-h-0 min-w-0 space-y-3 overflow-y-auto overscroll-contain p-4 sm:p-5"> <div className="min-h-0 min-w-0 space-y-3 overflow-y-auto overscroll-contain p-4 sm:p-5">
<section className="rounded-[20px] border border-border/35 bg-background/62 px-4 py-3.5 shadow-[inset_0_1px_0_rgba(255,255,255,0.58)] dark:border-white/10 dark:bg-background/24"> <section className="rounded-[20px] bg-background/55 px-4 py-3.5">
<div className="flex items-center justify-between gap-3"> <div className="flex items-center justify-between gap-3">
<div className="text-[11px] font-medium leading-none text-muted-foreground/75"> <div className="text-[11px] font-medium leading-none text-muted-foreground/75">
{messageLabel} {messageLabel}
@@ -4544,7 +4541,7 @@ function AutomationDetailPanel({
) : null} ) : null}
</div> </div>
<aside className="min-h-0 overflow-y-auto overscroll-contain border-t border-border/35 bg-muted/20 p-4 text-[12px] text-muted-foreground dark:border-white/10 dark:bg-background/16 lg:border-l lg:border-t-0"> <aside className="min-h-0 overflow-y-auto overscroll-contain border-t border-border/35 bg-settings-surface p-4 text-[12px] text-muted-foreground lg:border-l lg:border-t-0">
<div className="grid gap-3"> <div className="grid gap-3">
<AutomationDetail <AutomationDetail
label={tx("settings.automations.labels.schedule", "Schedule")} label={tx("settings.automations.labels.schedule", "Schedule")}
@@ -4618,7 +4615,7 @@ function AutomationActionGroup({
} }
return ( return (
<div className="flex shrink-0 items-center gap-1 rounded-full border border-border/35 bg-background/70 p-1 shadow-[0_10px_26px_rgba(15,23,42,0.055)] dark:border-white/10 dark:bg-background/35"> <div className="flex shrink-0 items-center gap-1 rounded-full bg-background/65 p-1">
<AppsActionButton <AppsActionButton
ariaLabel={tx("settings.automations.edit", "Edit")} ariaLabel={tx("settings.automations.edit", "Edit")}
disabled={Boolean(actionKey)} disabled={Boolean(actionKey)}
@@ -4674,7 +4671,7 @@ function AutomationStatusBadge({
return ( return (
<span <span
className={cn( className={cn(
"inline-flex h-6 items-center rounded-full px-2.5 text-[11.5px] font-medium shadow-[inset_0_0_0_1px_rgba(120,72,25,0.055)]", "inline-flex h-6 items-center rounded-full px-2.5 text-[11.5px] font-medium",
tone === "success" && tone === "success" &&
"bg-orange-100/72 text-orange-800 dark:bg-orange-300/12 dark:text-orange-200", "bg-orange-100/72 text-orange-800 dark:bg-orange-300/12 dark:text-orange-200",
tone === "warning" && tone === "warning" &&
@@ -4704,7 +4701,7 @@ function AutomationDetail({
children: ReactNode; children: ReactNode;
}) { }) {
return ( return (
<div className="min-w-0 rounded-[17px] bg-background/52 px-3 py-3 shadow-[inset_0_0_0_1px_rgba(15,23,42,0.035)] dark:bg-background/22"> <div className="min-w-0 rounded-[17px] bg-background/55 px-3 py-3">
<div className="text-[11px] font-medium leading-none text-muted-foreground/75"> <div className="text-[11px] font-medium leading-none text-muted-foreground/75">
{label} {label}
</div> </div>
@@ -4868,7 +4865,7 @@ function AutomationEditDialog({
everyUnit: event.target.value as AutomationEveryUnit, everyUnit: event.target.value as AutomationEveryUnit,
})) }))
} }
className="h-10 w-full rounded-[12px] border border-input bg-background px-3 text-[13px] text-foreground shadow-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring" className="h-10 w-full rounded-[12px] border border-input bg-background px-3 text-[13px] text-foreground outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring"
> >
{AUTOMATION_EVERY_UNITS.map((unit) => ( {AUTOMATION_EVERY_UNITS.map((unit) => (
<option key={unit.value} value={unit.value}> <option key={unit.value} value={unit.value}>
@@ -5583,9 +5580,8 @@ function formatAutomationNextTitle(
function automationStatusDotClass(job: SessionAutomationJob): string { function automationStatusDotClass(job: SessionAutomationJob): string {
const status = automationStatusKey(job); const status = automationStatusKey(job);
if (status === "active" || status === "running") return "bg-orange-500 shadow-[0_0_0_3px_rgba(249,115,22,0.12)]"; if (status === "active" || status === "running") return "bg-orange-500";
if (status === "failed") return "bg-amber-500 shadow-[0_0_0_3px_rgba(245,158,11,0.13)]"; if (status === "failed") return "bg-amber-500";
if (status === "system") return "bg-muted-foreground/45";
return "bg-muted-foreground/45"; return "bg-muted-foreground/45";
} }
@@ -5834,7 +5830,7 @@ function ChannelsSettings({
value={query} value={query}
onChange={(event) => onQueryChange(event.target.value)} onChange={(event) => onQueryChange(event.target.value)}
placeholder={tx("settings.channels.searchPlaceholder", "Search channels")} placeholder={tx("settings.channels.searchPlaceholder", "Search channels")}
className="h-12 rounded-[14px] border-border/70 bg-card/90 pl-11 text-[15px] shadow-sm" className="h-12 rounded-[14px] border-border/45 bg-settings-surface pl-11 text-[15px]"
/> />
</div> </div>
<div className="flex shrink-0 flex-wrap gap-1.5 rounded-[14px] bg-muted/55 p-1"> <div className="flex shrink-0 flex-wrap gap-1.5 rounded-[14px] bg-muted/55 p-1">
@@ -5846,7 +5842,7 @@ function ChannelsSettings({
className={cn( className={cn(
"rounded-[11px] px-3 py-1.5 text-[12px] font-medium transition-colors", "rounded-[11px] px-3 py-1.5 text-[12px] font-medium transition-colors",
filter === option.value filter === option.value
? "bg-background text-foreground shadow-sm" ? "bg-background text-foreground"
: "text-muted-foreground hover:text-foreground", : "text-muted-foreground hover:text-foreground",
)} )}
> >
@@ -6073,7 +6069,7 @@ function AppsCatalogSettings({
value={query} value={query}
onChange={(event) => onQueryChange(event.target.value)} onChange={(event) => onQueryChange(event.target.value)}
placeholder={tx("settings.apps.searchPlaceholder", "Search Apps")} placeholder={tx("settings.apps.searchPlaceholder", "Search Apps")}
className="h-12 rounded-[14px] border-border/70 bg-card/90 pl-11 text-[15px] shadow-sm" className="h-12 rounded-[14px] border-border/45 bg-settings-surface pl-11 text-[15px]"
/> />
</div> </div>
<SegmentedControl <SegmentedControl
@@ -6104,7 +6100,7 @@ function AppsCatalogSettings({
/> />
) : null} ) : null}
<section> <section className="rounded-[22px] bg-settings-surface px-3 py-3 sm:px-4">
<div className="flex items-center justify-between border-b border-border/45 pb-3"> <div className="flex items-center justify-between border-b border-border/45 pb-3">
<SettingsSectionTitle>{tx("settings.apps.featured", "Tools")}</SettingsSectionTitle> <SettingsSectionTitle>{tx("settings.apps.featured", "Tools")}</SettingsSectionTitle>
<span className="rounded-full bg-muted px-2.5 py-1 text-[12px] font-medium text-muted-foreground"> <span className="rounded-full bg-muted px-2.5 py-1 text-[12px] font-medium text-muted-foreground">
@@ -6396,7 +6392,7 @@ function McpAppsCatalogRow({
</div> </div>
{setupOpen && preset.install_supported && hasFields ? ( {setupOpen && preset.install_supported && hasFields ? (
<div className="mx-3 mb-3 rounded-[14px] border border-border/45 bg-card/85 p-3 shadow-sm"> <div className="mx-3 mb-3 rounded-[14px] bg-background/55 p-3">
<div className="flex items-center justify-between gap-3"> <div className="flex items-center justify-between gap-3">
<div className="min-w-0"> <div className="min-w-0">
<div className="truncate text-[12.5px] font-semibold text-foreground"> <div className="truncate text-[12.5px] font-semibold text-foreground">
@@ -6467,7 +6463,7 @@ function McpAppsCatalogRow({
) : null} ) : null}
{toolsOpen && readyInstalled && toolNames.length ? ( {toolsOpen && readyInstalled && toolNames.length ? (
<div className="mx-3 mb-3 rounded-[14px] border border-border/45 bg-card/85 p-3 shadow-sm"> <div className="mx-3 mb-3 rounded-[14px] bg-background/55 p-3">
<div className="flex flex-wrap items-center justify-between gap-2"> <div className="flex flex-wrap items-center justify-between gap-2">
<div className="text-[11.5px] font-medium text-muted-foreground"> <div className="text-[11.5px] font-medium text-muted-foreground">
{tx("settings.mcp.toolScope", "Tools")} {tx("settings.mcp.toolScope", "Tools")}
@@ -6640,7 +6636,7 @@ function McpCustomServerPanel({
]; ];
return ( return (
<section className="overflow-hidden rounded-[16px] border border-border/45 bg-card/72 shadow-[0_10px_30px_rgba(15,23,42,0.045)]"> <section className="overflow-hidden rounded-[16px] bg-settings-surface">
<div className="flex flex-col gap-3 px-3 py-3 sm:flex-row sm:items-center sm:justify-between"> <div className="flex flex-col gap-3 px-3 py-3 sm:flex-row sm:items-center sm:justify-between">
<div className="flex min-w-0 items-center gap-3"> <div className="flex min-w-0 items-center gap-3">
<span className="grid h-9 w-9 shrink-0 place-items-center rounded-[11px] bg-muted text-muted-foreground"> <span className="grid h-9 w-9 shrink-0 place-items-center rounded-[11px] bg-muted text-muted-foreground">
@@ -6874,7 +6870,6 @@ function McpPresetLogo({ preset, showBrandLogos }: { preset: McpPresetInfo; show
return ( return (
<span <span
className="grid h-11 w-11 shrink-0 place-items-center rounded-[8px] border border-border/45 bg-background" className="grid h-11 w-11 shrink-0 place-items-center rounded-[8px] border border-border/45 bg-background"
style={{ boxShadow: `inset 0 0 0 1px ${preset.brand_color ?? "transparent"}22` }}
> >
<img <img
src={logoUrl} src={logoUrl}
@@ -6922,12 +6917,7 @@ function CliAppReadyPanel({
}; };
return ( return (
<section <section className="rounded-[12px] bg-settings-surface px-4 py-3">
className={cn(
"rounded-[12px] border border-border/55 bg-card/88 px-4 py-3",
"shadow-[0_8px_26px_rgba(15,23,42,0.055)]",
)}
>
<div className="flex flex-col gap-3 sm:flex-row sm:items-center"> <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
<CliAppLogo app={app} showBrandLogos={showBrandLogos} /> <CliAppLogo app={app} showBrandLogos={showBrandLogos} />
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
@@ -6994,10 +6984,7 @@ function CliAppLogo({ app, showBrandLogos }: { app: CliAppInfo; showBrandLogos:
return ( return (
<span <span
className="relative grid h-11 w-11 shrink-0 place-items-center overflow-hidden rounded-[8px] border border-border/45 bg-muted text-[13px] font-semibold" className="relative grid h-11 w-11 shrink-0 place-items-center overflow-hidden rounded-[8px] border border-border/45 bg-muted text-[13px] font-semibold"
style={{ style={{ color: app.brand_color || "hsl(var(--muted-foreground))" }}
color: app.brand_color || "hsl(var(--muted-foreground))",
boxShadow: `inset 0 0 0 1px ${app.brand_color ?? "transparent"}18`,
}}
> >
<span <span
aria-hidden aria-hidden
@@ -8057,8 +8044,7 @@ function ProviderPickerIcon({
return ( return (
<span <span
data-testid={`provider-picker-logo-${provider}`} data-testid={`provider-picker-logo-${provider}`}
className="grid h-5 w-5 shrink-0 place-items-center overflow-hidden rounded-md border border-border/35 bg-background shadow-[inset_0_0_0_1px_rgba(0,0,0,0.02)]" className="grid h-5 w-5 shrink-0 place-items-center overflow-hidden rounded-md border border-border/35 bg-background"
style={{ boxShadow: `inset 0 0 0 1px ${(brand?.color ?? "#6B7280")}22` }}
aria-hidden aria-hidden
> >
<img <img
@@ -8078,7 +8064,7 @@ function ProviderPickerIcon({
return ( return (
<span <span
data-testid={`provider-picker-logo-fallback-${provider}`} data-testid={`provider-picker-logo-fallback-${provider}`}
className="grid h-5 w-5 shrink-0 place-items-center rounded-md text-[7.5px] font-semibold text-white shadow-[inset_0_0_0_1px_rgba(255,255,255,0.18)]" className="grid h-5 w-5 shrink-0 place-items-center rounded-md text-[7.5px] font-semibold text-white"
style={{ backgroundColor: brand.color }} style={{ backgroundColor: brand.color }}
aria-hidden aria-hidden
> >
@@ -8111,7 +8097,7 @@ function ProviderSection({
return ( return (
<section className="space-y-3"> <section className="space-y-3">
<ByokSectionHeader title={title} count={count} /> <ByokSectionHeader title={title} count={count} />
<div className="overflow-hidden rounded-[22px] border border-border/45 bg-card/86 shadow-[0_18px_65px_rgba(15,23,42,0.07)] backdrop-blur-xl dark:border-white/10 dark:shadow-[0_18px_65px_rgba(0,0,0,0.22)]"> <div className="overflow-hidden rounded-[22px] bg-settings-surface">
{count > 0 ? ( {count > 0 ? (
<div className="divide-y divide-border/45">{children}</div> <div className="divide-y divide-border/45">{children}</div>
) : ( ) : (
@@ -8333,8 +8319,7 @@ function ProviderIcon({
return ( return (
<span <span
data-testid={`provider-logo-${provider}`} data-testid={`provider-logo-${provider}`}
className="grid h-10 w-10 shrink-0 place-items-center overflow-hidden rounded-[14px] border border-border/45 bg-background shadow-[inset_0_0_0_1px_rgba(0,0,0,0.025)]" className="grid h-10 w-10 shrink-0 place-items-center overflow-hidden rounded-[14px] border border-border/45 bg-background"
style={{ boxShadow: `inset 0 0 0 1px ${(brand?.color ?? "#6B7280")}22` }}
> >
<img <img
src={logoUrl} src={logoUrl}
@@ -8352,7 +8337,7 @@ function ProviderIcon({
return ( return (
<span <span
data-testid={`provider-logo-fallback-${provider}`} data-testid={`provider-logo-fallback-${provider}`}
className="grid h-10 w-10 shrink-0 place-items-center rounded-[14px] text-[11px] font-semibold text-white shadow-[inset_0_0_0_1px_rgba(255,255,255,0.18)]" className="grid h-10 w-10 shrink-0 place-items-center rounded-[14px] text-[11px] font-semibold text-white"
style={{ backgroundColor: brand.color }} style={{ backgroundColor: brand.color }}
aria-hidden aria-hidden
> >
@@ -8361,7 +8346,7 @@ function ProviderIcon({
); );
} }
return ( return (
<span className="grid h-10 w-10 shrink-0 place-items-center rounded-2xl bg-muted text-foreground/82 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.025)] dark:bg-muted/70"> <span className="grid h-10 w-10 shrink-0 place-items-center rounded-2xl bg-muted text-foreground/82 dark:bg-muted/70">
<Icon className="h-5 w-5" strokeWidth={2} aria-hidden /> <Icon className="h-5 w-5" strokeWidth={2} aria-hidden />
</span> </span>
); );
@@ -8395,8 +8380,7 @@ function OverviewValueLogo({
return ( return (
<span <span
data-testid={`overview-logo-${provider}`} data-testid={`overview-logo-${provider}`}
className="grid h-5 w-5 shrink-0 place-items-center overflow-hidden rounded-md border border-border/35 bg-background shadow-[inset_0_0_0_1px_rgba(0,0,0,0.02)]" className="grid h-5 w-5 shrink-0 place-items-center overflow-hidden rounded-md border border-border/35 bg-background"
style={{ boxShadow: `inset 0 0 0 1px ${brand.color}22` }}
aria-hidden aria-hidden
> >
<img <img
@@ -8415,7 +8399,7 @@ function OverviewValueLogo({
return ( return (
<span <span
data-testid={`overview-logo-fallback-${provider}`} data-testid={`overview-logo-fallback-${provider}`}
className="grid h-5 w-5 shrink-0 place-items-center rounded-md text-[7.5px] font-semibold text-white shadow-[inset_0_0_0_1px_rgba(255,255,255,0.18)]" className="grid h-5 w-5 shrink-0 place-items-center rounded-md text-[7.5px] font-semibold text-white"
style={{ backgroundColor: brand.color }} style={{ backgroundColor: brand.color }}
aria-hidden aria-hidden
> >
@@ -8476,7 +8460,7 @@ function SettingsSectionTitle({ children }: { children: ReactNode }) {
function SettingsGroup({ children }: { children: ReactNode }) { function SettingsGroup({ children }: { children: ReactNode }) {
return ( return (
<div className="overflow-hidden rounded-[22px] border border-border/45 bg-card/86 shadow-[0_18px_65px_rgba(15,23,42,0.075)] backdrop-blur-xl dark:border-white/10 dark:shadow-[0_18px_65px_rgba(0,0,0,0.24)]"> <div className="overflow-hidden rounded-[22px] bg-settings-surface">
<div className="divide-y divide-border/45">{children}</div> <div className="divide-y divide-border/45">{children}</div>
</div> </div>
); );
@@ -8844,7 +8828,7 @@ function SettingsStatusMessage({
className={cn( className={cn(
"h-1.5 w-1.5 shrink-0 rounded-full", "h-1.5 w-1.5 shrink-0 rounded-full",
tone === "accent" && tone === "accent" &&
"bg-blue-500 shadow-[0_0_0_3px_rgba(59,130,246,0.14)] dark:bg-blue-400 dark:shadow-[0_0_0_3px_rgba(96,165,250,0.18)]", "bg-blue-500 dark:bg-blue-400",
tone === "danger" && "bg-destructive/70", tone === "danger" && "bg-destructive/70",
)} )}
aria-hidden aria-hidden
@@ -8895,7 +8879,8 @@ function SegmentedControl({
onClick={() => onChange(option.value)} onClick={() => onChange(option.value)}
className={cn( className={cn(
"rounded-full px-3 py-1 transition-colors", "rounded-full px-3 py-1 transition-colors",
value === option.value && "bg-background text-foreground shadow-sm", value === option.value &&
"bg-background text-foreground ring-1 ring-inset ring-border/45",
)} )}
> >
{option.label} {option.label}
webui/src/components/settings/SkillsCatalogSettings.tsx
+1 -1
View File
@@ -31,7 +31,7 @@ export function SkillsCatalogSettings({ skills }: { skills: SkillSummary[] }) {
</span> </span>
</section> </section>
<section> <section className="rounded-[22px] bg-settings-surface px-3 py-3 sm:px-4">
<div className="flex items-center justify-between border-b border-border/45 pb-3"> <div className="flex items-center justify-between border-b border-border/45 pb-3">
<h2 className="mb-2 px-1 text-[13px] font-semibold tracking-[-0.01em] text-foreground/85"> <h2 className="mb-2 px-1 text-[13px] font-semibold tracking-[-0.01em] text-foreground/85">
{t("settings.skills.featured", { defaultValue: "Agent skills" })} {t("settings.skills.featured", { defaultValue: "Agent skills" })}
webui/src/components/settings/ToggleButton.tsx
+4 -4
View File
@@ -27,17 +27,17 @@ export function ToggleButton({
"relative inline-flex h-[22px] w-[38px] shrink-0 items-center rounded-full p-[2px]", "relative inline-flex h-[22px] w-[38px] shrink-0 items-center rounded-full p-[2px]",
"transition-colors duration-200 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", "transition-colors duration-200 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
checked checked
? "bg-[#2997FF] shadow-[inset_0_0_0_1px_rgba(0,0,0,0.035)]" ? "bg-[#2997FF]"
: "bg-muted shadow-[inset_0_0_0_1px_rgba(0,0,0,0.035)] hover:bg-muted/80", : "bg-muted-foreground/20 hover:bg-muted-foreground/25",
disabled && "cursor-default opacity-60", disabled && "cursor-default opacity-60",
disabled && checked && "hover:bg-[#2997FF]", disabled && checked && "hover:bg-[#2997FF]",
disabled && !checked && "hover:bg-muted", disabled && !checked && "hover:bg-muted-foreground/20",
)} )}
> >
<span <span
aria-hidden aria-hidden
className={cn( className={cn(
"h-[18px] w-[18px] rounded-full bg-background shadow-[0_1px_2px_rgba(0,0,0,0.18),0_2px_7px_rgba(0,0,0,0.11)]", "h-[18px] w-[18px] rounded-full bg-background",
"transition-transform duration-200 ease-out", "transition-transform duration-200 ease-out",
checked ? "translate-x-[16px]" : "translate-x-0", checked ? "translate-x-[16px]" : "translate-x-0",
)} )}
webui/src/components/settings/channels/ChannelIdentity.tsx
+2 -3
View File
@@ -137,7 +137,6 @@ export function ChannelLogo({
return ( return (
<span <span
className="grid h-10 w-10 shrink-0 place-items-center rounded-[12px] border border-border/45 bg-background" className="grid h-10 w-10 shrink-0 place-items-center rounded-[12px] border border-border/45 bg-background"
style={{ boxShadow: `inset 0 0 0 1px ${color}22` }}
> >
<img <img
src={logoUrl} src={logoUrl}
@@ -156,7 +155,7 @@ export function ChannelLogo({
return ( return (
<span <span
className="flex h-10 w-10 shrink-0 items-center justify-center rounded-[12px] border border-border/45 bg-background" className="flex h-10 w-10 shrink-0 items-center justify-center rounded-[12px] border border-border/45 bg-background"
style={{ color, boxShadow: `inset 0 0 0 1px ${color}18` }} style={{ color }}
aria-hidden aria-hidden
> >
<Icon className="h-5 w-5" strokeWidth={2.25} /> <Icon className="h-5 w-5" strokeWidth={2.25} />
@@ -167,7 +166,7 @@ export function ChannelLogo({
return ( return (
<span <span
className="flex h-10 w-10 shrink-0 items-center justify-center rounded-[12px] border border-border/45 bg-background text-[11px] font-bold" className="flex h-10 w-10 shrink-0 items-center justify-center rounded-[12px] border border-border/45 bg-background text-[11px] font-bold"
style={{ color, boxShadow: `inset 0 0 0 1px ${color}18` }} style={{ color }}
aria-hidden aria-hidden
> >
{initials} {initials}
webui/src/components/settings/channels/ChannelInstancesPanel.tsx
+5 -5
View File
@@ -144,7 +144,7 @@ export function ChannelInstancesPanel({
}; };
return ( return (
<aside className="min-h-full rounded-[20px] border border-border/80 bg-background p-5 shadow-none"> <aside className="min-h-full rounded-[20px] bg-settings-surface p-5">
<div className="flex items-start justify-between gap-3"> <div className="flex items-start justify-between gap-3">
<div className="flex min-w-0 items-start gap-3"> <div className="flex min-w-0 items-start gap-3">
<ChannelLogo feature={feature} showBrandLogos={showBrandLogos} /> <ChannelLogo feature={feature} showBrandLogos={showBrandLogos} />
@@ -177,10 +177,10 @@ export function ChannelInstancesPanel({
<article <article
key={instance.id} key={instance.id}
className={cn( className={cn(
"overflow-hidden rounded-[18px] border transition-colors", "overflow-hidden rounded-[18px] border border-transparent transition-colors",
expanded expanded
? "border-border/75 bg-card/95 shadow-sm" ? "bg-background"
: "border-border/55 bg-background hover:border-border/75 hover:bg-muted/15", : "bg-background/70 hover:bg-muted",
)} )}
> >
<div className="flex items-center gap-3 px-3 py-3"> <div className="flex items-center gap-3 px-3 py-3">
@@ -398,7 +398,7 @@ function ChannelInstanceAvatar({
return ( return (
<span <span
className="grid h-11 w-11 shrink-0 place-items-center overflow-hidden rounded-full border border-border/45 bg-background text-[10px] font-bold" className="grid h-11 w-11 shrink-0 place-items-center overflow-hidden rounded-full border border-border/45 bg-background text-[10px] font-bold"
style={{ color, boxShadow: `inset 0 0 0 1px ${color}18` }} style={{ color }}
aria-hidden aria-hidden
> >
{remoteAvatarUrl ? ( {remoteAvatarUrl ? (
webui/src/components/settings/channels/ChannelSetupPanel.tsx
+4 -6
View File
@@ -80,10 +80,8 @@ export function ChannelCatalogRow({
aria-pressed={selected} aria-pressed={selected}
onClick={onSelect} onClick={onSelect}
className={cn( className={cn(
"group flex w-full min-w-0 items-center gap-3 rounded-[14px] border px-3 py-3 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border/80", "group flex w-full min-w-0 items-center gap-3 rounded-[14px] border border-transparent px-3 py-3 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border/80",
selected selected ? "bg-background" : "hover:bg-muted",
? "border-border/55 bg-muted/35"
: "border-transparent hover:border-border/45 hover:bg-muted/25",
)} )}
> >
<ChannelLogo feature={feature} showBrandLogos={showBrandLogos} /> <ChannelLogo feature={feature} showBrandLogos={showBrandLogos} />
@@ -181,7 +179,7 @@ export function ChannelSetupPanel({
}); });
return ( return (
<aside className="min-h-full rounded-[20px] border border-border/80 bg-background p-5 shadow-none"> <aside className="min-h-full rounded-[20px] bg-settings-surface p-5">
<div className="flex items-start justify-between gap-4"> <div className="flex items-start justify-between gap-4">
<div className="flex min-w-0 items-start gap-3"> <div className="flex min-w-0 items-start gap-3">
<ChannelLogo feature={feature} showBrandLogos={showBrandLogos} /> <ChannelLogo feature={feature} showBrandLogos={showBrandLogos} />
@@ -398,7 +396,7 @@ function ChannelSetupSurface({
return ( return (
<form <form
className="mt-5 overflow-hidden rounded-[16px] border border-border/70 bg-background shadow-none" className="mt-5 overflow-hidden rounded-[16px] bg-background/55"
onSubmit={(event) => { onSubmit={(event) => {
event.preventDefault(); event.preventDefault();
if (mode === "credentials") void saveCredentialSettings(); if (mode === "credentials") void saveCredentialSettings();
webui/src/components/settings/channels/ChannelSetupParts.tsx
+7 -7
View File
@@ -57,7 +57,7 @@ export function ChannelGuideLink({
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
className={cn( className={cn(
"inline-flex max-w-full items-center gap-2 border border-border/65 bg-background/90 font-semibold text-foreground shadow-sm transition-colors hover:border-border hover:bg-muted/45", "inline-flex max-w-full items-center gap-2 border border-border/45 bg-background/90 font-semibold text-foreground transition-colors hover:bg-muted",
compact compact
? "shrink-0 rounded-full py-1 pl-1 pr-2.5 text-[11.5px]" ? "shrink-0 rounded-full py-1 pl-1 pr-2.5 text-[11.5px]"
: "mt-3 rounded-[12px] py-1.5 pl-1.5 pr-3 text-[12px]", : "mt-3 rounded-[12px] py-1.5 pl-1.5 pr-3 text-[12px]",
@@ -68,7 +68,7 @@ export function ChannelGuideLink({
"grid shrink-0 place-items-center overflow-hidden border border-border/45 bg-background font-bold", "grid shrink-0 place-items-center overflow-hidden border border-border/45 bg-background font-bold",
compact ? "h-5 w-5 rounded-full text-[9px]" : "h-6 w-6 rounded-[7px] text-[10px]", compact ? "h-5 w-5 rounded-full text-[9px]" : "h-6 w-6 rounded-[7px] text-[10px]",
)} )}
style={{ color, boxShadow: `inset 0 0 0 1px ${color}16` }} style={{ color }}
aria-hidden aria-hidden
> >
{logoUrl ? ( {logoUrl ? (
@@ -135,11 +135,11 @@ export function ChannelOfficialLink({
href={setup.officialUrl} href={setup.officialUrl}
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
className="inline-flex max-w-full shrink-0 items-center gap-2 rounded-full border border-border/65 bg-background/90 py-1 pl-1 pr-2.5 text-[11.5px] font-semibold text-foreground shadow-sm transition-colors hover:border-border hover:bg-muted/45" className="inline-flex max-w-full shrink-0 items-center gap-2 rounded-full border border-border/45 bg-background/90 py-1 pl-1 pr-2.5 text-[11.5px] font-semibold text-foreground transition-colors hover:bg-muted"
> >
<span <span
className="grid h-5 w-5 shrink-0 place-items-center overflow-hidden rounded-full border border-border/45 bg-background" className="grid h-5 w-5 shrink-0 place-items-center overflow-hidden rounded-full border border-border/45 bg-background"
style={{ color, boxShadow: `inset 0 0 0 1px ${color}16` }} style={{ color }}
aria-hidden aria-hidden
> >
{logoUrl ? ( {logoUrl ? (
@@ -231,7 +231,7 @@ export function ChannelProviderPresets({
<div <div
role="radiogroup" role="radiogroup"
aria-label={t("settings.channels.providerPreset", { defaultValue: "Provider" })} aria-label={t("settings.channels.providerPreset", { defaultValue: "Provider" })}
className="grid rounded-[10px] bg-muted/75 p-0.5 text-[12px] font-medium text-muted-foreground shadow-[inset_0_0_0_1px_rgba(15,23,42,0.035)]" className="grid rounded-[10px] bg-muted p-0.5 text-[12px] font-medium text-muted-foreground"
style={{ gridTemplateColumns: `repeat(${presets.length}, minmax(0, 1fr))` }} style={{ gridTemplateColumns: `repeat(${presets.length}, minmax(0, 1fr))` }}
> >
{presets.map((preset) => ( {presets.map((preset) => (
@@ -247,7 +247,7 @@ export function ChannelProviderPresets({
className={cn( className={cn(
"min-h-8 rounded-[8px] px-2 py-1.5 transition-colors hover:text-foreground", "min-h-8 rounded-[8px] px-2 py-1.5 transition-colors hover:text-foreground",
selected === preset.id selected === preset.id
&& "bg-background text-foreground shadow-[0_1px_2px_rgba(15,23,42,0.10),inset_0_0_0_1px_rgba(15,23,42,0.055)]", && "bg-background text-foreground ring-1 ring-inset ring-border/45",
)} )}
> >
{preset.label} {preset.label}
@@ -360,7 +360,7 @@ export function ChannelSetupSteps({
<ol className="space-y-1.5"> <ol className="space-y-1.5">
{steps.map((step, index) => ( {steps.map((step, index) => (
<li key={step} className="flex gap-2"> <li key={step} className="flex gap-2">
<span className="mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-background text-[10px] font-semibold text-muted-foreground shadow-sm"> <span className="mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-muted text-[10px] font-semibold text-muted-foreground">
{index + 1} {index + 1}
</span> </span>
<span>{step}</span> <span>{step}</span>
webui/src/components/settings/channels/CredentialForm.tsx
+2 -2
View File
@@ -159,7 +159,7 @@ export function CredentialForm({
<span <span
role="radiogroup" role="radiogroup"
aria-label={field.label} aria-label={field.label}
className="mt-1 grid rounded-[10px] bg-muted/75 p-0.5 text-[12px] font-medium text-muted-foreground shadow-[inset_0_0_0_1px_rgba(15,23,42,0.035)]" className="mt-1 grid rounded-[10px] bg-muted p-0.5 text-[12px] font-medium text-muted-foreground"
style={{ gridTemplateColumns: `repeat(${field.options.length}, minmax(0, 1fr))` }} style={{ gridTemplateColumns: `repeat(${field.options.length}, minmax(0, 1fr))` }}
> >
{field.options.map((option) => ( {field.options.map((option) => (
@@ -172,7 +172,7 @@ export function CredentialForm({
className={cn( className={cn(
"min-h-8 rounded-[8px] px-2 py-1.5 transition-colors hover:text-foreground", "min-h-8 rounded-[8px] px-2 py-1.5 transition-colors hover:text-foreground",
selectedOption === option.value selectedOption === option.value
&& "bg-background text-foreground shadow-[0_1px_2px_rgba(15,23,42,0.10),inset_0_0_0_1px_rgba(15,23,42,0.055)]", && "bg-background text-foreground ring-1 ring-inset ring-border/45",
)} )}
> >
{option.label} {option.label}
webui/src/components/thread/PromptRail.tsx
+1 -1
View File
@@ -188,7 +188,7 @@ export function PromptRail({
className={cn( className={cn(
"pointer-events-none absolute left-10 top-1/2 z-30 w-[34rem] max-w-[calc(100vw-4rem)] -translate-y-1/2 rounded-[20px] px-4 py-3 text-left", "pointer-events-none absolute left-10 top-1/2 z-30 w-[34rem] max-w-[calc(100vw-4rem)] -translate-y-1/2 rounded-[20px] px-4 py-3 text-left",
"bg-popover/95 text-popover-foreground shadow-[0_18px_45px_rgba(0,0,0,0.12)] backdrop-blur-xl", "bg-popover/95 text-popover-foreground shadow-[0_18px_45px_rgba(0,0,0,0.12)] backdrop-blur-xl",
"dark:bg-[#2f2f2f]/95 dark:text-white dark:shadow-[0_18px_45px_rgba(0,0,0,0.45)]", "dark:shadow-[0_18px_45px_rgba(0,0,0,0.45)]",
"-translate-x-2 scale-[0.98] opacity-0 transition-[opacity,transform] duration-150", "-translate-x-2 scale-[0.98] opacity-0 transition-[opacity,transform] duration-150",
"group-hover/marker:translate-x-0 group-hover/marker:scale-100 group-hover/marker:opacity-100", "group-hover/marker:translate-x-0 group-hover/marker:scale-100 group-hover/marker:opacity-100",
"group-focus-visible/marker:translate-x-0 group-focus-visible/marker:scale-100 group-focus-visible/marker:opacity-100", "group-focus-visible/marker:translate-x-0 group-focus-visible/marker:scale-100 group-focus-visible/marker:opacity-100",
webui/src/components/thread/ThreadComposer.tsx
+1 -1
View File
@@ -2115,7 +2115,7 @@ export function ThreadComposer({
<TooltipContent <TooltipContent
side="top" side="top"
align="center" align="center"
className="flex items-center gap-2 rounded-full border border-border/70 bg-background px-3 py-1.5 text-[13px] font-medium text-foreground shadow-[0_8px_24px_rgba(15,23,42,0.13)] dark:border-white/10 dark:bg-neutral-900 dark:text-white" className="flex items-center gap-2 rounded-full border border-border/70 bg-popover px-3 py-1.5 text-[13px] font-medium text-popover-foreground shadow-[0_8px_24px_rgba(15,23,42,0.13)] dark:border-white/10"
> >
<span>{voiceButtonTooltip}</span> <span>{voiceButtonTooltip}</span>
{voiceRecorder.state === "idle" ? ( {voiceRecorder.state === "idle" ? (
webui/src/globals.css
+15 -11
View File
@@ -39,37 +39,41 @@
--sidebar-accent: 0 0% 95.8%; --sidebar-accent: 0 0% 95.8%;
--sidebar-accent-foreground: 0 0% 9%; --sidebar-accent-foreground: 0 0% 9%;
--sidebar-border: 40 8% 90.5%; --sidebar-border: 40 8% 90.5%;
--settings-canvas: var(--background);
--settings-surface: 60 6% 96.7%;
--scrollbar-thumb: hsl(var(--muted-foreground) / 0.26); --scrollbar-thumb: hsl(var(--muted-foreground) / 0.26);
--scrollbar-thumb-hover: hsl(var(--muted-foreground) / 0.42); --scrollbar-thumb-hover: hsl(var(--muted-foreground) / 0.42);
} }
.dark { .dark {
color-scheme: dark; color-scheme: dark;
--background: 0 0% 12%; --background: 0 0% 19%;
--foreground: 240 4% 96%; --foreground: 240 4% 96%;
--card: 0 0% 14%; --card: 0 0% 22%;
--card-foreground: 240 4% 96%; --card-foreground: 240 4% 96%;
--popover: 0 0% 14%; --popover: var(--card);
--popover-foreground: 240 4% 96%; --popover-foreground: 240 4% 96%;
--primary: 240 5% 98%; --primary: 240 5% 98%;
--primary-foreground: 0 0% 9%; --primary-foreground: 0 0% 9%;
--secondary: 0 0% 14%; --secondary: var(--card);
--secondary-foreground: 0 0% 98%; --secondary-foreground: 0 0% 98%;
--muted: 0 0% 16%; --muted: var(--card);
--muted-foreground: 0 0% 65%; --muted-foreground: 0 0% 65%;
--accent: 0 0% 18%; --accent: 0 0% 25%;
--accent-foreground: 0 0% 98%; --accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%; --destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%; --destructive-foreground: 0 0% 98%;
--border: 0 0% 22%; --border: 0 0% 28%;
--input: 0 0% 22%; --input: var(--border);
--ring: 0 0% 83.1%; --ring: 0 0% 83.1%;
--inline-token-highlight: 217 92% 72%; --inline-token-highlight: 217 92% 72%;
--sidebar: 0 0% 10.5%; --sidebar: var(--card);
--sidebar-foreground: 0 0% 98%; --sidebar-foreground: 0 0% 98%;
--sidebar-accent: 0 0% 15%; --sidebar-accent: var(--background);
--sidebar-accent-foreground: 0 0% 98%; --sidebar-accent-foreground: 0 0% 98%;
--sidebar-border: 0 0% 20%; --sidebar-border: var(--border);
--settings-canvas: var(--background);
--settings-surface: var(--card);
--scrollbar-thumb: hsl(var(--muted-foreground) / 0.28); --scrollbar-thumb: hsl(var(--muted-foreground) / 0.28);
--scrollbar-thumb-hover: hsl(var(--muted-foreground) / 0.44); --scrollbar-thumb-hover: hsl(var(--muted-foreground) / 0.44);
} }
webui/tailwind.config.js
+4
View File
@@ -93,6 +93,10 @@ export default {
"accent-foreground": "hsl(var(--sidebar-accent-foreground))", "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
border: "hsl(var(--sidebar-border))", border: "hsl(var(--sidebar-border))",
}, },
settings: {
canvas: "hsl(var(--settings-canvas))",
surface: "hsl(var(--settings-surface))",
},
}, },
keyframes: { keyframes: {
"accordion-down": { "accordion-down": {