Make the app an installable PWA with phone layout and Web Push

Add a generated manifest, icon set, offline page and service worker that never caches authenticated HTML, plus install and update UI. Turn the rail into a drawer below md with container-query internals, dvh and safe-area handling, and reconnect the socket after visibility/network changes. Add Web Push subscriptions, presence-aware delivery, notification settings and tests.

src/pages/admin/bots/[bot_id]/(partials)/bot-profile-modal.tsx

@@ -30,7 +30,7 @@ export default function BotProfileModal({ bot }: Props) {
             image_media_id={bot.image_media_id}
             hue={(bot.hue || null) as BotHue | null}
             face={(bot.face || "idle") as BotFace}
-            size={40}
+            size={35}
         />
     );
 
@@ -65,7 +65,9 @@ export default function BotProfileModal({ bot }: Props) {
                         : `${name}'s core instructions apply everywhere. What it does in one workspace is set on that workspace's page.`}
                 </Span>
             </Stack>
-            {open ? <BotForm bot={bot} onCancel={() => setOpen(false)} /> : null}
+            {open ? (
+                <BotForm bot={bot} onCancel={() => setOpen(false)} />
+            ) : null}
         </Modal>
     );
 }

src/pages/admin/bots/[bot_id]/(partials)/composer-attachments.tsx

@@ -14,7 +14,7 @@ export default function ComposerAttachments({ pending, onRemove }: Props) {
     if (!pending.length) return null;
 
     return (
-        <Row className="w-full max-w-container mx-auto gap-2! px-6 pb-3">
+        <Row className="w-full max-w-container mx-auto gap-2! px-3 md:px-6 pb-3">
             {pending.map((item) => (
                 <ComposerAttachmentChip
                     key={item.key}

src/pages/admin/bots/[bot_id]/(partials)/composer-tools.tsx

@@ -38,7 +38,7 @@ export default function ComposerTools({ bot, workspace_id, initial }: Props) {
     if (!has_tools && !computers.length) return null;
 
     return (
-        <Row className="w-full max-w-container mx-auto gap-1.5! items-center px-6 pb-3 -mt-3">
+        <Row className="w-full max-w-container mx-auto gap-1.5! items-center px-3 md:px-6 pb-3 -mt-3">
             {has_tools ? (
                 <Span className="text-[12px] leading-4 text-ink-secondary">
                     Tools

src/pages/admin/bots/[bot_id]/(partials)/composer.tsx

@@ -10,6 +10,7 @@ import type {
 import sendBotMessage from "../(functions)/send-bot-message";
 import useComposerAttachments from "../(hooks)/use-composer-attachments";
 import useComposerDraft from "../(hooks)/use-composer-draft";
+import useOnlineStatus from "@/src/hooks/use-online-status";
 import ComposerAttachButton from "./composer-attach-button";
 import ComposerAttachments from "./composer-attachments";
 import ComposerSendButton from "./composer-send-button";
@@ -40,11 +41,13 @@ export default function Composer({ bot, workspace_id, extensions, onSent }: Prop
     const [sending, setSending] = useState(false);
     const [error, setError] = useState<string>();
     const files = useComposerAttachments({ bot_id: bot.id, workspace_id });
+    const online = useOnlineStatus();
 
     const can_send =
         Boolean(text.trim() || files.media_ids.length) &&
         !sending &&
-        !files.uploading;
+        !files.uploading &&
+        online;
 
     async function send() {
         if (!can_send || !bot.id) return;
@@ -98,7 +101,7 @@ export default function Composer({ bot, workspace_id, extensions, onSent }: Prop
                 onRemove={files.remove}
             />
             <Stack className="shrink-0 gap-0! items-stretch border-0 border-t border-solid border-hairline">
-                <Row className="w-full max-w-container mx-auto h-[88px] gap-4! flex-nowrap items-center px-6">
+                <Row className="w-full max-w-container mx-auto h-[88px] gap-3! md:gap-4! flex-nowrap items-center px-3 md:px-6">
                     <ComposerAttachButton
                         disabled={files.full}
                         onFiles={files.add}

src/pages/admin/bots/[bot_id]/(partials)/conversation-header.tsx

@@ -15,6 +15,7 @@ import BotProfileModal from "./bot-profile-modal";
 import BotSessionsModal from "./bot-sessions-modal";
 import NewSessionButton from "./new-session-button";
 import HeaderIconButton from "@/src/components/general/header-icon-button";
+import RailDrawerButton from "@/src/layouts/bots/(partials)/rail-drawer-button";
 import HeaderMetaItem from "./header-meta-item";
 
 type Props = {
@@ -50,13 +51,14 @@ export default function ConversationHeader({ bot, workspace, has_other_unread, h
             : canManageCrew({ user_types: pageProps?.user_types });
 
     return (
-        <Row className="h-16 shrink-0 gap-3! flex-nowrap items-center px-6 border-0 border-b border-solid border-hairline">
+        <Row className="h-16 shrink-0 gap-2! md:gap-3! flex-nowrap items-center px-3 md:px-6 border-0 border-b border-solid border-hairline">
+            <RailDrawerButton />
             <BotProfileModal bot={bot} />
             <Stack className="min-w-0 gap-0!">
                 <H1 className="text-lg! leading-6! tracking-normal! font-bold text-ink truncate w-full">
                     {bot.name}
                 </H1>
-                <Row className="min-w-0 w-full gap-x-3! gap-y-0! flex-nowrap">
+                <Row className="hidden md:flex min-w-0 w-full gap-x-3! gap-y-0! flex-nowrap">
                     {workspace?.id ? (
                         <HeaderMetaItem icon={Layers} label="Workspace" text={workspace.name || "Workspace"} />
                     ) : null}
@@ -86,19 +88,23 @@ export default function ConversationHeader({ bot, workspace, has_other_unread, h
                 />
                 <NewSessionButton bot_id={Number(bot.id)} workspace_id={workspace?.id || null} />
                 <BotComputersModal bot={bot} workspace_name={workspace?.id ? workspace.name || "This workspace" : null} />
-                <BotModelsModal
-                    key={bot.id}
-                    bot={bot}
-                    workspace={workspace}
-                    harnesses={harnesses}
-                    onSaved={setHarnesses}
-                />
-                {can_open_settings ? (
-                    <HeaderIconButton
-                        icon={Settings}
-                        title={`${bot.name || "This bot"}'s settings`}
-                        href={`/admin/settings/bots/${bot.id}`}
+                <span className="hidden md:inline-flex">
+                    <BotModelsModal
+                        key={bot.id}
+                        bot={bot}
+                        workspace={workspace}
+                        harnesses={harnesses}
+                        onSaved={setHarnesses}
                     />
+                </span>
+                {can_open_settings ? (
+                    <span className="hidden md:inline-flex">
+                        <HeaderIconButton
+                            icon={Settings}
+                            title={`${bot.name || "This bot"}'s settings`}
+                            href={`/admin/settings/bots/${bot.id}`}
+                        />
+                    </span>
                 ) : null}
             </Row>
         </Row>

src/pages/admin/bots/[bot_id]/(partials)/message-thread.tsx

@@ -39,7 +39,7 @@ export default function MessageThread({ bot, messages, progress, reply_progress,
                 role="log"
                 aria-live="polite"
                 aria-label={`Conversation with ${bot.name}`}
-                className="w-full max-w-container mx-auto gap-4! items-stretch px-6 pt-6 pb-6"
+                className="w-full max-w-container mx-auto gap-4! items-stretch px-3 md:px-6 pt-6 pb-6"
             >
                 {groups.map((group) => (
                     <MessageGroupBlock