claude-who

  on("ui.render", { component: "Pane" }, ($, e, next) => {
    if (e.requestId !== ID || !app || e.surface === "mobile") return next(e);
    const { Box, Text, Button, Select, Input } = $.ui.resolve(e),
      pane = app;
    const columns = e.props.bodyColumns;
    if (columns < 34)
      return (
        <Text dimColor>
          Widen the pane to 34 columns to see the leaderboard.
        </Text>
      );
    const rows =
      pane.fresh || e.props.scroll.bodyRows === 0
        ? 26
        : e.props.scroll.bodyRows;
    pane.fresh = false;
    const defer = (fn: () => Promise<unknown>) =>
      pane.host.defer(() => {
        void fn().catch(() => {});
      });
    const title = (
      <Text bold color="cyan" wrap="truncate-end">
        CLAUDE WHO / {clean(pane.data?.groupName || "Your circle")}
      </Text>
    );
    if (pane.form === "messages" || pane.form === "compose") {
      const message = pane.currentMessage;
      const friends = pane.recipients;
      if (pane.form === "compose" && !pane.reply && friends.length === 0)
        return (
          <Box flexDirection="column" width={columns}>
            {title}
            <Text bold>New private message</Text>
            <Text>
              {pane.loading
                ? "Loading group members…"
                : pane.error
                  ? "Could not load recipients. Try refreshing."
                  : !pane.data
                    ? "Loading group members…"
                    : "No other members in this group. Invite a friend first."}
            </Text>
            <Box flexDirection="row" columnGap={1}>
              <Button
                key="refresh-recipients"
                label="Refresh members"
                onPress={() => {
                  void pane.refresh();
                }}
              />
              <Button
                key="compose-back"
                label="Back"
                onPress={() => pane.edit("messages")}
              />
            </Box>
            {pane.error ? <Text color="yellow">{pane.error}</Text> : null}
          </Box>
        );
      const text = Array.from(
        (message?.text ?? "").replace(
          /[\x00-\x1f\x7f-\x9f\u202a-\u202e\u2066-\u2069]/g,
          " ",
        ),
      );
      const width = Math.max(16, columns - 4),
        pageSize = width * Math.max(1, Math.min(5, rows - 14));
      const pages = Math.max(1, Math.ceil(text.length / pageSize));
      pane.messagePage = Math.min(pane.messagePage, pages - 1);
      const shown = text.slice(
        pane.messagePage * pageSize,
        (pane.messagePage + 1) * pageSize,
      );
      const lines = Array.from(
        { length: Math.ceil(shown.length / width) },
        (_, i) => shown.slice(i * width, (i + 1) * width).join(""),
      );
      return (
        <Box flexDirection="column" width={columns}>
          {title}
          <Text bold>
            {pane.form === "compose"
              ? pane.reply
                ? `Reply to ${clean(pane.reply.senderName)}`
                : "New private message"
              : `Messages · ${pane.messages.length} pending`}
          </Text>
          <Text dimColor>
            Private to recipient · expires in 24h · no history
          </Text>
          {pane.form === "compose" ? (
            <Box flexDirection="column">
              {pane.reply ? (
                <Text dimColor wrap="truncate-end">
                  {clean(pane.reply.text)}
                </Text>
              ) : (
                <Select
                  key="message-recipient"
                  label="To"
                  value={pane.recipientId || "choose-recipient"}
                  options={[
                    ...(!pane.recipientId
                      ? [
                          {
                            label: "Choose a friend",
                            value: "choose-recipient",
                          },
                        ]
                      : []),
                    ...friends.map((m) => ({ label: m.name, value: m.id })),
                  ]}
                  onSelect={(v) =>
                    pane.chooseRecipient(v === "choose-recipient" ? "" : v)
                  }
                />
              )}
              <Input
                key="message-draft"
                label="Message"
                placeholder="Say hello…"
                value={pane.draft}
                autoFocus
                submitLabel="send"
                onInput={(v) => {
                  if (pane.actionBusy) return;
                  pane.draft = v.slice(0, 1000);
                }}
                onSubmit={(v) => {
                  if (pane.actionBusy) return;
                  pane.draft = v.slice(0, 1000);
                  pane.send();
                }}
              />
              <Box flexDirection="row" columnGap={1}>
                <Button
                  key="send-message"
                  label={pane.actionBusy ? "Sending…" : "Send"}
                  onPress={() => pane.send()}
                />
                <Button
                  key="cancel-message"
                  label="Back"
                  onPress={() => {
                    if (!pane.actionBusy) pane.edit("messages");
                  }}
                />
              </Box>
            </Box>
          ) : (
            <Box flexDirection="column">
              {message ? (
                <Box flexDirection="column">
                  <Select
                    key="inbox-message"
                    label="From"
                    value={`${message.senderId}:${message.id}`}
                    options={pane.messages.map((m) => ({
                      label: `${clean(m.senderName)} · ${new Date(m.createdAt).toISOString().slice(11, 16)} UTC`,
                      value: `${m.senderId}:${m.id}`,