@polderlabs/bizar 5.0.0 → 5.0.2

package/bizar-dash/src/web/components/EnvVarManager.tsx

@@ -1,6 +1,6 @@
 // src/web/components/EnvVarManager.tsx — manage BIZAR_* env vars from ~/.config/bizar/env.json
-import { useCallback, useEffect, useState } from 'react';
-import { Plus, Pencil, Trash2, Eye, EyeOff, RefreshCw, KeyRound, CheckCircle, X } from 'lucide-react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Plus, Pencil, Trash2, Eye, EyeOff, RefreshCw, KeyRound, CheckCircle, X, Search, Download, Upload, ChevronDown, ChevronRight, AlertCircle } from 'lucide-react';
 import { Button } from './Button';
 import { useToast } from './Toast';
 import { api } from '../lib/api';
@@ -13,6 +13,8 @@ export type EnvVarEntry = {
   source: string;
 };
 
+export type EnvVarGrouped = Record<string, EnvVarEntry[]>;
+
 type Props = {
   onError?: (msg: string) => void;
 };
@@ -31,6 +33,14 @@ export function EnvVarManager({ onError }: Props) {
   const [showAdd, setShowAdd] = useState(false);
   const [newName, setNewName] = useState('');
   const [newValue, setNewValue] = useState('');
+  // Bulk operations
+  const [showBulk, setShowBulk] = useState(false);
+  const [bulkText, setBulkText] = useState('');
+  const [bulkImporting, setBulkImporting] = useState(false);
+  // Search / filter
+  const [searchQ, setSearchQ] = useState('');
+  // Group by prefix (collapsed state)
+  const [collapsed, setCollapsed] = useState<Set<string>>(new Set());
 
   const load = useCallback(async () => {
     setLoading(true);
@@ -121,21 +131,139 @@ export function EnvVarManager({ onError }: Props) {
     }
   };
 
+  // ─── Bulk import ───────────────────────────────────────────────────────────
+  const handleBulkImport = async () => {
+    if (!bulkText.trim()) { toast.warning('Nothing to import.'); return; }
+    setBulkImporting(true);
+    try {
+      const r = await api.post<{ ok: boolean; imported: number; skipped: number; errors: string[] }>('/env-vars/bulk-import', { envContent: bulkText });
+      toast.success(`Imported ${r.imported}, skipped ${r.skipped}.`);
+      if (r.errors.length > 0) {
+        toast.warning(`${r.errors.length} lines had errors: ${r.errors.slice(0, 3).join('; ')}${r.errors.length > 3 ? '…' : ''}`);
+      }
+      setBulkText('');
+      setShowBulk(false);
+      await load();
+    } catch (err) {
+      toast.error(`Bulk import failed: ${(err as Error).message}`);
+    } finally {
+      setBulkImporting(false);
+    }
+  };
+
+  // ─── Bulk export ───────────────────────────────────────────────────────────
+  const handleExport = async () => {
+    try {
+      const r = await api.get<string>('/env-vars/export');
+      // r is the raw text content
+      const blob = new Blob([r as unknown as string], { type: 'text/plain' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = '.env';
+      a.click();
+      URL.revokeObjectURL(url);
+      toast.success('Exported .env file.');
+    } catch (err) {
+      toast.error(`Export failed: ${(err as Error).message}`);
+    }
+  };
+
+  // ─── Group by prefix ───────────────────────────────────────────────────────
+  const filtered = useMemo(() => {
+    if (!searchQ.trim()) return vars;
+    const q = searchQ.toLowerCase();
+    return vars.filter((v) => v.name.toLowerCase().includes(q));
+  }, [vars, searchQ]);
+
+  const grouped = useMemo(() => {
+    const groups: Record<string, EnvVarEntry[]> = {};
+    for (const v of filtered) {
+      const prefix = v.name.split('_')[0] + '_';
+      (groups[prefix] ??= []).push(v);
+    }
+    return groups;
+  }, [filtered]);
+
+  const toggleGroup = (prefix: string) => {
+    setCollapsed((prev) => {
+      const next = new Set(prev);
+      if (next.has(prefix)) next.delete(prefix);
+      else next.add(prefix);
+      return next;
+    });
+  };
+
+  const sortedGroupKeys = useMemo(() => {
+    const known = ['BIZAR_', 'PROVIDER_', 'MODEL_', 'API_'];
+    const keys = Object.keys(grouped).sort((a, b) => {
+      const ai = known.indexOf(a); const bi = known.indexOf(b);
+      if (ai === -1 && bi === -1) return a.localeCompare(b);
+      if (ai === -1) return 1;
+      if (bi === -1) return -1;
+      return ai - bi;
+    });
+    return keys;
+  }, [grouped]);
+
   if (loading) {
     return <div className="muted" style={{ padding: '16px 0', fontSize: 13 }}>Loading env vars…</div>;
   }
 
+  const hasGroups = sortedGroupKeys.length > 1;
+  const groupMode = hasGroups;
+
   return (
     <div className="env-var-manager">
       <div className="env-var-toolbar">
         <Button variant="primary" size="sm" onClick={() => setShowAdd(true)}>
           <Plus size={12} /> New variable
         </Button>
+        <Button variant="secondary" size="sm" onClick={() => setShowBulk((v) => !v)} className={showBulk ? 'active' : ''}>
+          <Upload size={12} /> Bulk import
+        </Button>
+        <Button variant="ghost" size="sm" onClick={handleExport} title="Export as .env">
+          <Download size={12} /> Export
+        </Button>
+        <div className="env-var-search-wrap">
+          <Search size={12} className="env-var-search-icon" />
+          <input
+            className="env-var-search input"
+            placeholder="Filter…"
+            value={searchQ}
+            onChange={(e) => setSearchQ(e.target.value)}
+          />
+        </div>
         <Button variant="ghost" size="sm" onClick={load} title="Reload">
           <RefreshCw size={12} />
         </Button>
       </div>
 
+      {/* Bulk import panel */}
+      {showBulk && (
+        <div className="env-var-bulk-panel">
+          <div className="env-var-bulk-header">
+            <span>Paste <code>KEY=value</code> lines (one per line):</span>
+            <Button variant="ghost" size="sm" onClick={() => setShowBulk(false)}><X size={12} /></Button>
+          </div>
+          <textarea
+            className="input mono env-var-bulk-textarea"
+            placeholder={"BIZAR_API_KEY=your-key-here\nPROVIDER_OPENAI_KEY=sk-...\nMODEL_KEY=gem-..."}
+            value={bulkText}
+            onChange={(e) => setBulkText(e.target.value)}
+            rows={6}
+          />
+          <div className="env-var-bulk-footer">
+            <Button variant="primary" size="sm" onClick={handleBulkImport} disabled={bulkImporting || !bulkText.trim()}>
+              {bulkImporting ? 'Importing…' : 'Import'}
+            </Button>
+            <span className="muted" style={{ fontSize: 11 }}>
+              Existing keys are skipped unless re-created individually. Invalid lines are reported.
+            </span>
+          </div>
+        </div>
+      )}
+
       {vars.length === 0 && !showAdd && (
         <div className="env-var-empty">
           <KeyRound size={20} />
@@ -178,70 +306,125 @@ export function EnvVarManager({ onError }: Props) {
         </div>
       )}
 
-      {/* Var list */}
-      {vars.length > 0 && (
-        <div className="env-var-list">
-          {vars.map((v) => {
-            const isEditing = editing === v.name;
-            const isRevealed = revealed.has(v.name);
-            return (
-              <div key={v.name} className={cn('env-var-row', isEditing && 'env-var-row-editing')}>
-                <span className="env-var-name mono">{v.name}</span>
-                {isEditing ? (
-                  <input
-                    className="input mono"
-                    type="password"
-                    style={{ flex: 1, minWidth: 200 }}
-                    value={editValue}
-                    onChange={(e) => setEditValue(e.target.value)}
-                    onKeyDown={(e) => {
-                      if (e.key === 'Enter') handleUpdate(v.name);
-                      if (e.key === 'Escape') setEditing(null);
-                    }}
-                    autoFocus
-                  />
-                ) : (
-                  <span className={cn('env-var-value mono', !isRevealed && 'env-var-value-masked')}>
-                    {isRevealed ? v.value : v.value}
-                  </span>
-                )}
-                <span className="env-var-source muted">{v.source}</span>
-                <div className="env-var-actions">
-                  {!isEditing && (
-                    <button
-                      type="button"
-                      className="icon-btn"
-                      title={isRevealed ? 'Hide' : 'Reveal'}
-                      onClick={() => toggleReveal(v.name)}
-                    >
-                      {isRevealed ? <EyeOff size={12} /> : <Eye size={12} />}
-                    </button>
-                  )}
-                  {isEditing ? (
-                    <>
-                      <Button variant="primary" size="sm" onClick={() => handleUpdate(v.name)} disabled={saving}>
-                        Save
-                      </Button>
-                      <Button variant="ghost" size="sm" onClick={() => setEditing(null)}>
-                        Cancel
-                      </Button>
-                    </>
-                  ) : (
-                    <>
-                      <button type="button" className="icon-btn" title="Edit" onClick={() => startEdit(v)}>
-                        <Pencil size={12} />
-                      </button>
-                      <button type="button" className="icon-btn icon-btn-danger" title="Delete" onClick={() => handleDelete(v.name)}>
-                        <Trash2 size={12} />
-                      </button>
-                    </>
+      {/* Var list — grouped by prefix */}
+      {filtered.length > 0 && (
+        groupMode ? (
+          <div className="env-var-groups">
+            {sortedGroupKeys.map((prefix) => {
+              const items = grouped[prefix];
+              const isCollapsed = collapsed.has(prefix);
+              return (
+                <div key={prefix} className="env-var-group">
+                  <button
+                    type="button"
+                    className="env-var-group-header"
+                    onClick={() => toggleGroup(prefix)}
+                  >
+                    {isCollapsed ? <ChevronRight size={12} /> : <ChevronDown size={12} />}
+                    <span className="env-var-group-prefix mono">{prefix}</span>
+                    <span className="env-var-group-count muted">({items.length})</span>
+                  </button>
+                  {!isCollapsed && (
+                    <div className="env-var-list">
+                      {items.map((v) => (
+                        <VarRow key={v.name} v={v} editing={editing} editValue={editValue}
+                          isRevealed={revealed.has(v.name)}
+                          onToggleReveal={toggleReveal} onStartEdit={startEdit}
+                          onEditValueChange={setEditValue} onHandleUpdate={handleUpdate}
+                          onCancelEdit={() => setEditing(null)} onDelete={handleDelete}
+                          saving={saving} />
+                      ))}
+                    </div>
                   )}
                 </div>
-              </div>
-            );
-          })}
+              );
+            })}
+          </div>
+        ) : (
+          <div className="env-var-list">
+            {filtered.map((v) => (
+              <VarRow key={v.name} v={v} editing={editing} editValue={editValue}
+                isRevealed={revealed.has(v.name)}
+                onToggleReveal={toggleReveal} onStartEdit={startEdit}
+                onEditValueChange={setEditValue} onHandleUpdate={handleUpdate}
+                onCancelEdit={() => setEditing(null)} onDelete={handleDelete}
+                saving={saving} />
+            ))}
+          </div>
+        )
+      )}
+
+      {filtered.length === 0 && vars.length > 0 && (
+        <div className="env-var-empty">
+          <Search size={16} />
+          <span>No env vars match "{searchQ}"</span>
         </div>
       )}
     </div>
   );
 }
+
+// ─── Individual var row (extracted for reuse in group mode) ───────────────────
+type VarRowProps = {
+  v: EnvVarEntry;
+  editing: string | null;
+  editValue: string;
+  isRevealed: boolean;
+  onToggleReveal: (name: string) => void;
+  onStartEdit: (v: EnvVarEntry) => void;
+  onEditValueChange: (v: string) => void;
+  onHandleUpdate: (name: string) => void;
+  onCancelEdit: () => void;
+  onDelete: (name: string) => void;
+  saving: boolean;
+};
+
+function VarRow({ v, editing, editValue, isRevealed, onToggleReveal, onStartEdit, onEditValueChange, onHandleUpdate, onCancelEdit, onDelete, saving }: VarRowProps) {
+  const isEditing = editing === v.name;
+  return (
+    <div className={cn('env-var-row', isEditing && 'env-var-row-editing')}>
+      <span className="env-var-name mono">{v.name}</span>
+      {isEditing ? (
+        <input
+          className="input mono"
+          type="password"
+          style={{ flex: 1, minWidth: 200 }}
+          value={editValue}
+          onChange={(e) => onEditValueChange(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') onHandleUpdate(v.name);
+            if (e.key === 'Escape') onCancelEdit();
+          }}
+          autoFocus
+        />
+      ) : (
+        <span className={cn('env-var-value mono', !isRevealed && 'env-var-value-masked')}>
+          {v.value}
+        </span>
+      )}
+      <span className="env-var-source muted">{v.source}</span>
+      <div className="env-var-actions">
+        {!isEditing && (
+          <button type="button" className="icon-btn" title={isRevealed ? 'Hide' : 'Reveal'} onClick={() => onToggleReveal(v.name)}>
+            {isRevealed ? <EyeOff size={12} /> : <Eye size={12} />}
+          </button>
+        )}
+        {isEditing ? (
+          <>
+            <Button variant="primary" size="sm" onClick={() => onHandleUpdate(v.name)} disabled={saving}>Save</Button>
+            <Button variant="ghost" size="sm" onClick={onCancelEdit}>Cancel</Button>
+          </>
+        ) : (
+          <>
+            <button type="button" className="icon-btn" title="Edit" onClick={() => onStartEdit(v)}>
+              <Pencil size={12} />
+            </button>
+            <button type="button" className="icon-btn icon-btn-danger" title="Delete" onClick={() => onDelete(v.name)}>
+              <Trash2 size={12} />
+            </button>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

package/bizar-dash/src/web/components/ScheduleTemplateCard.tsx

@@ -0,0 +1,71 @@
+// src/components/ScheduleTemplateCard.tsx — template preview card for the Schedules Templates tab.
+
+import { Card, CardTitle, CardMeta } from './Card';
+import { Button } from './Button';
+
+export type ScheduleTemplate = {
+  id: string;
+  name: string;
+  description: string;
+  type: 'cron' | 'interval' | 'once' | 'webhook';
+  schedule?: string;
+  intervalMs?: number;
+  action: {
+    type: 'command' | 'agent' | 'webhook';
+    target?: string;
+    prompt?: string;
+    method?: string;
+  };
+  tags?: string[];
+  source?: string;
+  templateFile?: string;
+};
+
+type Props = {
+  template: ScheduleTemplate;
+  onUse: (template: ScheduleTemplate) => void;
+};
+
+function formatSchedule(template: ScheduleTemplate): string {
+  if (template.type === 'cron' && template.schedule) {
+    return `cron: ${template.schedule}`;
+  }
+  if (template.type === 'interval') {
+    const ms = template.intervalMs || 0;
+    const secs = ms / 1000;
+    if (secs >= 3600) return `every ${secs / 3600}h`;
+    if (secs >= 60) return `every ${secs / 60}m`;
+    return `every ${secs}s`;
+  }
+  return template.type;
+}
+
+export function ScheduleTemplateCard({ template, onUse }: Props) {
+  return (
+    <Card className="schedule-template-card">
+      <div className="schedule-template-header">
+        <CardTitle>{template.name}</CardTitle>
+        {template.tags && template.tags.length > 0 && (
+          <div className="schedule-template-tags">
+            {template.tags.map((tag) => (
+              <span key={tag} className="tag">{tag}</span>
+            ))}
+          </div>
+        )}
+      </div>
+      <CardMeta>{template.description}</CardMeta>
+      <div className="schedule-template-summary">
+        <code>{formatSchedule(template)}</code>
+        {' · '}
+        <code>{template.action.type}</code>
+      </div>
+      <Button
+        variant="secondary"
+        size="sm"
+        onClick={() => onUse(template)}
+      >
+        Use this template
+      </Button>
+    </Card>
+  );
+}

package/bizar-dash/src/web/components/SettingsNav.tsx

@@ -0,0 +1,101 @@
+// src/components/SettingsNav.tsx — v4.9.0 full-sidebar settings navigation.
+// Shown in the sidebar rail when settingsMode is active. All sections are
+// visible at once; clicking one scrolls the Settings view to that section.
+import { ChevronRight, Palette, Terminal, Boxes, Brain, Cpu, RefreshCw, Sparkles, Gauge, Archive, ArrowLeft, LayoutGrid, type LucideIcon } from 'lucide-react';
+import { cn } from '../lib/utils';
+
+export type SettingsSection = {
+  id: string;
+  label: string;
+  icon?: LucideIcon;
+};
+
+export type SettingsSectionGroup = {
+  label: string;
+  sections: SettingsSection[];
+};
+
+const SECTION_GROUPS: SettingsSectionGroup[] = [
+  {
+    label: 'General',
+    sections: [
+      { id: 'theme', label: 'Theme', icon: Palette },
+      { id: 'layout', label: 'Layout', icon: LayoutGrid },
+      { id: 'general', label: 'General', icon: LayoutGrid },
+    ],
+  },
+  {
+    label: 'Core',
+    sections: [
+      { id: 'env-vars', label: 'Env Vars', icon: Terminal },
+      { id: 'providers', label: 'Providers', icon: Boxes },
+      { id: 'memory', label: 'Memory', icon: Brain },
+      { id: 'system-llm', label: 'System LLM', icon: Cpu },
+    ],
+  },
+  {
+    label: 'Experience',
+    sections: [
+      { id: 'updates', label: 'Updates', icon: RefreshCw },
+      { id: 'skills', label: 'Skills', icon: Sparkles },
+      { id: 'headroom', label: 'Headroom', icon: Gauge },
+    ],
+  },
+  {
+    label: 'Data',
+    sections: [
+      { id: 'backup', label: 'Backup', icon: Archive },
+    ],
+  },
+];
+
+export type SettingsNavProps = {
+  activeSection: string | null;
+  onSectionChange: (id: string | null) => void;
+  onExitSettings: () => void;
+};
+
+export function SettingsNav({ activeSection, onSectionChange, onExitSettings }: SettingsNavProps) {
+  return (
+    <div className="settings-nav-root" aria-label="Settings sections">
+      {/* Back button */}
+      <button
+        type="button"
+        className="settings-nav-back"
+        onClick={onExitSettings}
+        aria-label="Exit settings"
+      >
+        <ArrowLeft size={14} />
+        <span>Back</span>
+      </button>
+
+      <div className="settings-nav-divider" aria-hidden="true" />
+
+      {/* Section groups */}
+      {SECTION_GROUPS.map((group) => (
+        <div key={group.label} className="settings-nav-group">
+          <div className="settings-nav-group-label">{group.label}</div>
+          {group.sections.map((s) => {
+            const Icon = s.icon;
+            const active = activeSection === s.id;
+            return (
+              <button
+                key={s.id}
+                type="button"
+                className={cn('settings-nav-item', active && 'settings-nav-item-active')}
+                onClick={() => onSectionChange(active ? null : s.id)}
+                aria-current={active ? 'page' : undefined}
+              >
+                {Icon && <Icon size={14} className="settings-nav-item-icon" aria-hidden />}
+                <span className="settings-nav-item-label">{s.label}</span>
+                {active && (
+                  <ChevronRight size={12} className="settings-nav-item-chevron" aria-hidden />
+                )}
+              </button>
+            );
+          })}
+        </div>
+      ))}
+    </div>
+  );
+}

package/bizar-dash/src/web/components/Sidebar.tsx

@@ -1,14 +1,37 @@
 // src/components/Sidebar.tsx — vertical navigation rail for sidebar/both layouts.
 import type { TabDef } from './Topbar';
+import { SettingsNav } from './SettingsNav';
 import { cn } from '../lib/utils';
 
 export type SidebarProps = {
   tabs: TabDef[];
   activeTab: string;
   onTabChange: (id: string) => void;
+  /** v4.9.0 — When true, show the full settings sidebar nav instead of tabs. */
+  settingsMode?: boolean;
+  /** v4.9.0 — The currently highlighted settings section. */
+  settingsActiveSection?: string | null;
+  /** v4.9.0 — Called when user clicks a section in the settings sidebar. */
+  onSettingsSectionChange?: (id: string | null) => void;
+  /** v4.9.0 — Called when user clicks the back button in settings mode. */
+  onExitSettings?: () => void;
 };
 
-export function Sidebar({ tabs, activeTab, onTabChange }: SidebarProps) {
+export function Sidebar({ tabs, activeTab, onTabChange, settingsMode, settingsActiveSection, onSettingsSectionChange, onExitSettings }: SidebarProps) {
+  // v4.9.0 — When settingsMode is active, render the full settings nav instead
+  // of the normal tab rail. This lets users see all sections at a glance.
+  if (settingsMode) {
+    return (
+      <aside className="sidebar sidebar-settings-mode" aria-label="Settings navigation">
+        <SettingsNav
+          activeSection={settingsActiveSection ?? null}
+          onSectionChange={onSettingsSectionChange ?? (() => {})}
+          onExitSettings={onExitSettings ?? (() => {})}
+        />
+      </aside>
+    );
+  }
+
   // Split tabs into built-in (no `isMod` flag) and mod-added entries.
   // Render a separator + small "Mods" label between them so users can
   // tell what's part of Bizar vs what an installed mod contributed.
@@ -64,3 +87,4 @@ export function Sidebar({ tabs, activeTab, onTabChange }: SidebarProps) {
     </aside>
   );
 }
+

package/bizar-dash/src/web/components/StatusBadge.tsx

@@ -3,21 +3,52 @@
 import type { ReactNode } from 'react';
 import { cn } from '../lib/utils';
 
+/**
+ * v6.0.0 — Doctor variants. 'ok' / 'warn' / 'fail' map onto
+ * 'success' / 'warning' / 'error' respectively so existing CSS
+ * rules cover the Doctor page without a new palette entry. The
+ * `kind` union is widened (additive only) so every existing caller
+ * keeps type-checking against the same set.
+ */
+export type StatusKind =
+  | 'success'
+  | 'warning'
+  | 'error'
+  | 'info'
+  | 'accent'
+  | 'neutral'
+  | 'ok'
+  | 'warn'
+  | 'fail';
+
 export type StatusBadgeProps = {
-  kind?: 'success' | 'warning' | 'error' | 'info' | 'accent' | 'neutral';
+  kind?: StatusKind;
   children: ReactNode;
   className?: string;
   dot?: boolean;
 };
 
+/**
+ * Map a doctor-style status to the underlying badge kind. Done at
+ * render time so callers don't have to translate; the CSS class is
+ * always one of `badge-success | badge-warning | badge-error | …`.
+ */
+function normalizeKind(kind: StatusKind): Exclude<StatusKind, 'ok' | 'warn' | 'fail'> {
+  if (kind === 'ok') return 'success';
+  if (kind === 'warn') return 'warning';
+  if (kind === 'fail') return 'error';
+  return kind;
+}
+
 export function StatusBadge({
   kind = 'neutral',
   children,
   className,
   dot = false,
 }: StatusBadgeProps) {
+  const normalized = normalizeKind(kind);
   return (
-    <span className={cn('badge', `badge-${kind}`, className)}>
+    <span className={cn('badge', `badge-${normalized}`, className)} title={`status: ${kind}`}>
       {dot && <span className="badge-dot" />}
       {children}
     </span>

package/bizar-dash/src/web/components/Topbar.tsx

@@ -23,6 +23,7 @@ import {
   Radio,
   Coins,
   Brain,
+  Stethoscope,
   type LucideIcon,
 } from 'lucide-react';
 import { cn } from '../lib/utils';
@@ -52,6 +53,11 @@ export const TABS: TabDef[] = [
   { id: 'schedules', label: 'Schedules', icon: Clock },
   { id: 'history', label: 'History', icon: HistoryIcon },
   { id: 'minimax', label: 'Usage', icon: Coins },
+  // v6.0.0 — Doctor page. Lives between Overview and Settings so the
+  // "is everything healthy?" question is always one click from the
+  // home screen and from the settings surface (where an operator
+  // typically arrives after something looks off).
+  { id: 'doctor', label: 'Doctor', icon: Stethoscope },
   { id: 'settings', label: 'Settings', icon: Sliders },
 ];
 
@@ -155,6 +161,11 @@ export function Topbar({
               >
                 <Icon size={14} className="tab-icon" />
                 <span className="tab-label">{tab.label}</span>
+                {tab.id === 'settings' && active && (
+                  <span className="settings-mode-indicator" title="Settings mode active">
+                    <Settings2 size={12} />
+                  </span>
+                )}
               </button>
             );
           })}