ompchamber 0.3.0

package/src/client/components/layout/session-sidebar/Toolbar.tsx

@@ -0,0 +1,123 @@
+import { Archive, Calendar, FolderPlus, MoreHorizontal, PanelLeftClose, RefreshCw, Search, X } from 'lucide-preact';
+import type { SessionSortOption } from '@/shared/types';
+import { SortMenu } from '@/client/components/common/sort-menu';
+
+interface SessionSidebarToolbarProps {
+  isSearchVisible: boolean;
+  searchQuery: string;
+  showArchived: boolean;
+  optionsOpen: boolean;
+  sortOption: SessionSortOption;
+  onToggleSearch: () => void;
+  onSearchChange: (value: string) => void;
+  onToggleArchived: () => void;
+  onHideArchived: () => void;
+  onToggleOptions: () => void;
+  onCloseOptions: () => void;
+  onSortChange: (opt: SessionSortOption) => void;
+  onNewWorkspace: () => void;
+  onScheduler: () => void;
+  onRefresh: () => void;
+  onClose?: () => void;
+}
+
+export function SessionSidebarToolbar({
+  isSearchVisible,
+  searchQuery,
+  showArchived,
+  optionsOpen,
+  sortOption,
+  onToggleSearch,
+  onSearchChange,
+  onToggleArchived,
+  onHideArchived,
+  onToggleOptions,
+  onCloseOptions,
+  onSortChange,
+  onNewWorkspace,
+  onScheduler,
+  onRefresh,
+  onClose,
+}: SessionSidebarToolbarProps) {
+  return (
+    <div className="p-3 border-b border-ink/10 flex flex-col space-y-3">
+      <div className="flex items-center justify-between px-1 text-ink/60">
+        <div className="flex space-x-3 items-center">
+          <FolderPlus size={14} className="hover:text-ink cursor-pointer"  onClick={onNewWorkspace} />
+          <Calendar size={14} className="hover:text-ink cursor-pointer" onClick={onScheduler} />
+          <span 
+            title="Refresh sessions" 
+            onClick={onRefresh}
+            className="inline-flex cursor-pointer"
+          >
+            <RefreshCw 
+              size={14} 
+              className="hover:text-ink" 
+            />
+          </span>
+        </div>
+        <div className="flex space-x-3 items-center relative">
+          <Search 
+            size={14} 
+            className={`cursor-pointer transition-colors ${isSearchVisible ? 'text-ink' : 'hover:text-ink'}`} 
+             
+            onClick={onToggleSearch} 
+          />
+          <span 
+            title={showArchived ? "Hide Archive" : "Show Archive"} 
+            onClick={onToggleArchived}
+            className="inline-flex cursor-pointer"
+          >
+            <Archive 
+              size={14} 
+              className={`transition-colors ${showArchived ? 'text-ink' : 'hover:text-ink'}`} 
+            />
+          </span>
+          
+          <div className="relative">
+            <MoreHorizontal 
+              size={14} 
+              className={`cursor-pointer transition-colors ${optionsOpen ? 'text-ink' : 'hover:text-ink'}`} 
+               
+              onClick={onToggleOptions} 
+            />
+            {optionsOpen && (
+              <div className="absolute right-0 top-full mt-2 w-48 bg-paper border border-ink/10 rounded shadow-lg z-50 py-1" onMouseLeave={onCloseOptions}>
+                <SortMenu variant="desktop" sortOption={sortOption} onSortChange={onSortChange} />
+              </div>
+            )}
+          </div>
+
+          <PanelLeftClose size={14} className="hover:text-ink cursor-pointer ml-1" onClick={onClose} />
+        </div>
+      </div>
+      
+      {/* Search Field */}
+      {isSearchVisible && (
+        <div className="pt-1">
+          <input 
+            type="text" 
+            placeholder="Search workspaces & sessions..." 
+            value={searchQuery}
+            onChange={(e) => onSearchChange(e.currentTarget.value)}
+            autoFocus
+            className="w-full bg-ink/5 border border-ink/10 rounded px-2.5 py-1.5 outline-none focus:border-ink/30 text-xs text-ink placeholder-ink/40 transition-colors" 
+          />
+        </div>
+      )}
+      
+      {/* Archive Status Pill */}
+      {showArchived && (
+        <div className="flex items-center justify-between bg-amber-500/10 border border-amber-500/20 text-amber-900 rounded px-2.5 py-1.5 text-[10px] font-medium">
+          <div className="flex items-center space-x-1.5">
+            <Archive size={10} />
+            <span>Showing Archived</span>
+          </div>
+          <button className="hover:text-amber-950" onClick={onHideArchived}>
+            <X size={10} />
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/client/components/layout/session-sidebar/about-modal/SocialLinks.tsx

@@ -0,0 +1,43 @@
+export function SocialLinks() {
+  return (
+    <div className="flex flex-col items-center gap-3 mt-6 pt-1">
+      <div className="flex items-center justify-center gap-6">
+        <a
+          href="https://github.com"
+          target="_blank"
+          rel="noreferrer"
+          className="flex items-center gap-2 text-xs font-medium text-ink/75 hover:text-ink transition-colors"
+        >
+          <svg className="w-4 h-4 fill-current" viewBox="0 0 24 24">
+            <path fillRule="evenodd" clipRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.53 1.032 1.53 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" />
+          </svg>
+          <span>GitHub</span>
+        </a>
+
+        <a
+          href="https://discord.com"
+          target="_blank"
+          rel="noreferrer"
+          className="flex items-center gap-2 text-xs font-medium text-ink/75 hover:text-ink transition-colors"
+        >
+          <svg className="w-4 h-4 fill-current" viewBox="0 0 24 24">
+            <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994.021-.041.001-.09-.041-.106a13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.929 1.793 8.18 1.793 12.061 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.894.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.028zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z" />
+          </svg>
+          <span>Discord</span>
+        </a>
+      </div>
+
+      <a
+        href="https://x.com"
+        target="_blank"
+        rel="noreferrer"
+        className="flex items-center gap-2 text-xs font-medium text-ink/75 hover:text-ink transition-colors"
+      >
+        <svg className="w-3.5 h-3.5 fill-current" viewBox="0 0 24 24">
+          <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+        </svg>
+        <span>@ompchamber</span>
+      </a>
+    </div>
+  );
+}

package/src/client/components/layout/session-sidebar/about-modal/UpdateSection.tsx

@@ -0,0 +1,172 @@
+import { AlertCircle, Check, Download, Loader2, RefreshCw } from 'lucide-preact';
+import type { UpdateTarget, UpdateTargetInfo } from '@/shared/types/updates';
+import type { UseUpdatesResult } from '@/client/hooks/ui/updates';
+
+interface UpdateSectionProps {
+  updates: UseUpdatesResult;
+  onToast?: (message: string, type?: 'success' | 'error') => void;
+}
+
+interface UpdateRowProps {
+  target: UpdateTarget;
+  info: UpdateTargetInfo;
+  applying: boolean;
+  disabled: boolean;
+  onApply: (target: UpdateTarget) => void;
+}
+
+const actionClassName = 'inline-flex items-center gap-1.5 rounded-md border border-ink/20 px-2.5 py-1.5 text-[11px] font-medium text-ink transition-colors hover:border-ink/40 disabled:cursor-not-allowed disabled:opacity-50';
+
+function UpdateRow({ target, info, applying, disabled, onApply }: UpdateRowProps) {
+  const label = target === 'ompchamber' ? 'OMPChamber' : 'Oh-My-Pi';
+  const versionText = `v${info.current ?? '…'} → v${info.latest ?? '…'}`;
+
+  return (
+    <div className="flex items-center justify-between gap-3 border-t border-ink/10 py-2.5 first:border-t-0">
+      <div className="min-w-0">
+        <p className="text-xs font-medium text-ink">{label}</p>
+        <p className="font-mono text-[10px] text-ink/60">
+          {info.installed ? versionText : 'not detected'}
+        </p>
+      </div>
+      {info.installed ? (
+        <button
+          type="button"
+          onClick={() => onApply(target)}
+          disabled={disabled}
+          className={actionClassName}
+        >
+          {applying ? (
+            <Loader2 size={12} className="animate-spin motion-reduce:animate-none" />
+          ) : (
+            <Download size={12} />
+          )}
+          <span>Update</span>
+        </button>
+      ) : (
+        <span className="shrink-0 text-[10px] text-ink/40">not detected</span>
+      )}
+    </div>
+  );
+}
+
+export function UpdateSection({ updates, onToast }: UpdateSectionProps) {
+  const updateRows = updates.info
+    ? [
+        { target: 'ompchamber' as const, info: updates.info.ompchamber },
+        { target: 'omp' as const, info: updates.info.omp },
+      ].filter(({ info }) => info.updateAvailable && info.latest !== null)
+    : [];
+
+  const handleApply = async (target: UpdateTarget) => {
+    const result = await updates.apply(target);
+    if (!onToast) return;
+
+    if (!result) {
+      onToast('The update request could not be completed.', 'error');
+      return;
+    }
+
+    if (target === 'ompchamber') {
+      // `manual` means the environment cannot self-update and the message is
+      // the command to run — action required, not a success.
+      onToast(result.message, result.success ? 'success' : 'error');
+      return;
+    }
+
+    if (result.success) {
+      onToast(`${result.message} A restart may be needed.`, 'success');
+    } else {
+      onToast(result.message, 'error');
+    }
+  };
+
+  const showResult = Boolean(updates.info && !updates.checking && !updates.error);
+
+  return (
+    <section className="mt-5 border-y border-ink/10 py-3 text-left" aria-labelledby="updates-heading">
+      <div className="flex items-center justify-between gap-3">
+        <h3 id="updates-heading" className="text-xs font-semibold text-ink">Updates</h3>
+        {updates.info && <span className="font-mono text-[9px] text-ink/40">checked</span>}
+      </div>
+
+      <div className="mt-2.5">
+        {updates.checking && (
+          <button type="button" disabled className={`${actionClassName} w-full justify-center`}>
+            <Loader2 size={13} className="animate-spin motion-reduce:animate-none" />
+            <span>Checking…</span>
+          </button>
+        )}
+
+        {updates.error && !updates.checking && (
+          <div className="flex items-start gap-2">
+            <AlertCircle size={14} className="mt-0.5 shrink-0 text-error" />
+            <div className="min-w-0 flex-1">
+              <p className="text-[11px] leading-4 text-error">{updates.error}</p>
+              <button
+                type="button"
+                onClick={() => void updates.check()}
+                className={`${actionClassName} mt-2`}
+              >
+                <RefreshCw size={12} />
+                <span>Retry</span>
+              </button>
+            </div>
+          </div>
+        )}
+
+        {!updates.info && !updates.checking && !updates.error && (
+          <button
+            type="button"
+            onClick={() => void updates.check()}
+            className={`${actionClassName} w-full justify-center`}
+          >
+            <RefreshCw size={13} />
+            <span>Check for updates</span>
+          </button>
+        )}
+
+        {showResult && updateRows.length === 0 && (
+          <div className="flex items-center justify-between gap-3">
+            <p className="flex items-center gap-1.5 text-[11px] text-success">
+              <Check size={13} />
+              <span>You&apos;re up to date</span>
+            </p>
+            <button
+              type="button"
+              onClick={() => void updates.check()}
+              className={actionClassName}
+            >
+              <RefreshCw size={12} />
+              <span>Check again</span>
+            </button>
+          </div>
+        )}
+
+        {showResult && updateRows.length > 0 && (
+          <div>
+            {updateRows.map(({ target, info }) => (
+              <UpdateRow
+                key={target}
+                target={target}
+                info={info}
+                applying={updates.applying === target}
+                disabled={updates.applying !== null}
+                onApply={(selectedTarget) => void handleApply(selectedTarget)}
+              />
+            ))}
+            <button
+              type="button"
+              onClick={() => void updates.check()}
+              disabled={updates.applying !== null}
+              className={`${actionClassName} mt-2 w-full justify-center`}
+            >
+              <RefreshCw size={12} />
+              <span>Check again</span>
+            </button>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}

package/src/client/components/layout/session-sidebar/about-modal/index.tsx

@@ -0,0 +1,63 @@
+import { X } from 'lucide-preact';
+import packageJson from '@/../package.json';
+import type { UseUpdatesResult } from '@/client/hooks/ui/updates';
+import { SocialLinks } from '@/client/components/layout/session-sidebar/about-modal/SocialLinks';
+import { UpdateSection } from '@/client/components/layout/session-sidebar/about-modal/UpdateSection';
+
+export interface AboutModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  updates: UseUpdatesResult;
+  onToast?: (message: string, type?: 'success' | 'error') => void;
+}
+
+export function AboutModal({ isOpen, onClose, updates, onToast }: AboutModalProps) {
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className="fixed inset-0 bg-ink/40 backdrop-blur-[2px] z-50 flex items-center justify-center p-4 animate-in fade-in duration-200"
+      onClick={onClose}
+    >
+      <div
+        className="relative bg-paper border border-ink/15 rounded-2xl shadow-2xl w-full max-w-[340px] p-6 text-center text-ink select-none"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Close Button */}
+        <button
+          onClick={onClose}
+          className="absolute top-4 right-4 text-ink/40 hover:text-ink transition-colors p-1 rounded-md"
+          aria-label="Close"
+        >
+          <X size={18} className="stroke-[2.5]" />
+        </button>
+
+        {/* OMP Chamber Brand Logo */}
+        <div className="flex justify-center pt-2 pb-1">
+          <img src="/icon.svg" alt="OMPChamber" width={96} height={96} draggable={false} />
+        </div>
+
+        {/* Title */}
+        <h2 className="text-xl font-bold tracking-tight mt-3 flex items-center justify-center">
+          <span className="text-transparent bg-clip-text bg-gradient-to-r from-orange-600 to-amber-500 font-extrabold text-2xl tracking-tighter">OMP</span>
+          <span className="text-ink text-2xl font-bold ml-[1px]">Chamber</span>
+        </h2>
+
+        {/* App & Agent Versions */}
+        <div className="text-xs text-ink/60 space-y-1 mt-1.5 font-mono">
+          <p>OMPChamber v{packageJson.version}</p>
+          <p>Oh-My-Pi {updates.info?.omp.current ?? '…'}</p>
+        </div>
+
+        <UpdateSection updates={updates} onToast={onToast} />
+
+        <SocialLinks />
+
+        {/* Footer */}
+        <p className="text-[11px] text-ink/50 font-normal mt-8">
+          Made with love for the community
+        </p>
+      </div>
+    </div>
+  );
+}

package/src/client/components/layout/session-sidebar/index.tsx

@@ -0,0 +1,174 @@
+import { useState } from 'preact/hooks';
+import { useSearchParams } from '@/client/lib/router/search-params';
+import { AboutModal, NewWorkspaceModal, SchedulerModal, SettingsModal } from '@/client/components/layout/session-sidebar/Modals';
+import { SessionSidebarHeader } from '@/client/components/layout/session-sidebar/Header';
+import { SessionSidebarToolbar } from '@/client/components/layout/session-sidebar/Toolbar';
+import { SessionSidebarFooter } from '@/client/components/layout/session-sidebar/Footer';
+import { SessionSidebarSessionList } from '@/client/components/layout/session-sidebar/SessionList';
+import { SessionListSkeleton } from '@/client/components/layout/session-sidebar/Skeleton';
+import { ToastStack } from '@/client/components/common/ToastStack';
+import { spawnCwdForNewSession, triggerSessionPrewarm } from '@/shared/lib/omp/session/prewarm';
+import { useScrollbarFade } from '@/client/hooks/ui/scrollbar-fade';
+import { useToasts } from '@/client/hooks/ui/toasts';
+import { useUpdates } from '@/client/hooks/ui/updates';
+import { useSessionSidebarController } from '@/client/hooks/chat/omp/session-sidebar-controller';
+
+export function SessionSidebar({ className = '', onClose, appSettings = {} }: { className?: string, onClose?: () => void, appSettings?: Record<string, any> }) {
+  const {
+    folders,
+    initializing,
+    refresh,
+    activeSessionId,
+    sessionParam,
+    searchQuery,
+    setSearchQuery,
+    showArchived,
+    setShowArchived,
+    optionsOpen,
+    setOptionsOpen,
+    sortOption,
+    handleSortChange,
+    processedFolders,
+    sessionStatus,
+    handleSelectSession,
+  } = useSessionSidebarController(appSettings, { includePendingSessions: true });
+  const [, setSearchParams] = useSearchParams();
+
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const [infoOpen, setInfoOpen] = useState(false);
+
+  // Modals for new workspace and scheduler
+  const [newWorkspaceOpen, setNewWorkspaceOpen] = useState(false);
+  const [schedulerOpen, setSchedulerOpen] = useState(false);
+  const updates = useUpdates();
+  const { toasts, pushToast, dismissToast } = useToasts();
+
+  // Sidebar inline states
+  const [isSearchVisible, setIsSearchVisible] = useState(false);
+
+  const { isScrolling, handleScroll } = useScrollbarFade();
+
+  /** The folder whose context a new session will inherit — same resolution
+   *  the send path uses, so the prewarmed cwd matches the spawn cwd. */
+  const prewarmForNewSession = (folderId?: number) => {
+    const cwd = spawnCwdForNewSession(folders, sessionParam, folderId);
+    if (cwd) triggerSessionPrewarm(cwd, appSettings.omp_access_mode);
+  };
+
+  const handleNewSession = () => {
+    prewarmForNewSession();
+    setSearchParams(prev => {
+      const currentSessionId = prev.get('sessionId');
+      const next = new URLSearchParams(prev);
+      // Client-side pending session: shown immediately with a default title;
+      // the real omp session id replaces it on first send.
+      next.set('sessionId', `new-${Date.now()}`);
+      if (currentSessionId) {
+        const currentFolder = folders.find(f => f.sessions?.some((s: any) => String(s.id) === String(currentSessionId)));
+        if (currentFolder) {
+          next.set('folderId', currentFolder.id.toString());
+        }
+      } else {
+        next.delete('folderId');
+      }
+      return next;
+    }, { replace: true });
+  };
+
+  const handleNewSessionForFolder = (folderId: number) => {
+    prewarmForNewSession(folderId);
+    setSearchParams(prev => {
+      const next = new URLSearchParams(prev);
+      next.set('sessionId', `new-${Date.now()}`);
+      next.set('folderId', folderId.toString());
+      return next;
+    }, { replace: true });
+  };
+
+  return (
+    <>
+      <aside className={`flex flex-col bg-paper h-full ${className}`}>
+        <SessionSidebarHeader onNewSession={handleNewSession} />
+
+        <SessionSidebarToolbar
+          isSearchVisible={isSearchVisible}
+          searchQuery={searchQuery}
+          showArchived={showArchived}
+          optionsOpen={optionsOpen}
+          sortOption={sortOption}
+          onToggleSearch={() => setIsSearchVisible(!isSearchVisible)}
+          onSearchChange={setSearchQuery}
+          onToggleArchived={() => setShowArchived(!showArchived)}
+          onHideArchived={() => setShowArchived(false)}
+          onToggleOptions={() => setOptionsOpen(!optionsOpen)}
+          onCloseOptions={() => setOptionsOpen(false)}
+          onSortChange={handleSortChange}
+          onNewWorkspace={() => setNewWorkspaceOpen(true)}
+          onScheduler={() => setSchedulerOpen(true)}
+          onRefresh={refresh}
+          onClose={onClose}
+        />
+
+        {initializing ? (
+          <SessionListSkeleton />
+        ) : (
+          <SessionSidebarSessionList
+            folders={processedFolders}
+            activeSessionId={activeSessionId}
+            searchQuery={searchQuery}
+            showArchived={showArchived}
+            sessionStatus={sessionStatus}
+            isScrolling={isScrolling}
+            onScroll={handleScroll}
+            onSelectSession={handleSelectSession}
+            onNewSessionForFolder={handleNewSessionForFolder}
+          />
+        )}
+
+        <SessionSidebarFooter
+          onSettings={() => setSettingsOpen(true)}
+          onInfo={() => setInfoOpen(true)}
+          updateAvailable={updates.hasUpdate}
+          onUpdateClick={() => {
+            setInfoOpen(true);
+            void updates.check();
+          }}
+        />
+      </aside>
+
+      {/* Settings Modal */}
+      <SettingsModal isOpen={settingsOpen} onClose={() => setSettingsOpen(false)} appSettings={appSettings} />
+
+      {/* Info Modal */}
+      <AboutModal
+        isOpen={infoOpen}
+        onClose={() => setInfoOpen(false)}
+        updates={updates}
+        onToast={pushToast}
+      />
+
+      {/* New Workspace Modal */}
+      <NewWorkspaceModal
+        isOpen={newWorkspaceOpen}
+        onClose={() => setNewWorkspaceOpen(false)}
+        onCreate={async ({ name, path }) => {
+          const res = await fetch('/api/folders', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ name, path }),
+          });
+          const data = await res.json().catch(() => ({}));
+          if (!res.ok || !data.success) {
+            throw new Error(data.error || `HTTP ${res.status}`);
+          }
+          window.location.reload();
+        }}
+      />
+
+      {/* Scheduler Modal */}
+      <SchedulerModal isOpen={schedulerOpen} onClose={() => setSchedulerOpen(false)} />
+
+      <ToastStack toasts={toasts} onDismiss={dismissToast} />
+    </>
+  );
+}