nastechai-desktop 18.1.0

package/src/app/messaging/platform-icon.tsx

@@ -0,0 +1,93 @@
+import {
+  SiApple,
+  SiBilibili,
+  SiDiscord,
+  SiGmail,
+  SiHomeassistant,
+  SiMatrix,
+  SiMattermost,
+  SiQq,
+  SiSignal,
+  SiTelegram,
+  SiWechat,
+  SiWhatsapp
+} from '@icons-pack/react-simple-icons'
+import type { ComponentType, SVGProps } from 'react'
+
+import { Globe, Link as LinkIcon, MessageSquareText } from '@/lib/icons'
+import { cn } from '@/lib/utils'
+
+// We render simpleicons.org brand glyphs for platforms whose owners publish a
+// usable mark (telegram, discord, matrix, ...). A few brands — Slack, Dingtalk,
+// Feishu, WeCom — have been removed from Simple Icons at the brand owner's
+// request, so we fall back to a colored letter monogram for those.
+//
+// `iconColor` is the brand's hex from simpleicons.org so we can paint each
+// glyph in its native color on top of a soft tint. The fallback monogram uses
+// the same hex to keep visual consistency.
+type IconKind = 'brand' | 'generic'
+
+interface PlatformIconSpec {
+  Icon: ComponentType<SVGProps<SVGSVGElement>>
+  color: string
+  kind: IconKind
+}
+
+const PLATFORM_ICONS: Record<string, PlatformIconSpec> = {
+  telegram: { Icon: SiTelegram, color: '#26A5E4', kind: 'brand' },
+  discord: { Icon: SiDiscord, color: '#5865F2', kind: 'brand' },
+  // Slack removed from Simple Icons by Salesforce request — letter monogram.
+  mattermost: { Icon: SiMattermost, color: '#0058CC', kind: 'brand' },
+  matrix: { Icon: SiMatrix, color: '#000000', kind: 'brand' },
+  signal: { Icon: SiSignal, color: '#3A76F0', kind: 'brand' },
+  whatsapp: { Icon: SiWhatsapp, color: '#25D366', kind: 'brand' },
+  bluebubbles: { Icon: SiApple, color: '#0BD318', kind: 'brand' },
+  homeassistant: { Icon: SiHomeassistant, color: '#18BCF2', kind: 'brand' },
+  email: { Icon: SiGmail, color: '#EA4335', kind: 'brand' },
+  sms: { Icon: MessageSquareText, color: '#F43F5E', kind: 'generic' },
+  webhook: { Icon: LinkIcon, color: '#71717A', kind: 'generic' },
+  api_server: { Icon: Globe, color: '#64748B', kind: 'generic' },
+  weixin: { Icon: SiWechat, color: '#07C160', kind: 'brand' },
+  qqbot: { Icon: SiQq, color: '#EB1923', kind: 'brand' },
+  yuanbao: { Icon: SiBilibili, color: '#FB7299', kind: 'brand' }
+}
+
+interface PlatformAvatarProps {
+  platformId: string
+  platformName: string
+  className?: string
+}
+
+export function PlatformAvatar({ className, platformId, platformName }: PlatformAvatarProps) {
+  const spec = PLATFORM_ICONS[platformId]
+
+  const baseClass = cn(
+    'inline-grid size-6 shrink-0 place-items-center rounded-md text-[length:var(--conversation-caption-font-size)] font-medium',
+    className
+  )
+
+  if (!spec) {
+    return (
+      <span aria-hidden="true" className={cn(baseClass, 'bg-(--ui-bg-tertiary) text-(--ui-text-tertiary)')}>
+        {platformName.charAt(0).toUpperCase()}
+      </span>
+    )
+  }
+
+  const { Icon, color } = spec
+
+  return (
+    <span
+      aria-hidden="true"
+      className={baseClass}
+      style={{
+        // 16% tint of the brand color so the glyph reads against any surface
+        // without the avatar dominating the row.
+        backgroundColor: `color-mix(in srgb, ${color} 16%, transparent)`,
+        color
+      }}
+    >
+      <Icon className="size-3.5" />
+    </span>
+  )
+}

package/src/app/model-picker-overlay.tsx

@@ -0,0 +1,42 @@
+import { useStore } from '@nanostores/react'
+import type * as React from 'react'
+
+import { ModelPickerDialog } from '@/components/model-picker'
+import type { NasTechGateway } from '@/nastech'
+import {
+  $activeSessionId,
+  $currentModel,
+  $currentProvider,
+  $gatewayState,
+  $modelPickerOpen,
+  setModelPickerOpen
+} from '@/store/session'
+
+interface ModelPickerOverlayProps {
+  gateway?: NasTechGateway
+  onSelect: React.ComponentProps<typeof ModelPickerDialog>['onSelect']
+}
+
+export function ModelPickerOverlay({ gateway, onSelect }: ModelPickerOverlayProps) {
+  const activeSessionId = useStore($activeSessionId)
+  const currentModel = useStore($currentModel)
+  const currentProvider = useStore($currentProvider)
+  const gatewayOpen = useStore($gatewayState) === 'open'
+  const open = useStore($modelPickerOpen)
+
+  if (!gatewayOpen) {
+    return null
+  }
+
+  return (
+    <ModelPickerDialog
+      currentModel={currentModel}
+      currentProvider={currentProvider}
+      gw={gateway}
+      onOpenChange={setModelPickerOpen}
+      onSelect={onSelect}
+      open={open}
+      sessionId={activeSessionId}
+    />
+  )
+}

package/src/app/model-visibility-overlay.tsx

@@ -0,0 +1,31 @@
+import { useStore } from '@nanostores/react'
+
+import { ModelVisibilityDialog } from '@/components/model-visibility-dialog'
+import type { NasTechGateway } from '@/nastech'
+import { $modelVisibilityOpen, setModelVisibilityOpen } from '@/store/model-visibility'
+import { $activeSessionId, $gatewayState } from '@/store/session'
+
+interface ModelVisibilityOverlayProps {
+  gateway?: NasTechGateway
+  onOpenProviders: () => void
+}
+
+export function ModelVisibilityOverlay({ gateway, onOpenProviders }: ModelVisibilityOverlayProps) {
+  const activeSessionId = useStore($activeSessionId)
+  const gatewayOpen = useStore($gatewayState) === 'open'
+  const open = useStore($modelVisibilityOpen)
+
+  if (!gatewayOpen) {
+    return null
+  }
+
+  return (
+    <ModelVisibilityDialog
+      gw={gateway}
+      onOpenChange={setModelVisibilityOpen}
+      onOpenProviders={onOpenProviders}
+      open={open}
+      sessionId={activeSessionId}
+    />
+  )
+}

package/src/app/overlays/overlay-chrome.tsx

@@ -0,0 +1,66 @@
+import type { ButtonHTMLAttributes, ComponentProps, ReactNode } from 'react'
+
+import { cn } from '@/lib/utils'
+
+export const overlayCardClass =
+  'rounded-lg border border-[color-mix(in_srgb,var(--dt-border)_52%,transparent)] bg-[color-mix(in_srgb,var(--dt-card)_72%,transparent)] shadow-[inset_0_0.0625rem_0_color-mix(in_srgb,white_34%,transparent)]'
+
+interface OverlayCardProps extends ComponentProps<'div'> {
+  children: ReactNode
+}
+
+interface OverlayActionButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  tone?: 'default' | 'danger' | 'subtle'
+}
+
+export function OverlayCard({ children, className, ...props }: OverlayCardProps) {
+  return (
+    <div className={cn(overlayCardClass, className)} {...props}>
+      {children}
+    </div>
+  )
+}
+
+export function OverlayActionButton({
+  children,
+  className,
+  tone = 'default',
+  type = 'button',
+  ...props
+}: OverlayActionButtonProps) {
+  return (
+    <button
+      className={cn(
+        'inline-flex h-8 items-center rounded-md border px-3 text-xs font-medium transition-colors disabled:cursor-default disabled:opacity-45',
+        tone === 'default' &&
+          'border-[color-mix(in_srgb,var(--dt-border)_55%,transparent)] bg-[color-mix(in_srgb,var(--dt-card)_80%,transparent)] text-foreground hover:bg-[color-mix(in_srgb,var(--dt-muted)_46%,var(--dt-card))]',
+        tone === 'subtle' &&
+          'h-7 border-transparent px-2 text-muted-foreground hover:border-[color-mix(in_srgb,var(--dt-border)_54%,transparent)] hover:bg-[color-mix(in_srgb,var(--dt-card)_72%,transparent)] hover:text-foreground',
+        tone === 'danger' &&
+          'h-7 border-transparent px-2 text-destructive hover:border-[color-mix(in_srgb,var(--dt-destructive)_40%,transparent)] hover:bg-[color-mix(in_srgb,var(--dt-destructive)_10%,transparent)] hover:text-destructive',
+        className
+      )}
+      type={type}
+      {...props}
+    >
+      {children}
+    </button>
+  )
+}
+
+interface OverlayIconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  children: ReactNode
+}
+
+export function OverlayIconButton({ children, className, type = 'button', ...props }: OverlayIconButtonProps) {
+  return (
+    <OverlayActionButton
+      className={cn('h-7 w-7 justify-center px-0 [&_svg]:size-4', className)}
+      tone="subtle"
+      type={type}
+      {...props}
+    >
+      {children}
+    </OverlayActionButton>
+  )
+}

package/src/app/overlays/overlay-search-input.tsx

@@ -0,0 +1,33 @@
+import type { RefObject } from 'react'
+
+import { SearchField } from '@/components/ui/search-field'
+
+interface OverlaySearchInputProps {
+  containerClassName?: string
+  inputRef?: RefObject<HTMLInputElement | null>
+  loading?: boolean
+  onChange: (value: string) => void
+  placeholder: string
+  value: string
+}
+
+// Borderless underline search — matches the tools/skills page (PageSearchShell).
+export function OverlaySearchInput({
+  containerClassName,
+  inputRef,
+  loading = false,
+  onChange,
+  placeholder,
+  value
+}: OverlaySearchInputProps) {
+  return (
+    <SearchField
+      containerClassName={containerClassName}
+      inputRef={inputRef}
+      loading={loading}
+      onChange={onChange}
+      placeholder={placeholder}
+      value={value}
+    />
+  )
+}

package/src/app/overlays/overlay-split-layout.tsx

@@ -0,0 +1,130 @@
+import type { ReactNode } from 'react'
+
+import { Button } from '@/components/ui/button'
+import { Codicon } from '@/components/ui/codicon'
+import type { IconComponent } from '@/lib/icons'
+import { cn } from '@/lib/utils'
+
+import { PAGE_INSET_X } from '../layout-constants'
+
+interface OverlaySplitLayoutProps {
+  children: ReactNode
+  className?: string
+}
+
+interface OverlaySidebarProps {
+  children: ReactNode
+  className?: string
+}
+
+interface OverlayMainProps {
+  children: ReactNode
+  className?: string
+}
+
+interface OverlayNavItemProps {
+  active: boolean
+  icon: IconComponent
+  label: string
+  // Renders as an indented child of another nav item: smaller icon and a
+  // lighter active state so it never competes with the boxed parent item.
+  nested?: boolean
+  onClick: () => void
+  trailing?: ReactNode
+}
+
+export function OverlaySplitLayout({ children, className }: OverlaySplitLayoutProps) {
+  return (
+    <div
+      className={cn(
+        'grid h-full min-h-0 flex-1 grid-cols-[13rem_minmax(0,1fr)] overflow-hidden bg-transparent max-[47.5rem]:grid-cols-1',
+        className
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+export function OverlaySidebar({ children, className }: OverlaySidebarProps) {
+  return (
+    <aside
+      className={cn(
+        // pt clears the floating titlebar/header; the bg itself fills from the
+        // card's top edge so there's no surface-colored gap above the sidebar.
+        'flex min-h-0 flex-col gap-0.5 overflow-y-auto bg-(--ui-sidebar-surface-background) px-2.5 pb-3 pt-[calc(var(--titlebar-height)+1rem)]',
+        className
+      )}
+    >
+      {children}
+    </aside>
+  )
+}
+
+export function OverlayMain({ children, className }: OverlayMainProps) {
+  return (
+    <main
+      className={cn(
+        'flex min-h-0 flex-1 flex-col overflow-hidden bg-transparent pb-3 pt-[calc(var(--titlebar-height)+1rem)]',
+        PAGE_INSET_X,
+        className
+      )}
+    >
+      {children}
+    </main>
+  )
+}
+
+// Boxless "+ New …" action that tops an OverlaySidebar list (profiles, cron, …).
+// The text variant underlines on hover, which also strokes the icon glyph — so
+// we keep the button itself underline-free and underline only the label span.
+export function OverlayNewButton({
+  icon = 'add',
+  label,
+  onClick
+}: {
+  icon?: string
+  label: string
+  onClick: () => void
+}) {
+  return (
+    <Button
+      className="group mb-1 w-full justify-start gap-2 text-muted-foreground hover:bg-transparent hover:text-foreground"
+      onClick={onClick}
+      size="sm"
+      variant="ghost"
+    >
+      <Codicon name={icon} />
+      <span className="underline-offset-4 group-hover:underline">{label}</span>
+    </Button>
+  )
+}
+
+export function OverlayNavItem({ active, icon: Icon, label, nested, onClick, trailing }: OverlayNavItemProps) {
+  return (
+    <button
+      className={cn(
+        'flex h-7 w-full items-center justify-start gap-2 rounded-md border px-2 text-left text-[length:var(--conversation-text-font-size)] font-normal transition-colors',
+        nested
+          ? active
+            ? 'border-transparent bg-(--chrome-action-hover) font-medium text-foreground'
+            : 'border-transparent bg-transparent text-(--ui-text-tertiary) hover:bg-(--chrome-action-hover) hover:text-foreground'
+          : active
+            ? 'border-(--ui-stroke-tertiary) bg-(--ui-bg-tertiary) text-foreground'
+            : 'border-transparent bg-transparent text-(--ui-text-secondary) hover:bg-(--chrome-action-hover) hover:text-foreground'
+      )}
+      onClick={onClick}
+      type="button"
+    >
+      <Icon
+        className={cn(
+          'shrink-0',
+          nested ? 'size-3.5' : 'size-4',
+          active ? 'text-foreground/80' : 'text-muted-foreground/80'
+        )}
+      />
+      <span className="min-w-0 flex-1 truncate">{label}</span>
+      {trailing}
+    </button>
+  )
+}

package/src/app/overlays/overlay-view.tsx

@@ -0,0 +1,91 @@
+import { type ReactNode, useEffect } from 'react'
+
+import { Button } from '@/components/ui/button'
+import { Codicon } from '@/components/ui/codicon'
+import { translateNow } from '@/i18n'
+import { triggerHaptic } from '@/lib/haptics'
+import { cn } from '@/lib/utils'
+
+interface OverlayViewProps {
+  children: ReactNode
+  onClose: () => void
+  closeLabel?: string
+  contentClassName?: string
+  headerContent?: ReactNode
+  rootClassName?: string
+}
+
+export function OverlayView({
+  children,
+  onClose,
+  closeLabel = translateNow('common.close'),
+  contentClassName,
+  headerContent,
+  rootClassName
+}: OverlayViewProps) {
+  const closeOverlay = () => {
+    triggerHaptic('close')
+    onClose()
+  }
+
+  // Esc dismisses every OverlayView-based overlay. Nested Radix dialogs
+  // stop propagation themselves, so opening (e.g.) the model picker inside
+  // Settings still closes the picker first instead of the underlying overlay.
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== 'Escape' || event.defaultPrevented) {
+        return
+      }
+
+      event.preventDefault()
+      triggerHaptic('close')
+      onClose()
+    }
+
+    window.addEventListener('keydown', onKeyDown)
+
+    return () => window.removeEventListener('keydown', onKeyDown)
+  }, [onClose])
+
+  return (
+    <div
+      className="fixed inset-0 z-50 bg-black/22 p-3 backdrop-blur-[0.125rem] sm:p-6"
+      onClick={event => {
+        if (event.target === event.currentTarget) {
+          closeOverlay()
+        }
+      }}
+      role="presentation"
+    >
+      <div
+        className={cn(
+          'relative flex h-full min-h-0 flex-col overflow-hidden rounded-xl border border-(--ui-stroke-secondary) bg-(--ui-chat-surface-background) shadow-md',
+          rootClassName
+        )}
+      >
+        <div className="pointer-events-none absolute inset-x-0 top-0 z-10 h-[calc(var(--titlebar-height)+0.1875rem)] [-webkit-app-region:drag]">
+          {headerContent && (
+            <div className="pointer-events-auto absolute left-1/2 top-[calc(0.5rem+var(--titlebar-height)/2)] -translate-x-1/2 -translate-y-1/2 [-webkit-app-region:no-drag]">
+              {headerContent}
+            </div>
+          )}
+
+          <Button
+            aria-label={closeLabel}
+            className="pointer-events-auto absolute right-3 top-[calc(0.1875rem+var(--titlebar-height)/2)] -translate-y-1/2 text-(--ui-text-tertiary) hover:bg-(--chrome-action-hover) hover:text-foreground [-webkit-app-region:no-drag]"
+            onClick={closeOverlay}
+            size="icon-titlebar"
+            variant="ghost"
+          >
+            <Codicon name="close" size="1rem" />
+          </Button>
+        </div>
+
+        {/* No top padding here: the split-layout columns own their own
+            titlebar clearance so their backgrounds run flush to the card top
+            (otherwise the card surface shows as a gap above the sidebar). */}
+        <div className={cn('min-h-0 flex flex-1 flex-col', contentClassName)}>{children}</div>
+      </div>
+    </div>
+  )
+}

package/src/app/page-search-shell.tsx

@@ -0,0 +1,75 @@
+import type { ReactNode } from 'react'
+
+import { SearchField } from '@/components/ui/search-field'
+import { cn } from '@/lib/utils'
+
+interface PageSearchShellProps extends React.ComponentProps<'section'> {
+  children: ReactNode
+  /** Primary tabs shown on the top row, beside the search. */
+  tabs?: ReactNode
+  /** Secondary filters shown full-width on their own row below (expands). */
+  filters?: ReactNode
+  onSearchChange: (value: string) => void
+  searchPlaceholder: string
+  searchTrailingAction?: ReactNode
+  searchValue: string
+  /** Hide the search field when there's nothing to search (empty dataset). */
+  searchHidden?: boolean
+}
+
+export function PageSearchShell({
+  children,
+  className,
+  tabs,
+  filters,
+  onSearchChange,
+  searchPlaceholder,
+  searchTrailingAction,
+  searchValue,
+  searchHidden = false,
+  ...props
+}: PageSearchShellProps) {
+  return (
+    <section
+      {...props}
+      className={cn('flex h-full min-w-0 flex-col overflow-hidden bg-(--ui-chat-surface-background)', className)}
+    >
+      {/*
+        Header lives in the page body, below the window chrome (the shell floats
+        traffic lights over the top titlebar-height strip, which the `pt` clears
+        and leaves draggable). Top row: primary tabs + search. Second row:
+        secondary filters, full-width so they expand. Interactive bits opt out
+        of the drag region.
+      */}
+      {/*
+        IMPORTANT: do NOT put `-webkit-app-region: drag` on this header. It spans
+        full width over the band where the floating titlebar icon clusters live,
+        and an overlapping OS drag region eats their clicks at the compositor
+        level (pointer-events / no-drag carve-outs across separate stacking
+        contexts don't reliably fix it on macOS). The shell already supplies a
+        draggable titlebar strip that is `calc()`'d around the icon clusters
+        (see app-shell.tsx), so window dragging still works here.
+      */}
+      <div className="shrink-0">
+        {(tabs || !searchHidden) && (
+          <div className="flex items-center gap-3 px-3 pb-2 pt-[calc(var(--titlebar-height)+0.5rem)]">
+            {tabs ? <div className="flex min-w-0 flex-1 flex-wrap items-center gap-x-2 gap-y-1">{tabs}</div> : null}
+            {!searchHidden && (
+              <div className={cn('flex shrink-0 items-center', !tabs && 'flex-1')}>
+                <SearchField
+                  containerClassName="max-w-[45vw]"
+                  onChange={onSearchChange}
+                  placeholder={searchPlaceholder}
+                  trailingAction={searchTrailingAction}
+                  value={searchValue}
+                />
+              </div>
+            )}
+          </div>
+        )}
+        {filters ? <div className="flex flex-wrap items-center gap-x-2 gap-y-1 px-3 pb-2">{filters}</div> : null}
+      </div>
+      <div className="min-h-0 flex-1 overflow-hidden bg-(--ui-chat-surface-background)">{children}</div>
+    </section>
+  )
+}