groupchat 0.0.2

package/dist/App-LF2NVQZQ.js

@@ -0,0 +1,1717 @@
+import {
+  getConfig,
+  getCurrentToken,
+  isAuthenticated,
+  login,
+  logout
+} from "./chunk-ZYY5PLDM.js";
+
+// src/components/App.tsx
+import { useState as useState5, useEffect as useEffect7, useCallback as useCallback4, useRef as useRef3 } from "react";
+import { Box as Box10, useApp, useInput as useInput4, useStdout as useStdout4 } from "ink";
+
+// src/components/LoginScreen.tsx
+import { useEffect } from "react";
+import { Box, Text, useInput, useStdout } from "ink";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function LoginScreen({ onLogin, status, isLoading }) {
+  const { stdout } = useStdout();
+  useEffect(() => {
+    if (!stdout) return;
+    stdout.write("\x1B]0;Welcome to Groupchatty\x07");
+  }, [stdout]);
+  useInput((input, key) => {
+    if (key.return && !isLoading) {
+      onLogin();
+    }
+  });
+  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", alignItems: "center", justifyContent: "center", padding: 2, children: [
+    /* @__PURE__ */ jsx(Box, { marginBottom: 2, children: /* @__PURE__ */ jsx(Text, { color: "redBright", bold: true, children: `
+  \u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2557  \u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2557   \u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2557  \u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2557  \u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2557   \u2588\u2588\u2557
+ \u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255D \u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2554\u2550\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2551   \u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255D\u2588\u2588\u2551  \u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u255A\u2550\u2550\u2588\u2588\u2554\u2550\u2550\u255D\u255A\u2550\u2550\u2588\u2588\u2554\u2550\u2550\u255D\u255A\u2588\u2588\u2557 \u2588\u2588\u2554\u255D
+ \u2588\u2588\u2551  \u2588\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u2588\u2588\u2551   \u2588\u2588\u2551\u2588\u2588\u2551   \u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u2588\u2588\u2551     \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2551   \u2588\u2588\u2551      \u2588\u2588\u2551    \u255A\u2588\u2588\u2588\u2588\u2554\u255D 
+ \u2588\u2588\u2551   \u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2551   \u2588\u2588\u2551\u2588\u2588\u2551   \u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u2550\u255D \u2588\u2588\u2551     \u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2551   \u2588\u2588\u2551      \u2588\u2588\u2551     \u255A\u2588\u2588\u2554\u255D  
+ \u255A\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u2588\u2588\u2551  \u2588\u2588\u2551\u255A\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u255A\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u2588\u2588\u2551     \u255A\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2551  \u2588\u2588\u2551\u2588\u2588\u2551  \u2588\u2588\u2551   \u2588\u2588\u2551      \u2588\u2588\u2551      \u2588\u2588\u2551   
+  \u255A\u2550\u2550\u2550\u2550\u2550\u255D \u255A\u2550\u255D  \u255A\u2550\u255D \u255A\u2550\u2550\u2550\u2550\u2550\u255D  \u255A\u2550\u2550\u2550\u2550\u2550\u255D \u255A\u2550\u255D      \u255A\u2550\u2550\u2550\u2550\u2550\u255D\u255A\u2550\u255D  \u255A\u2550\u255D\u255A\u2550\u255D  \u255A\u2550\u255D   \u255A\u2550\u255D      \u255A\u2550\u255D      \u255A\u2550\u255D   
+                                          G R O U P C H A T 
+` }) }),
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        borderStyle: "single",
+        borderColor: "redBright",
+        paddingX: 4,
+        paddingY: 1,
+        flexDirection: "column",
+        alignItems: "center",
+        children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Text, { color: "yellow", children: status || "Authenticating..." }),
+          /* @__PURE__ */ jsx(Box, { marginTop: 1, children: /* @__PURE__ */ jsx(Text, { color: "gray", children: "Please complete login in your browser..." }) })
+        ] }) : status ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Text, { color: "red", children: status }),
+          /* @__PURE__ */ jsxs(Box, { marginTop: 1, children: [
+            /* @__PURE__ */ jsx(Text, { color: "gray", children: "Press " }),
+            /* @__PURE__ */ jsx(Text, { color: "cyan", bold: true, children: "Enter" }),
+            /* @__PURE__ */ jsx(Text, { color: "gray", children: " to try again" })
+          ] })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Text, { color: "redBright", children: "Welcome to Groupchat!" }),
+          /* @__PURE__ */ jsxs(Box, { marginTop: 1, children: [
+            /* @__PURE__ */ jsx(Text, { color: "gray", children: "Press " }),
+            /* @__PURE__ */ jsx(Text, { color: "green", bold: true, children: "Enter" }),
+            /* @__PURE__ */ jsx(Text, { color: "gray", children: " to login with your browser" })
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(Box, { marginTop: 2, children: /* @__PURE__ */ jsx(Text, { color: "gray", children: "Ctrl+C to exit" }) })
+  ] });
+}
+
+// src/components/Menu.tsx
+import { useState, useEffect as useEffect2, useMemo } from "react";
+import { Box as Box3, Text as Text3, useInput as useInput2, useStdout as useStdout2 } from "ink";
+
+// src/components/Header.tsx
+import { Box as Box2, Text as Text2 } from "ink";
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function Header({
+  username,
+  roomName,
+  connectionStatus,
+  title,
+  showStatus = true
+}) {
+  const statusColor = connectionStatus === "connected" ? "green" : connectionStatus === "connecting" ? "yellow" : "red";
+  const statusText = connectionStatus === "connected" ? "ONLINE" : connectionStatus === "connecting" ? "CONNECTING" : "OFFLINE";
+  return /* @__PURE__ */ jsxs2(
+    Box2,
+    {
+      borderStyle: "single",
+      borderColor: "gray",
+      paddingX: 1,
+      justifyContent: "space-between",
+      width: "100%",
+      flexShrink: 0,
+      children: [
+        /* @__PURE__ */ jsx2(Box2, { children: title || /* @__PURE__ */ jsxs2(Fragment2, { children: [
+          /* @__PURE__ */ jsxs2(Text2, { color: "cyan", bold: true, children: [
+            "$",
+            " "
+          ] }),
+          /* @__PURE__ */ jsx2(Text2, { color: "blue", bold: true, children: "groupchat" }),
+          /* @__PURE__ */ jsx2(Text2, { color: "gray", children: " --session " }),
+          /* @__PURE__ */ jsx2(Text2, { color: "yellow", children: username || "..." })
+        ] }) }),
+        /* @__PURE__ */ jsxs2(Box2, { children: [
+          showStatus && /* @__PURE__ */ jsxs2(Fragment2, { children: [
+            /* @__PURE__ */ jsxs2(Text2, { color: statusColor, children: [
+              "[",
+              statusText,
+              "]"
+            ] }),
+            /* @__PURE__ */ jsx2(Text2, { color: "gray", children: " " })
+          ] }),
+          /* @__PURE__ */ jsx2(Text2, { color: "gray", children: "[Ctrl+O: LOGOUT]" })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/Menu.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function Menu({
+  width,
+  height,
+  currentChannel,
+  onChannelSelect,
+  onBack,
+  username,
+  connectionStatus,
+  onLogout,
+  topPadding = 0,
+  publicChannels,
+  privateChannels,
+  unreadCounts
+}) {
+  const { stdout } = useStdout2();
+  const sortedPublicChannels = useMemo(() => {
+    return [...publicChannels].sort((a, b) => a.id.localeCompare(b.id));
+  }, [publicChannels]);
+  const allChannels = useMemo(() => {
+    return [...sortedPublicChannels, ...privateChannels];
+  }, [sortedPublicChannels, privateChannels]);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  useEffect2(() => {
+    if (allChannels.length > 0) {
+      const currentIndex = allChannels.findIndex((c) => c.slug === currentChannel);
+      setSelectedIndex(currentIndex >= 0 ? currentIndex : 0);
+    }
+  }, [allChannels, currentChannel]);
+  useEffect2(() => {
+    if (!stdout) return;
+    stdout.write(`\x1B]0;Menu\x07`);
+  }, [stdout]);
+  useInput2((input, key) => {
+    if (key.escape) {
+      onBack();
+      return;
+    }
+    if (key.upArrow) {
+      setSelectedIndex((prev) => Math.max(0, prev - 1));
+      return;
+    }
+    if (key.downArrow) {
+      setSelectedIndex((prev) => Math.min(allChannels.length - 1, prev + 1));
+      return;
+    }
+    if (key.return && allChannels.length > 0) {
+      const selected = allChannels[selectedIndex];
+      if (selected) {
+        onChannelSelect(selected.slug);
+        onBack();
+      }
+    }
+  });
+  const headerHeight = 3;
+  const contentHeight = height - topPadding - headerHeight;
+  const privateStartIndex = sortedPublicChannels.length;
+  return /* @__PURE__ */ jsxs3(
+    Box3,
+    {
+      flexDirection: "column",
+      width,
+      height,
+      overflow: "hidden",
+      paddingTop: topPadding,
+      children: [
+        /* @__PURE__ */ jsx3(
+          Header,
+          {
+            username,
+            roomName: "Menu",
+            connectionStatus,
+            onLogout,
+            title: /* @__PURE__ */ jsx3(Text3, { bold: true, color: "cyan", children: "Menu" }),
+            showStatus: false
+          }
+        ),
+        /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", height: contentHeight, padding: 2, children: [
+          sortedPublicChannels.length > 0 && /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", marginBottom: 1, children: [
+            /* @__PURE__ */ jsx3(Box3, { marginBottom: 1, children: /* @__PURE__ */ jsx3(Text3, { bold: true, color: "white", children: "Global Channels" }) }),
+            sortedPublicChannels.map((channel, idx) => {
+              const isSelected = selectedIndex === idx;
+              const unreadCount = unreadCounts[channel.slug] || 0;
+              return /* @__PURE__ */ jsx3(
+                ChannelItem,
+                {
+                  channel,
+                  isSelected,
+                  unreadCount
+                },
+                channel.id
+              );
+            })
+          ] }),
+          privateChannels.length > 0 && /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", marginBottom: 1, children: [
+            /* @__PURE__ */ jsx3(Box3, { marginBottom: 1, children: /* @__PURE__ */ jsx3(Text3, { bold: true, color: "white", children: "Private Channels" }) }),
+            privateChannels.map((channel, idx) => {
+              const absoluteIndex = privateStartIndex + idx;
+              const isSelected = selectedIndex === absoluteIndex;
+              const unreadCount = unreadCounts[channel.slug] || 0;
+              return /* @__PURE__ */ jsx3(
+                ChannelItem,
+                {
+                  channel,
+                  isSelected,
+                  isPrivate: true,
+                  unreadCount
+                },
+                channel.id
+              );
+            })
+          ] }),
+          allChannels.length === 0 && /* @__PURE__ */ jsx3(Box3, { children: /* @__PURE__ */ jsx3(Text3, { color: "gray", children: "No channels available" }) }),
+          /* @__PURE__ */ jsx3(Box3, { flexGrow: 1 }),
+          /* @__PURE__ */ jsxs3(
+            Box3,
+            {
+              flexDirection: "column",
+              borderStyle: "single",
+              borderColor: "gray",
+              paddingX: 1,
+              children: [
+                /* @__PURE__ */ jsxs3(Text3, { color: "gray", children: [
+                  /* @__PURE__ */ jsx3(Text3, { color: "cyan", children: "Up/Down" }),
+                  " Navigate channels"
+                ] }),
+                /* @__PURE__ */ jsxs3(Text3, { color: "gray", children: [
+                  /* @__PURE__ */ jsx3(Text3, { color: "cyan", children: "Enter" }),
+                  " Join selected channel"
+                ] }),
+                /* @__PURE__ */ jsxs3(Text3, { color: "gray", children: [
+                  /* @__PURE__ */ jsx3(Text3, { color: "cyan", children: "ESC" }),
+                  " Back to chat"
+                ] }),
+                /* @__PURE__ */ jsxs3(Text3, { color: "gray", children: [
+                  /* @__PURE__ */ jsx3(Text3, { color: "cyan", children: "Ctrl+C" }),
+                  " Exit the app"
+                ] })
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function ChannelItem({ channel, isSelected, isPrivate = false, unreadCount = 0 }) {
+  return /* @__PURE__ */ jsxs3(Box3, { marginLeft: 2, children: [
+    /* @__PURE__ */ jsxs3(Text3, { color: isSelected ? "green" : "white", bold: isSelected, children: [
+      isSelected ? "> " : "  ",
+      isPrivate && /* @__PURE__ */ jsx3(Text3, { color: "yellow", children: "\u{1F512} " }),
+      "#",
+      channel.name || channel.slug,
+      unreadCount > 0 && /* @__PURE__ */ jsxs3(Text3, { color: "green", bold: true, children: [
+        " ",
+        "(",
+        unreadCount,
+        ")"
+      ] })
+    ] }),
+    isSelected && channel.description && /* @__PURE__ */ jsxs3(Text3, { color: "gray", dimColor: true, children: [
+      " ",
+      "- ",
+      channel.description
+    ] })
+  ] });
+}
+
+// src/components/ChatView.tsx
+import { useEffect as useEffect4 } from "react";
+import { Box as Box9, Text as Text9, useStdout as useStdout3 } from "ink";
+
+// src/components/MessageList.tsx
+import { useMemo as useMemo2 } from "react";
+import { Box as Box5, Text as Text5 } from "ink";
+
+// src/components/MessageItem.tsx
+import { Box as Box4, Text as Text4 } from "ink";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function getUsernameColor(username) {
+  const colors = [
+    "cyan",
+    "magenta",
+    "yellow",
+    "blue",
+    "green",
+    "red"
+  ];
+  let hash = 0;
+  for (let i = 0; i < username.length; i++) {
+    hash = username.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return colors[Math.abs(hash) % colors.length];
+}
+function formatTime(timestamp) {
+  const date = new Date(timestamp);
+  return date.toLocaleTimeString("en-US", {
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: true
+  });
+}
+function MessageItem({ message, isOwnMessage }) {
+  const time = formatTime(message.timestamp);
+  const usernameColor = getUsernameColor(message.username);
+  if (isOwnMessage) {
+    return /* @__PURE__ */ jsx4(Box4, { justifyContent: "flex-end", paddingY: 0, children: /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", alignItems: "flex-end", children: [
+      /* @__PURE__ */ jsxs4(Box4, { children: [
+        /* @__PURE__ */ jsxs4(Text4, { color: "gray", children: [
+          "[",
+          time,
+          "] "
+        ] }),
+        /* @__PURE__ */ jsx4(Text4, { color: usernameColor, bold: true, children: message.username }),
+        /* @__PURE__ */ jsx4(Text4, { color: "gray", children: " \u2192" })
+      ] }),
+      /* @__PURE__ */ jsx4(Box4, { paddingLeft: 2, children: /* @__PURE__ */ jsx4(Text4, { children: message.content }) })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx4(Box4, { justifyContent: "flex-start", paddingY: 0, children: /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsxs4(Box4, { children: [
+      /* @__PURE__ */ jsx4(Text4, { color: "gray", children: "\u2190 " }),
+      /* @__PURE__ */ jsx4(Text4, { color: usernameColor, bold: true, children: message.username }),
+      /* @__PURE__ */ jsxs4(Text4, { color: "gray", children: [
+        " [",
+        time,
+        "]"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx4(Box4, { paddingLeft: 2, children: /* @__PURE__ */ jsx4(Text4, { children: message.content }) })
+  ] }) });
+}
+
+// src/components/MessageList.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function MessageList({
+  messages,
+  currentUsername,
+  typingUsers,
+  height,
+  scrollOffset,
+  isDetached
+}) {
+  const othersTyping = typingUsers.filter((u) => u !== currentUsername);
+  const visibleMessages = useMemo2(() => {
+    const linesPerMessage = 2;
+    const maxMessages = Math.floor(height / linesPerMessage);
+    const endIndex = messages.length - scrollOffset;
+    const startIndex = Math.max(0, endIndex - maxMessages);
+    return messages.slice(startIndex, endIndex);
+  }, [messages, height, scrollOffset]);
+  return /* @__PURE__ */ jsxs5(
+    Box5,
+    {
+      flexDirection: "column",
+      height,
+      paddingX: 1,
+      overflow: "hidden",
+      children: [
+        /* @__PURE__ */ jsx5(Box5, { flexGrow: 1 }),
+        messages.length === 0 ? /* @__PURE__ */ jsx5(Box5, { justifyContent: "center", paddingY: 2, children: /* @__PURE__ */ jsx5(Text5, { color: "gray", children: "No messages yet. Say hello!" }) }) : visibleMessages.map((message) => /* @__PURE__ */ jsx5(
+          MessageItem,
+          {
+            message,
+            isOwnMessage: message.username === currentUsername
+          },
+          message.id
+        )),
+        isDetached && /* @__PURE__ */ jsx5(Box5, { justifyContent: "center", children: /* @__PURE__ */ jsxs5(Text5, { color: "yellow", bold: true, children: [
+          "-- ",
+          scrollOffset,
+          " more below (\u2193 to scroll down) --"
+        ] }) }),
+        othersTyping.length > 0 && !isDetached && /* @__PURE__ */ jsx5(Box5, { paddingTop: 1, children: /* @__PURE__ */ jsx5(Text5, { color: "gray", italic: true, children: othersTyping.length === 1 ? `${othersTyping[0]} is typing...` : `${othersTyping.join(", ")} are typing...` }) })
+      ]
+    }
+  );
+}
+
+// src/components/UserList.tsx
+import { Box as Box6, Text as Text6 } from "ink";
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function UserList({
+  users,
+  currentUsername,
+  height,
+  isPrivateChannel = false
+}) {
+  const onlineCount = users.filter((u) => u.isOnline).length;
+  const offlineCount = users.filter((u) => !u.isOnline).length;
+  const sortedUsers = [...users].sort((a, b) => {
+    if (a.username === currentUsername) return -1;
+    if (b.username === currentUsername) return 1;
+    if (a.isOnline && !b.isOnline) return -1;
+    if (!a.isOnline && b.isOnline) return 1;
+    return 0;
+  });
+  return /* @__PURE__ */ jsxs6(
+    Box6,
+    {
+      flexDirection: "column",
+      flexShrink: 0,
+      borderStyle: "single",
+      borderColor: "gray",
+      width: 24,
+      height,
+      paddingX: 1,
+      children: [
+        /* @__PURE__ */ jsx6(Box6, { marginBottom: 1, children: isPrivateChannel ? /* @__PURE__ */ jsx6(Text6, { color: "white", bold: true, children: "MEMBERS" }) : /* @__PURE__ */ jsxs6(Fragment3, { children: [
+          /* @__PURE__ */ jsx6(Text6, { color: "green", bold: true, children: "\u25CF " }),
+          /* @__PURE__ */ jsx6(Text6, { color: "white", bold: true, children: "ONLINE USERS" })
+        ] }) }),
+        /* @__PURE__ */ jsx6(Box6, { marginBottom: 1, children: isPrivateChannel ? /* @__PURE__ */ jsxs6(Text6, { color: "cyan", children: [
+          "[",
+          onlineCount,
+          " online]"
+        ] }) : /* @__PURE__ */ jsxs6(Text6, { color: "cyan", children: [
+          "[",
+          onlineCount,
+          " connected]"
+        ] }) }),
+        /* @__PURE__ */ jsx6(Box6, { flexDirection: "column", children: sortedUsers.map((user) => {
+          const isTruncated = user.username.length > 8;
+          const displayName = isTruncated ? user.username.substring(0, 8) : user.username;
+          return /* @__PURE__ */ jsxs6(Box6, { children: [
+            /* @__PURE__ */ jsx6(Text6, { color: user.isOnline ? "green" : "gray", children: "\u25CF" }),
+            /* @__PURE__ */ jsx6(Text6, { children: " " }),
+            /* @__PURE__ */ jsxs6(Text6, { color: user.username === currentUsername ? "yellow" : "white", children: [
+              displayName,
+              isTruncated && "\u2026"
+            ] }),
+            user.username === currentUsername && /* @__PURE__ */ jsx6(Text6, { color: "gray", children: " (you)" })
+          ] }, user.username);
+        }) })
+      ]
+    }
+  );
+}
+
+// src/components/InputBox.tsx
+import { useState as useState2, useCallback, useRef, useEffect as useEffect3 } from "react";
+import { Box as Box7, Text as Text7 } from "ink";
+import TextInput from "ink-text-input";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+function InputBox({
+  onSend,
+  onTypingStart,
+  onTypingStop,
+  disabled
+}) {
+  const [value, setValue] = useState2("");
+  const [isSending, setIsSending] = useState2(false);
+  const typingTimeoutRef = useRef(null);
+  const isTypingRef = useRef(false);
+  const handleChange = useCallback(
+    (newValue) => {
+      setValue(newValue);
+      if (!isTypingRef.current && newValue.length > 0) {
+        isTypingRef.current = true;
+        onTypingStart();
+      }
+      if (typingTimeoutRef.current) {
+        clearTimeout(typingTimeoutRef.current);
+      }
+      if (newValue.length > 0) {
+        typingTimeoutRef.current = setTimeout(() => {
+          isTypingRef.current = false;
+          onTypingStop();
+        }, 2e3);
+      } else {
+        isTypingRef.current = false;
+        onTypingStop();
+      }
+    },
+    [onTypingStart, onTypingStop]
+  );
+  const handleSubmit = useCallback(async () => {
+    const trimmed = value.trim();
+    if (!trimmed || disabled || isSending) return;
+    setIsSending(true);
+    if (typingTimeoutRef.current) {
+      clearTimeout(typingTimeoutRef.current);
+    }
+    isTypingRef.current = false;
+    onTypingStop();
+    try {
+      await onSend(trimmed);
+      setValue("");
+    } catch {
+    } finally {
+      setIsSending(false);
+    }
+  }, [value, disabled, isSending, onSend, onTypingStop]);
+  useEffect3(() => {
+    return () => {
+      if (typingTimeoutRef.current) {
+        clearTimeout(typingTimeoutRef.current);
+      }
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs7(
+    Box7,
+    {
+      borderStyle: "single",
+      borderColor: "gray",
+      paddingX: 1,
+      flexDirection: "column",
+      width: "100%",
+      flexShrink: 0,
+      children: [
+        /* @__PURE__ */ jsxs7(Box7, { children: [
+          /* @__PURE__ */ jsx7(Text7, { color: "cyan", children: "$ " }),
+          /* @__PURE__ */ jsx7(Box7, { flexGrow: 1, children: /* @__PURE__ */ jsx7(
+            TextInput,
+            {
+              value,
+              onChange: handleChange,
+              onSubmit: handleSubmit,
+              placeholder: disabled ? "Connecting..." : "Type a message..."
+            }
+          ) }),
+          /* @__PURE__ */ jsxs7(Text7, { color: disabled || !value.trim() ? "gray" : "green", children: [
+            " ",
+            "[SEND]"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx7(Box7, { children: /* @__PURE__ */ jsx7(Text7, { color: "gray", dimColor: true, children: "Enter to send" }) })
+      ]
+    }
+  );
+}
+
+// src/components/StatusBar.tsx
+import { Box as Box8, Text as Text8 } from "ink";
+import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+function StatusBar({
+  connectionStatus,
+  error,
+  userCount
+}) {
+  const presenceText = connectionStatus === "connected" ? "Active" : connectionStatus === "connecting" ? "Connecting" : "Disconnected";
+  const presenceColor = connectionStatus === "connected" ? "green" : connectionStatus === "connecting" ? "yellow" : "red";
+  return /* @__PURE__ */ jsxs8(
+    Box8,
+    {
+      borderStyle: "single",
+      borderColor: "gray",
+      paddingX: 1,
+      justifyContent: "space-between",
+      width: "100%",
+      flexShrink: 0,
+      children: [
+        /* @__PURE__ */ jsx8(Box8, { children: error ? /* @__PURE__ */ jsxs8(Text8, { color: "red", children: [
+          "[Error: ",
+          error,
+          "]"
+        ] }) : /* @__PURE__ */ jsxs8(Fragment4, { children: [
+          /* @__PURE__ */ jsx8(Text8, { color: "gray", children: "\u2192 Presence: " }),
+          /* @__PURE__ */ jsx8(Text8, { color: presenceColor, children: presenceText })
+        ] }) }),
+        /* @__PURE__ */ jsxs8(Box8, { children: [
+          /* @__PURE__ */ jsx8(Text8, { color: "gray", children: "Users: " }),
+          /* @__PURE__ */ jsx8(Text8, { color: "cyan", children: userCount }),
+          /* @__PURE__ */ jsx8(Text8, { color: "gray", children: " | \u2191/\u2193 scroll | Ctrl+E users | Ctrl+C exit" })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/ChatView.tsx
+import { Fragment as Fragment5, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+function ChatView({
+  terminalSize,
+  currentChannel,
+  channelName,
+  channelDescription,
+  connectionStatus,
+  username,
+  onLogout,
+  messages,
+  typingUsers,
+  middleSectionHeight,
+  scrollOffset,
+  isDetached,
+  showUserList,
+  users,
+  isPrivateChannel = false,
+  topPadding = 0,
+  onSend,
+  onTypingStart,
+  onTypingStop,
+  error
+}) {
+  const { stdout } = useStdout3();
+  const displayName = channelName || currentChannel;
+  const displayText = channelDescription ? `${displayName} - ${channelDescription}` : displayName;
+  useEffect4(() => {
+    if (!stdout) return;
+    const prefix = connectionStatus === "connected" ? "\u2022 " : "";
+    stdout.write(`\x1B]0;${prefix}#${displayName}\x07`);
+  }, [stdout, connectionStatus, displayName]);
+  return /* @__PURE__ */ jsxs9(
+    Box9,
+    {
+      flexDirection: "column",
+      width: terminalSize.columns,
+      height: terminalSize.rows,
+      overflow: "hidden",
+      paddingTop: topPadding,
+      children: [
+        /* @__PURE__ */ jsx9(
+          Header,
+          {
+            username,
+            roomName: currentChannel,
+            connectionStatus,
+            onLogout,
+            title: /* @__PURE__ */ jsxs9(Fragment5, { children: [
+              /* @__PURE__ */ jsx9(Text9, { color: "gray", children: "\u2190 Menu " }),
+              /* @__PURE__ */ jsx9(Text9, { color: "gray", dimColor: true, children: "[CTRL+Q]" }),
+              /* @__PURE__ */ jsx9(Text9, { color: "gray", children: " | " }),
+              /* @__PURE__ */ jsxs9(Text9, { color: "cyan", bold: true, children: [
+                "#",
+                displayText
+              ] })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxs9(Box9, { flexDirection: "row", height: middleSectionHeight, overflow: "hidden", children: [
+          /* @__PURE__ */ jsx9(Box9, { flexGrow: 1, flexDirection: "column", overflow: "hidden", children: /* @__PURE__ */ jsx9(
+            MessageList,
+            {
+              messages,
+              currentUsername: username,
+              typingUsers,
+              height: middleSectionHeight,
+              scrollOffset,
+              isDetached
+            }
+          ) }),
+          showUserList && /* @__PURE__ */ jsx9(
+            UserList,
+            {
+              users,
+              currentUsername: username,
+              height: middleSectionHeight,
+              isPrivateChannel
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx9(
+          InputBox,
+          {
+            onSend,
+            onTypingStart,
+            onTypingStop,
+            disabled: connectionStatus !== "connected"
+          }
+        ),
+        /* @__PURE__ */ jsx9(
+          StatusBar,
+          {
+            connectionStatus,
+            error,
+            userCount: users.length
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/hooks/use-multi-channel-chat.ts
+import { useState as useState3, useCallback as useCallback2, useRef as useRef2, useEffect as useEffect5 } from "react";
+
+// src/lib/channel-manager.ts
+import { Socket } from "phoenix";
+if (typeof globalThis.WebSocket === "undefined") {
+  throw new Error(
+    "WebSocket is not available. Load the ws polyfill before ChannelManager."
+  );
+}
+function extractTimestampFromUUIDv7(uuid) {
+  const hex = uuid.replace(/-/g, "").slice(0, 12);
+  const ms = parseInt(hex, 16);
+  return new Date(ms).toISOString();
+}
+var MAX_REALTIME_MESSAGES_PER_CHANNEL = 100;
+var ChannelManager = class {
+  socket = null;
+  channelStates = /* @__PURE__ */ new Map();
+  callbacks;
+  wsUrl;
+  token;
+  connectionStatus = "disconnected";
+  currentActiveChannel = null;
+  username = null;
+  constructor(wsUrl, token, callbacks = {}) {
+    this.wsUrl = wsUrl;
+    this.token = token;
+    this.callbacks = callbacks;
+  }
+  /**
+   * Connect to the WebSocket and initialize the socket.
+   * Does not subscribe to any channels yet - use subscribeToChannels() for that.
+   */
+  async connect() {
+    this.setConnectionStatus("connecting");
+    this.socket = new Socket(this.wsUrl, {
+      params: { token: this.token },
+      reconnectAfterMs: (tries) => {
+        return [1e3, 2e3, 5e3, 1e4][tries - 1] || 1e4;
+      }
+    });
+    return new Promise((resolve, reject) => {
+      if (!this.socket) {
+        reject(new Error("Socket not initialized"));
+        return;
+      }
+      this.socket.onOpen(() => {
+        this.setConnectionStatus("connected");
+        resolve();
+      });
+      this.socket.onError((error) => {
+        this.setConnectionStatus("error");
+        this.callbacks.onError?.("Connection error");
+        reject(error);
+      });
+      this.socket.onClose(() => {
+        this.setConnectionStatus("disconnected");
+      });
+      this.socket.connect();
+    });
+  }
+  /**
+   * Subscribe to multiple channels simultaneously.
+   * Each channel will have its own ChannelState for tracking messages, presence, etc.
+   */
+  async subscribeToChannels(channels) {
+    if (!this.socket) {
+      throw new Error("Socket not connected. Call connect() first.");
+    }
+    const subscriptionPromises = channels.map(
+      (channel) => this.subscribeToChannel(channel.slug)
+    );
+    const results = await Promise.allSettled(subscriptionPromises);
+    results.forEach((result, index) => {
+      if (result.status === "rejected") {
+        const channelSlug = channels[index].slug;
+        console.error(`Failed to subscribe to ${channelSlug}:`, result.reason);
+        this.callbacks.onError?.(`Failed to join channel: ${channelSlug}`);
+      }
+    });
+  }
+  /**
+   * Subscribe to a single channel and setup event handlers.
+   */
+  async subscribeToChannel(channelSlug) {
+    if (!this.socket) {
+      throw new Error("Socket not connected");
+    }
+    const channel = this.socket.channel(channelSlug, {});
+    const channelState = {
+      slug: channelSlug,
+      channel,
+      presence: {},
+      typingUsers: /* @__PURE__ */ new Set(),
+      realtimeMessages: [],
+      subscribers: []
+    };
+    this.setupChannelHandlers(channel, channelSlug);
+    return new Promise((resolve, reject) => {
+      channel.join().receive("ok", (resp) => {
+        const response = resp;
+        if (response.username && !this.username) {
+          this.username = response.username;
+        }
+        this.channelStates.set(channelSlug, channelState);
+        this.callbacks.onChannelJoined?.(channelSlug, response.username || "");
+        resolve();
+      }).receive("error", (error) => {
+        const errorMsg = `Failed to join channel: ${channelSlug}`;
+        this.callbacks.onError?.(errorMsg);
+        reject(error);
+      }).receive("timeout", () => {
+        const errorMsg = `Timeout joining channel: ${channelSlug}`;
+        this.callbacks.onError?.(errorMsg);
+        reject(new Error("timeout"));
+      });
+    });
+  }
+  /**
+   * Setup event handlers for a specific channel.
+   * Handlers route events to the correct channel state and callbacks.
+   */
+  setupChannelHandlers(channel, channelSlug) {
+    channel.on("new_message", (payload) => {
+      const msg = payload;
+      const message = {
+        ...msg,
+        timestamp: extractTimestampFromUUIDv7(msg.id)
+      };
+      if (channelSlug === this.currentActiveChannel) {
+        this.callbacks.onMessage?.(channelSlug, message);
+      } else {
+        const state = this.channelStates.get(channelSlug);
+        if (state) {
+          state.realtimeMessages.push(message);
+          if (state.realtimeMessages.length > MAX_REALTIME_MESSAGES_PER_CHANNEL) {
+            state.realtimeMessages.shift();
+          }
+        }
+      }
+    });
+    channel.on("presence_state", (payload) => {
+      const state = payload;
+      const channelState = this.channelStates.get(channelSlug);
+      if (channelState) {
+        channelState.presence = state;
+      }
+      if (channelSlug === this.currentActiveChannel) {
+        this.callbacks.onPresenceState?.(channelSlug, state);
+      }
+    });
+    channel.on("presence_diff", (payload) => {
+      const diff = payload;
+      const channelState = this.channelStates.get(channelSlug);
+      if (channelState) {
+        const next = { ...channelState.presence };
+        Object.entries(diff.joins).forEach(([username, data]) => {
+          next[username] = data;
+        });
+        Object.keys(diff.leaves).forEach((username) => {
+          delete next[username];
+        });
+        channelState.presence = next;
+      }
+      if (channelSlug === this.currentActiveChannel) {
+        this.callbacks.onPresenceDiff?.(channelSlug, diff);
+      }
+    });
+    channel.on("user_typing_start", (payload) => {
+      const { username } = payload;
+      const channelState = this.channelStates.get(channelSlug);
+      if (channelState) {
+        channelState.typingUsers.add(username);
+      }
+      if (channelSlug === this.currentActiveChannel) {
+        this.callbacks.onUserTyping?.(channelSlug, username, true);
+      }
+    });
+    channel.on("user_typing_stop", (payload) => {
+      const { username } = payload;
+      const channelState = this.channelStates.get(channelSlug);
+      if (channelState) {
+        channelState.typingUsers.delete(username);
+      }
+      if (channelSlug === this.currentActiveChannel) {
+        this.callbacks.onUserTyping?.(channelSlug, username, false);
+      }
+    });
+  }
+  /**
+   * Set the currently active channel.
+   * This determines whether incoming messages are delivered immediately or buffered.
+   */
+  setActiveChannel(channelSlug) {
+    this.currentActiveChannel = channelSlug;
+  }
+  /**
+   * Fetch message history for a specific channel from the HTTP API.
+   */
+  async fetchHistory(channelSlug, limit = 50) {
+    const backendUrl = this.wsUrl.replace(/^wss:/, "https:").replace(/^ws:/, "http:").replace(/\/socket$/, "");
+    const encodedSlug = encodeURIComponent(channelSlug);
+    const url = `${backendUrl}/api/messages/${encodedSlug}?limit=${limit}`;
+    const response = await fetch(url, {
+      headers: {
+        Authorization: `Bearer ${this.token}`
+      }
+    });
+    if (!response.ok) {
+      throw new Error(`Failed to fetch message history: ${response.status}`);
+    }
+    const data = await response.json();
+    return data.messages || [];
+  }
+  /**
+   * Fetch and store subscriber list for a private channel.
+   * Only applicable to private channels.
+   */
+  async fetchSubscribers(channelSlug) {
+    if (!channelSlug.startsWith("private_room:")) {
+      return [];
+    }
+    const backendUrl = this.wsUrl.replace(/^wss:/, "https:").replace(/^ws:/, "http:").replace(/\/socket$/, "");
+    const encodedSlug = encodeURIComponent(channelSlug);
+    const url = `${backendUrl}/api/channels/${encodedSlug}/subscribers`;
+    const response = await fetch(url, {
+      headers: {
+        Authorization: `Bearer ${this.token}`
+      }
+    });
+    if (!response.ok) {
+      throw new Error(`Failed to fetch subscribers: ${response.status}`);
+    }
+    const data = await response.json();
+    const subscribers = data.subscribers || [];
+    const channelState = this.channelStates.get(channelSlug);
+    if (channelState) {
+      channelState.subscribers = subscribers;
+    }
+    return subscribers;
+  }
+  /**
+   * Get subscriber list for a specific channel.
+   */
+  getSubscribers(channelSlug) {
+    const channelState = this.channelStates.get(channelSlug);
+    return channelState?.subscribers || [];
+  }
+  /**
+   * Send a message to a specific channel.
+   */
+  async sendMessage(channelSlug, content) {
+    const channelState = this.channelStates.get(channelSlug);
+    if (!channelState) {
+      throw new Error(`Not subscribed to channel: ${channelSlug}`);
+    }
+    if (!this.socket || this.connectionStatus !== "connected") {
+      throw new Error("Connection lost");
+    }
+    const channel = channelState.channel;
+    return new Promise((resolve, reject) => {
+      channel.push("new_message", { content }).receive("ok", (resp) => {
+        const response = resp;
+        resolve(response);
+      }).receive("error", (err) => {
+        const error = err;
+        const errorMsg = error.reason || "Failed to send message";
+        this.callbacks.onError?.(errorMsg);
+        reject(new Error(errorMsg));
+      }).receive("timeout", () => {
+        const errorMsg = "Message send timeout";
+        this.callbacks.onError?.(errorMsg);
+        reject(new Error("timeout"));
+      });
+    });
+  }
+  /**
+   * Send typing:start event to a specific channel.
+   */
+  startTyping(channelSlug) {
+    if (this.connectionStatus !== "connected") return;
+    const channelState = this.channelStates.get(channelSlug);
+    if (!channelState) return;
+    try {
+      channelState.channel.push("typing:start", {});
+    } catch {
+    }
+  }
+  /**
+   * Send typing:stop event to a specific channel.
+   */
+  stopTyping(channelSlug) {
+    if (this.connectionStatus !== "connected") return;
+    const channelState = this.channelStates.get(channelSlug);
+    if (!channelState) return;
+    try {
+      channelState.channel.push("typing:stop", {});
+    } catch {
+    }
+  }
+  /**
+   * Get presence state for a specific channel.
+   */
+  getPresence(channelSlug) {
+    const channelState = this.channelStates.get(channelSlug);
+    return channelState?.presence || {};
+  }
+  /**
+   * Get buffered real-time messages for a specific channel.
+   * These are messages that arrived while viewing other channels.
+   */
+  getRealtimeMessages(channelSlug) {
+    const channelState = this.channelStates.get(channelSlug);
+    return channelState?.realtimeMessages || [];
+  }
+  /**
+   * Clear buffered real-time messages for a specific channel.
+   * Called after merging with fetched history.
+   */
+  clearRealtimeMessages(channelSlug) {
+    const channelState = this.channelStates.get(channelSlug);
+    if (channelState) {
+      channelState.realtimeMessages = [];
+    }
+  }
+  /**
+   * Get typing users for a specific channel.
+   */
+  getTypingUsers(channelSlug) {
+    const channelState = this.channelStates.get(channelSlug);
+    return channelState ? Array.from(channelState.typingUsers) : [];
+  }
+  /**
+   * Get the current connection status.
+   */
+  getConnectionStatus() {
+    return this.connectionStatus;
+  }
+  /**
+   * Get the username (same across all channels).
+   */
+  getUsername() {
+    return this.username;
+  }
+  /**
+   * Check if connected.
+   */
+  isConnected() {
+    return this.connectionStatus === "connected" && !!this.socket;
+  }
+  /**
+   * Mark current channel as read via WebSocket.
+   * Sends "mark_as_read" event to update last_seen to current seq_no.
+   * Gracefully handles disconnected channels (returns silently during shutdown).
+   */
+  async markChannelAsRead(channelSlug) {
+    const channelState = this.channelStates.get(channelSlug);
+    if (!channelState || !channelState.channel) {
+      return;
+    }
+    return new Promise((resolve, reject) => {
+      channelState.channel.push("mark_as_read", {}).receive("ok", (response) => {
+        console.log(`Marked ${channelSlug} as read`, response);
+        resolve();
+      }).receive("error", (err) => {
+        console.error(`Failed to mark ${channelSlug} as read:`, err);
+        reject(err);
+      }).receive("timeout", () => {
+        console.error(`Timeout marking ${channelSlug} as read`);
+        reject(new Error("timeout"));
+      });
+    });
+  }
+  /**
+   * Mark all messages in channel as read (used when first joining).
+   * Gracefully handles disconnected channels (returns silently during shutdown).
+   */
+  async markAllMessagesAsRead(channelSlug) {
+    const channelState = this.channelStates.get(channelSlug);
+    if (!channelState || !channelState.channel) {
+      return;
+    }
+    return new Promise((resolve, reject) => {
+      channelState.channel.push("mark_all_read", {}).receive("ok", (response) => {
+        console.log(`Marked all in ${channelSlug} as read`, response);
+        resolve();
+      }).receive("error", (err) => {
+        console.error(`Failed to mark all as read in ${channelSlug}:`, err);
+        reject(err);
+      }).receive("timeout", () => {
+        console.error(`Timeout marking all as read in ${channelSlug}`);
+        reject(new Error("timeout"));
+      });
+    });
+  }
+  /**
+   * Disconnect from all channels and close the socket.
+   */
+  disconnect() {
+    this.channelStates.forEach((state) => {
+      try {
+        state.channel.leave();
+      } catch {
+      }
+    });
+    if (this.socket) {
+      this.socket.disconnect();
+      this.socket = null;
+    }
+    this.channelStates.clear();
+    this.currentActiveChannel = null;
+    this.username = null;
+    this.setConnectionStatus("disconnected");
+  }
+  /**
+   * Set connection status and notify callback.
+   */
+  setConnectionStatus(status) {
+    this.connectionStatus = status;
+    this.callbacks.onConnectionChange?.(status);
+  }
+};
+
+// src/lib/chat-client.ts
+import { Socket as Socket2 } from "phoenix";
+if (typeof globalThis.WebSocket === "undefined") {
+  throw new Error(
+    "WebSocket is not available. Load the ws polyfill before ChatClient."
+  );
+}
+async function fetchChannels(wsUrl, token) {
+  const backendUrl = wsUrl.replace(/^wss:/, "https:").replace(/^ws:/, "http:").replace(/\/socket$/, "");
+  const url = `${backendUrl}/api/channels`;
+  const response = await fetch(url, {
+    headers: {
+      Authorization: `Bearer ${token}`
+    }
+  });
+  if (!response.ok) {
+    throw new Error(`Failed to fetch channels: ${response.status}`);
+  }
+  return response.json();
+}
+async function fetchUnreadCounts(wsUrl, token) {
+  const backendUrl = wsUrl.replace(/^wss:/, "https:").replace(/^ws:/, "http:").replace(/\/socket$/, "");
+  const url = `${backendUrl}/api/unread-counts`;
+  const response = await fetch(url, {
+    headers: {
+      Authorization: `Bearer ${token}`
+    }
+  });
+  if (!response.ok) {
+    throw new Error(`Failed to fetch unread counts: ${response.status}`);
+  }
+  const data = await response.json();
+  return data.unread_counts || {};
+}
+
+// src/hooks/use-multi-channel-chat.ts
+function useMultiChannelChat(token, currentChannel) {
+  const [messages, setMessages] = useState3([]);
+  const [connectionStatus, setConnectionStatus] = useState3("disconnected");
+  const [username, setUsername] = useState3(null);
+  const [error, setError] = useState3(null);
+  const [typingUsers, setTypingUsers] = useState3([]);
+  const [presenceState, setPresenceState] = useState3({});
+  const [subscribers, setSubscribers] = useState3([]);
+  const managerRef = useRef2(null);
+  const prevChannelRef = useRef2(null);
+  const isLoadingHistory = useRef2(false);
+  useEffect5(() => {
+    if (!token) {
+      if (managerRef.current) {
+        managerRef.current.disconnect();
+        managerRef.current = null;
+      }
+      return;
+    }
+    if (managerRef.current) {
+      return;
+    }
+    const config = getConfig();
+    const manager = new ChannelManager(
+      config.wsUrl,
+      token,
+      {
+        onMessage: (channelSlug, message) => {
+          setMessages((prev) => [...prev, message]);
+        },
+        onPresenceState: (channelSlug, state) => {
+          setPresenceState(state);
+        },
+        onPresenceDiff: (channelSlug, diff) => {
+          setPresenceState((prev) => {
+            const next = { ...prev };
+            Object.entries(diff.joins).forEach(([username2, data]) => {
+              next[username2] = data;
+            });
+            Object.keys(diff.leaves).forEach((username2) => {
+              delete next[username2];
+            });
+            return next;
+          });
+        },
+        onUserTyping: (channelSlug, username2, typing) => {
+          setTypingUsers((prev) => {
+            if (typing) {
+              return prev.includes(username2) ? prev : [...prev, username2];
+            } else {
+              return prev.filter((u) => u !== username2);
+            }
+          });
+        },
+        onConnectionChange: (status) => {
+          setConnectionStatus(status);
+          if (status === "disconnected" || status === "error") {
+            setError(null);
+          }
+        },
+        onError: (err) => {
+          setError(err);
+        },
+        onChannelJoined: (channelSlug, joinedUsername) => {
+          if (!username) {
+            setUsername(joinedUsername);
+          }
+        }
+      }
+    );
+    managerRef.current = manager;
+    const authToken = token;
+    async function init() {
+      if (!authToken) {
+        return;
+      }
+      try {
+        await manager.connect();
+        const channelsResponse = await fetchChannels(config.wsUrl, authToken);
+        const allChannels = [
+          ...channelsResponse.channels.public,
+          ...channelsResponse.channels.private
+        ];
+        await manager.subscribeToChannels(allChannels);
+        setError(null);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Connection failed");
+        console.error("Failed to initialize multi-channel chat:", err);
+      }
+    }
+    init();
+    return () => {
+      if (managerRef.current) {
+        managerRef.current.disconnect();
+        managerRef.current = null;
+      }
+    };
+  }, [token]);
+  useEffect5(() => {
+    const manager = managerRef.current;
+    if (!manager || !manager.isConnected() || !currentChannel) {
+      return;
+    }
+    if (prevChannelRef.current && prevChannelRef.current !== currentChannel) {
+      manager.stopTyping(prevChannelRef.current);
+    }
+    prevChannelRef.current = currentChannel;
+    manager.setActiveChannel(currentChannel);
+    async function loadHistory() {
+      if (isLoadingHistory.current || !manager) return;
+      isLoadingHistory.current = true;
+      try {
+        const history = await manager.fetchHistory(currentChannel);
+        if (currentChannel.startsWith("private_room:")) {
+          const subs = await manager.fetchSubscribers(currentChannel);
+          setSubscribers(subs);
+        } else {
+          setSubscribers([]);
+        }
+        const realtimeMessages = manager.getRealtimeMessages(currentChannel);
+        const merged = [...history, ...realtimeMessages];
+        const seen = /* @__PURE__ */ new Set();
+        const deduplicated = merged.filter((msg) => {
+          if (seen.has(msg.id)) return false;
+          seen.add(msg.id);
+          return true;
+        });
+        deduplicated.sort((a, b) => a.timestamp.localeCompare(b.timestamp));
+        setMessages(deduplicated);
+        manager.clearRealtimeMessages(currentChannel);
+        const presence = manager.getPresence(currentChannel);
+        setPresenceState(presence);
+        const typing = manager.getTypingUsers(currentChannel);
+        setTypingUsers(typing);
+        setError(null);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Failed to load history");
+        console.error("Failed to load message history:", err);
+      } finally {
+        isLoadingHistory.current = false;
+      }
+    }
+    loadHistory();
+  }, [currentChannel, connectionStatus]);
+  const sendMessage = useCallback2(
+    async (content) => {
+      if (!managerRef.current) {
+        throw new Error("Not connected");
+      }
+      await managerRef.current.sendMessage(currentChannel, content);
+    },
+    [currentChannel]
+  );
+  const startTyping = useCallback2(() => {
+    managerRef.current?.startTyping(currentChannel);
+  }, [currentChannel]);
+  const stopTyping = useCallback2(() => {
+    managerRef.current?.stopTyping(currentChannel);
+  }, [currentChannel]);
+  const connect = useCallback2(() => {
+  }, []);
+  const disconnect = useCallback2(() => {
+  }, []);
+  return {
+    messages,
+    connectionStatus,
+    username,
+    error,
+    sendMessage,
+    startTyping,
+    stopTyping,
+    typingUsers,
+    presenceState,
+    subscribers,
+    connect,
+    // No-op for backward compatibility
+    disconnect,
+    // No-op for backward compatibility
+    channelManager: managerRef.current
+  };
+}
+
+// src/hooks/use-presence.ts
+import { useMemo as useMemo3 } from "react";
+function presenceToUsers(presence) {
+  return Object.entries(presence).map(([username, data]) => ({
+    username,
+    user_id: data.metas[0]?.user_id ?? 0,
+    online_at: data.metas[0]?.online_at || ""
+  }));
+}
+function mergeSubscribersWithPresence(subscribers, presence, isPrivateChannel) {
+  if (!isPrivateChannel) {
+    const onlineUsers = presenceToUsers(presence);
+    return onlineUsers.map((user) => ({
+      ...user,
+      isOnline: true
+    }));
+  }
+  const onlineUsernames = new Set(Object.keys(presence));
+  return subscribers.map((subscriber) => {
+    const isOnline = onlineUsernames.has(subscriber.username);
+    return {
+      username: subscriber.username,
+      user_id: subscriber.user_id,
+      online_at: isOnline ? presence[subscriber.username].metas[0]?.online_at || "" : "",
+      isOnline
+    };
+  });
+}
+function usePresence(presenceState, subscribers = [], currentChannel = "") {
+  const isPrivateChannel = currentChannel.startsWith("private_room:");
+  const users = useMemo3(
+    () => mergeSubscribersWithPresence(subscribers, presenceState, isPrivateChannel),
+    [presenceState, subscribers, isPrivateChannel]
+  );
+  return { users };
+}
+
+// src/hooks/use-channels.ts
+import { useState as useState4, useCallback as useCallback3, useEffect as useEffect6 } from "react";
+function useChannels(token) {
+  const [publicChannels, setPublicChannels] = useState4([]);
+  const [privateChannels, setPrivateChannels] = useState4([]);
+  const [unreadCounts, setUnreadCounts] = useState4({});
+  const [loading, setLoading] = useState4(false);
+  const [error, setError] = useState4(null);
+  const fetchData = useCallback3(async () => {
+    if (!token) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const config = getConfig();
+      const [channelsData, unreadData] = await Promise.all([
+        fetchChannels(config.wsUrl, token),
+        fetchUnreadCounts(config.wsUrl, token)
+      ]);
+      setPublicChannels(channelsData.channels.public);
+      setPrivateChannels(channelsData.channels.private);
+      setUnreadCounts(unreadData);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to fetch data");
+    } finally {
+      setLoading(false);
+    }
+  }, [token]);
+  const refetchUnreadCounts = useCallback3(async () => {
+    if (!token) return;
+    try {
+      const config = getConfig();
+      const unreadData = await fetchUnreadCounts(config.wsUrl, token);
+      setUnreadCounts(unreadData);
+    } catch (err) {
+      console.error("Failed to refetch unread counts:", err);
+    }
+  }, [token]);
+  useEffect6(() => {
+    if (token) {
+      fetchData();
+    }
+  }, [token, fetchData]);
+  return {
+    publicChannels,
+    privateChannels,
+    unreadCounts,
+    loading,
+    error,
+    refetch: fetchData,
+    refetchUnreadCounts
+  };
+}
+
+// src/components/App.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+function App() {
+  const { exit } = useApp();
+  const { stdout } = useStdout4();
+  const isWarp = process.env.TERM_PROGRAM === "WarpTerminal";
+  const topPadding = isWarp ? 1 : 0;
+  const [authState, setAuthState] = useState5("unauthenticated");
+  const [authStatus, setAuthStatus] = useState5("");
+  const [token, setToken] = useState5(null);
+  const [terminalSize, setTerminalSize] = useState5({
+    rows: stdout?.rows || 24,
+    columns: stdout?.columns || 80
+  });
+  const [scrollOffset, setScrollOffset] = useState5(0);
+  const [isScrollDetached, setIsScrollDetached] = useState5(false);
+  const [showUserList, setShowUserList] = useState5(true);
+  const [currentView, setCurrentView] = useState5("menu");
+  const [currentChannel, setCurrentChannel] = useState5("chat_room:global");
+  const prevAuthStateRef = useRef3(null);
+  useEffect7(() => {
+    if (!stdout) return;
+    const handleResize = () => {
+      setTerminalSize({
+        rows: stdout.rows || 24,
+        columns: stdout.columns || 80
+      });
+    };
+    stdout.on("resize", handleResize);
+    return () => {
+      stdout.off("resize", handleResize);
+    };
+  }, [stdout]);
+  useEffect7(() => {
+    if (!stdout) return;
+    if (prevAuthStateRef.current === "authenticated" && authState !== "authenticated") {
+      stdout.write("\x1B[2J\x1B[0f");
+    }
+    prevAuthStateRef.current = authState;
+  }, [authState, stdout]);
+  useEffect7(() => {
+    async function checkAuth() {
+      const authenticated = await isAuthenticated();
+      if (authenticated) {
+        const stored = await getCurrentToken();
+        if (stored) {
+          setToken(stored.token);
+          setAuthState("authenticated");
+        }
+      }
+    }
+    checkAuth();
+  }, []);
+  const { publicChannels, privateChannels, unreadCounts, refetchUnreadCounts } = useChannels(token);
+  const {
+    messages,
+    connectionStatus,
+    username,
+    error,
+    sendMessage,
+    startTyping,
+    stopTyping,
+    typingUsers,
+    presenceState,
+    subscribers,
+    connect,
+    disconnect,
+    channelManager
+  } = useMultiChannelChat(token, currentChannel);
+  const { users } = usePresence(presenceState, subscribers, currentChannel);
+  const allChannels = [...publicChannels, ...privateChannels];
+  const currentChannelDetails = allChannels.find((ch) => ch.slug === currentChannel);
+  const isPrivateChannel = currentChannel.startsWith("private_room:");
+  const prevChannelForMarkAsReadRef = useRef3(null);
+  const markedAsReadOnEntryRef = useRef3(/* @__PURE__ */ new Set());
+  useEffect7(() => {
+    const markChannelAsRead = async (channelSlug, isEntry) => {
+      if (!channelManager) {
+        return;
+      }
+      try {
+        if (isEntry) {
+          if (!markedAsReadOnEntryRef.current.has(channelSlug)) {
+            await channelManager.markAllMessagesAsRead(channelSlug);
+            markedAsReadOnEntryRef.current.add(channelSlug);
+          } else {
+            await channelManager.markChannelAsRead(channelSlug);
+          }
+        } else {
+          await channelManager.markChannelAsRead(channelSlug);
+        }
+        await refetchUnreadCounts();
+      } catch (err) {
+        console.error(`Failed to mark ${channelSlug} as read:`, err);
+      }
+    };
+    if (currentChannel !== prevChannelForMarkAsReadRef.current) {
+      if (prevChannelForMarkAsReadRef.current) {
+        markChannelAsRead(prevChannelForMarkAsReadRef.current, false);
+      }
+      if (currentChannel) {
+        markChannelAsRead(currentChannel, true);
+      }
+      prevChannelForMarkAsReadRef.current = currentChannel;
+    }
+  }, [currentChannel, channelManager, refetchUnreadCounts]);
+  useEffect7(() => {
+    return () => {
+      if (currentChannel && channelManager) {
+        const markOnUnmount = async () => {
+          try {
+            await channelManager.markChannelAsRead(currentChannel);
+          } catch (err) {
+            console.error("Failed to mark as read on unmount:", err);
+          }
+        };
+        markOnUnmount();
+      }
+    };
+  }, [currentChannel, channelManager]);
+  useEffect7(() => {
+    if (currentView === "menu") {
+      refetchUnreadCounts();
+    }
+  }, [currentView, refetchUnreadCounts]);
+  const handleLogin = useCallback4(async () => {
+    setAuthState("authenticating");
+    setAuthStatus("Starting login...");
+    const result = await login((status) => setAuthStatus(status));
+    if (result.success) {
+      const stored = await getCurrentToken();
+      if (stored) {
+        setToken(stored.token);
+        setAuthState("authenticated");
+        setAuthStatus("");
+      }
+    } else {
+      setAuthState("unauthenticated");
+      setAuthStatus(result.error || "Login failed");
+    }
+  }, []);
+  const handleLogout = useCallback4(async () => {
+    if (currentChannel && channelManager) {
+      try {
+        await channelManager.markChannelAsRead(currentChannel);
+      } catch (err) {
+        console.error("Failed to mark as read on logout:", err);
+      }
+    }
+    disconnect();
+    setToken(null);
+    setAuthState("unauthenticated");
+    setAuthStatus("");
+    try {
+      await logout();
+    } catch {
+      setAuthStatus("Logged out locally; failed to clear credentials.");
+    }
+  }, [disconnect, currentChannel, channelManager]);
+  const headerHeight = 3;
+  const inputBoxHeight = 4;
+  const statusBarHeight = 1;
+  const middleSectionHeight = Math.max(
+    5,
+    terminalSize.rows - topPadding - headerHeight - inputBoxHeight - statusBarHeight
+  );
+  const linesPerMessage = 2;
+  const maxVisibleMessages = Math.floor(middleSectionHeight / linesPerMessage);
+  useInput4((input, key) => {
+    if (input === "c" && key.ctrl) {
+      const handleExit = async () => {
+        if (currentChannel && channelManager) {
+          try {
+            await channelManager.markChannelAsRead(currentChannel);
+          } catch (err) {
+            console.error("Failed to mark as read on exit:", err);
+          }
+        }
+        disconnect();
+        exit();
+      };
+      handleExit();
+    }
+    if (input === "o" && key.ctrl && authState === "authenticated") {
+      handleLogout();
+    }
+    if (input === "e" && key.ctrl && authState === "authenticated") {
+      setShowUserList((prev) => !prev);
+    }
+    if (input === "q" && key.ctrl && authState === "authenticated" && currentView === "chat") {
+      setCurrentView("menu");
+    }
+    if (authState === "authenticated") {
+      const maxOffset = Math.max(0, messages.length - maxVisibleMessages);
+      if (key.upArrow) {
+        setScrollOffset((prev) => {
+          const newOffset = Math.min(prev + 1, maxOffset);
+          if (newOffset > 0) {
+            setIsScrollDetached(true);
+          }
+          return newOffset;
+        });
+      }
+      if (key.downArrow) {
+        setScrollOffset((prev) => {
+          const newOffset = Math.max(prev - 1, 0);
+          if (newOffset === 0) {
+            setIsScrollDetached(false);
+          }
+          return newOffset;
+        });
+      }
+    }
+  });
+  if (authState !== "authenticated") {
+    return /* @__PURE__ */ jsx10(
+      Box10,
+      {
+        flexDirection: "column",
+        width: terminalSize.columns,
+        height: terminalSize.rows,
+        overflow: "hidden",
+        children: /* @__PURE__ */ jsx10(
+          LoginScreen,
+          {
+            onLogin: handleLogin,
+            status: authStatus,
+            isLoading: authState === "authenticating"
+          }
+        )
+      }
+    );
+  }
+  if (currentView === "menu") {
+    return /* @__PURE__ */ jsx10(
+      Box10,
+      {
+        flexDirection: "column",
+        width: terminalSize.columns,
+        height: terminalSize.rows,
+        overflow: "hidden",
+        children: /* @__PURE__ */ jsx10(
+          Menu,
+          {
+            width: terminalSize.columns,
+            height: terminalSize.rows,
+            currentChannel,
+            onChannelSelect: setCurrentChannel,
+            onBack: () => setCurrentView("chat"),
+            username,
+            connectionStatus,
+            onLogout: handleLogout,
+            topPadding,
+            publicChannels,
+            privateChannels,
+            unreadCounts
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx10(
+    ChatView,
+    {
+      terminalSize,
+      currentChannel,
+      channelName: currentChannelDetails?.name,
+      channelDescription: currentChannelDetails?.description || void 0,
+      connectionStatus,
+      username,
+      onLogout: handleLogout,
+      messages,
+      typingUsers,
+      middleSectionHeight,
+      scrollOffset,
+      isDetached: isScrollDetached,
+      showUserList,
+      users,
+      isPrivateChannel,
+      topPadding,
+      onSend: sendMessage,
+      onTypingStart: startTyping,
+      onTypingStop: stopTyping,
+      error
+    }
+  );
+}
+export {
+  App
+};