gloomberb 0.13.2 → 0.14.0

package/src/plugins/builtin/cloud/team/pane-ui.tsx

@@ -0,0 +1,325 @@
+import { createContext, useContext, useEffect, useState, type ReactNode } from "react";
+import type { TeamAccentColor, TeamSummary } from "../../../../api-client";
+import { Button, Checkbox, TextField, type ButtonVariant } from "../../../../components";
+import { colors } from "../../../../theme/colors";
+import { Box, Span, Text, TextAttributes } from "../../../../ui";
+import { TEAM_ACCENT_COLORS, teamAccentHex, teamPrefix } from "./model";
+
+/**
+ * Every control in the pane registers under a field id. The pane keeps one
+ * active id and walks the ring with Tab and the arrows; Enter fires the
+ * registered action. Mouse users click; keyboard users never leave the pane.
+ */
+export interface TeamPaneFocus {
+  activeField: string | null;
+  setActiveField: (id: string) => void;
+  /** True while the pane itself has focus; inputs only take keys then. */
+  focused: boolean;
+  register: (id: string, action: (() => void) | null) => () => void;
+}
+
+export const TeamPaneFocusContext = createContext<TeamPaneFocus>({
+  activeField: null,
+  setActiveField: () => {},
+  focused: false,
+  register: () => () => {},
+});
+
+export function useTeamPaneFocus(): TeamPaneFocus {
+  return useContext(TeamPaneFocusContext);
+}
+
+function useFieldAction(id: string, action: (() => void) | null) {
+  const { register } = useTeamPaneFocus();
+  useEffect(() => register(id, action), [action, id, register]);
+}
+
+/** A labeled single-line input, part of the keyboard ring. */
+export function PaneField({
+  id,
+  label,
+  value,
+  placeholder,
+  width,
+  labelWidth = 12,
+  onChange,
+  onSubmit,
+  hint,
+  hintWidth,
+}: {
+  id: string;
+  label: string;
+  value: string;
+  placeholder?: string;
+  width: number;
+  labelWidth?: number;
+  onChange: (value: string) => void;
+  onSubmit?: () => void;
+  hint?: string;
+  /** The hint may run wider than a short input; defaults to the field width. */
+  hintWidth?: number;
+}) {
+  const focus = useTeamPaneFocus();
+  const active = focus.activeField === id;
+  useFieldAction(id, null);
+  const inputWidth = Math.max(8, width - labelWidth - 1);
+  return (
+    <Box flexDirection="column" width={Math.max(width, hintWidth ?? 0)}>
+      <Box height={1} flexDirection="row" alignItems="center" gap={1} onMouseDown={() => focus.setActiveField(id)}>
+        <Text width={labelWidth} fg={active ? colors.textBright : colors.textDim} attributes={active ? TextAttributes.BOLD : 0}>
+          {`${active ? "> " : "  "}${label}`}
+        </Text>
+        <TextField
+          value={value}
+          placeholder={placeholder}
+          focused={focus.focused && active}
+          width={inputWidth}
+          onChange={onChange}
+          onSubmit={onSubmit}
+          onMouseDown={() => focus.setActiveField(id)}
+        />
+      </Box>
+      {hint ? (
+        <Box paddingLeft={labelWidth + 1} width={Math.max(width, hintWidth ?? 0)}>
+          <Text fg={colors.textMuted} wrapText width={Math.max(8, (hintWidth ?? width) - labelWidth - 1)}>{hint}</Text>
+        </Box>
+      ) : null}
+    </Box>
+  );
+}
+
+/** A button in the ring: highlighted when active, fired by Enter or a click. */
+export function PaneButton({
+  id,
+  label,
+  variant = "secondary",
+  disabled = false,
+  onPress,
+  width,
+}: {
+  id: string;
+  label: string;
+  variant?: ButtonVariant;
+  disabled?: boolean;
+  onPress: () => void;
+  width?: number;
+}) {
+  const focus = useTeamPaneFocus();
+  const active = focus.activeField === id;
+  useFieldAction(id, disabled ? null : onPress);
+  return (
+    <Button
+      label={label}
+      variant={variant}
+      active={active && !disabled}
+      disabled={disabled}
+      width={width}
+      stopPropagation
+      onPress={() => {
+        focus.setActiveField(id);
+        if (!disabled) onPress();
+      }}
+    />
+  );
+}
+
+export function PaneCheckbox({
+  id,
+  label,
+  description,
+  checked,
+  width,
+  onChange,
+}: {
+  id: string;
+  label: string;
+  description?: string;
+  checked: boolean;
+  width: number;
+  onChange: (checked: boolean) => void;
+}) {
+  const focus = useTeamPaneFocus();
+  const active = focus.activeField === id;
+  useFieldAction(id, () => onChange(!checked));
+  return (
+    <Box onMouseDown={() => focus.setActiveField(id)}>
+      <Checkbox
+        label={label}
+        description={description}
+        checked={checked}
+        active={active}
+        width={width}
+        onChange={(next) => {
+          focus.setActiveField(id);
+          onChange(next);
+        }}
+      />
+    </Box>
+  );
+}
+
+/**
+ * The accent picker shows every color as a swatch and marks the chosen one
+ * with a filled block, and it previews the team the way the rest of the app
+ * will show it: the sidebar header, the status chip, a tab marker.
+ */
+export function AccentPicker({
+  id,
+  value,
+  previewName,
+  previewShortName,
+  width,
+  labelWidth = 12,
+  onChange,
+}: {
+  id: string;
+  value: TeamAccentColor;
+  previewName: string;
+  previewShortName: string;
+  width: number;
+  labelWidth?: number;
+  onChange: (accent: TeamAccentColor) => void;
+}) {
+  const focus = useTeamPaneFocus();
+  const active = focus.activeField === id;
+  useFieldAction(id, null);
+  const team = { name: previewName || "Your team", shortName: previewShortName || "TM" };
+  const accent = teamAccentHex(value);
+  return (
+    <Box flexDirection="column" width={width} onMouseDown={() => focus.setActiveField(id)}>
+      <Box height={1} flexDirection="row" alignItems="center" gap={1}>
+        <Text width={labelWidth} fg={active ? colors.textBright : colors.textDim} attributes={active ? TextAttributes.BOLD : 0}>
+          {`${active ? "> " : "  "}Accent`}
+        </Text>
+        <Box flexDirection="row" gap={1}>
+          {TEAM_ACCENT_COLORS.map((candidate) => {
+            const selected = candidate === value;
+            const hex = teamAccentHex(candidate);
+            return (
+              <Box
+                key={candidate}
+                height={1}
+                cursor="pointer"
+                onMouseDown={(event: { stopPropagation?: () => void }) => {
+                  event.stopPropagation?.();
+                  focus.setActiveField(id);
+                  onChange(candidate);
+                }}
+              >
+                <Text fg={hex} attributes={selected ? TextAttributes.BOLD : 0}>
+                  {selected ? "▣" : "▢"}
+                </Text>
+              </Box>
+            );
+          })}
+        </Box>
+        <Text fg={accent} attributes={TextAttributes.BOLD}>{value}</Text>
+        {active ? <Text fg={colors.textMuted}>{"← →"}</Text> : null}
+      </Box>
+      <Box height={1} flexDirection="row" gap={2} paddingLeft={labelWidth + 1}>
+        <Text fg={accent}>{`${teamPrefix(team)} ${team.name}`}</Text>
+        <Text fg={colors.textDim}>
+          <Span fg={accent}>●</Span>
+          {` ${team.shortName}`}
+        </Text>
+        <Text fg={colors.textDim}>
+          <Span fg={accent}>▎</Span>
+          {"Main"}
+        </Text>
+      </Box>
+    </Box>
+  );
+}
+
+/**
+ * Destructive actions confirm in place: the button turns into the question
+ * and a pair of answers, so nothing pops over the pane.
+ */
+export function ConfirmAction({
+  id,
+  label,
+  question,
+  confirmLabel,
+  variant = "danger",
+  busy = false,
+  onConfirm,
+}: {
+  id: string;
+  label: string;
+  question: string;
+  confirmLabel: string;
+  variant?: ButtonVariant;
+  busy?: boolean;
+  onConfirm: () => void;
+}) {
+  const [armed, setArmed] = useState(false);
+  const focus = useTeamPaneFocus();
+  const active = focus.activeField === id;
+  useEffect(() => {
+    if (!active) setArmed(false);
+  }, [active]);
+  if (!armed) {
+    return <PaneButton id={id} label={label} variant={variant === "danger" ? "ghost" : variant} onPress={() => setArmed(true)} />;
+  }
+  return (
+    <Box flexDirection="row" gap={1} alignItems="center" flexShrink={0} height={1}>
+      <Text fg={colors.text}>{question}</Text>
+      <PaneButton
+        id={id}
+        label={busy ? "Working…" : confirmLabel}
+        variant={variant}
+        disabled={busy}
+        onPress={() => {
+          onConfirm();
+          setArmed(false);
+        }}
+      />
+      <Button label="Cancel" variant="ghost" compact stopPropagation onPress={() => setArmed(false)} />
+    </Box>
+  );
+}
+
+export function SectionTitle({ children, detail }: { children: string; detail?: string }) {
+  return (
+    <Box height={1} flexDirection="row" gap={1}>
+      <Text fg={colors.textBright} attributes={TextAttributes.BOLD}>{children}</Text>
+      {detail ? <Text fg={colors.textMuted}>{detail}</Text> : null}
+    </Box>
+  );
+}
+
+export function Muted({ children, width }: { children: ReactNode; width?: number }) {
+  return <Text fg={colors.textMuted} wrapText={width !== undefined} width={width}>{children}</Text>;
+}
+
+/** A row with a leading accent dot; used for members, invites, and channels. */
+export function AccentRow({
+  accent,
+  children,
+  width,
+}: {
+  accent: string;
+  children: ReactNode;
+  width: number;
+}) {
+  return (
+    <Box height={1} width={width} flexDirection="row" alignItems="center" gap={1} overflow="hidden">
+      <Text fg={accent} flexShrink={0}>●</Text>
+      {children}
+    </Box>
+  );
+}
+
+export function StatusLine({ message }: { message: { tone: "info" | "success" | "error"; text: string } | null }) {
+  if (!message) return null;
+  const fg = message.tone === "error" ? colors.negative : message.tone === "success" ? colors.positive : colors.textDim;
+  return (
+    <Box height={1}>
+      <Text fg={fg}>{message.text}</Text>
+    </Box>
+  );
+}
+
+export function teamHeaderColor(team: Pick<TeamSummary, "accentColor">): string {
+  return teamAccentHex(team.accentColor);
+}

package/src/plugins/builtin/cloud/team/pane.test.tsx

@@ -0,0 +1,196 @@
+import { afterEach, beforeEach, describe, expect, test } from "bun:test";
+import { act } from "react";
+import { apiClient, setCloudApiFetchTransport } from "../../../../api-client";
+import { testRender } from "../../../../renderers/opentui/test-utils";
+import { createTestPluginRuntime } from "../../../../test-support/plugin-runtime";
+import { PluginRenderProvider } from "../../../runtime";
+import { cleanupChatTest, installChatApiTestDefaults } from "../../chat/test-harness";
+import { TeamPane } from "./pane";
+import { requestTeamPaneView } from "./pane-request";
+import { teamStore } from "./store";
+
+type Setup = Awaited<ReturnType<typeof testRender>>;
+let setup: Setup | undefined;
+
+const macroDesk = {
+  id: "org-1",
+  name: "Macro Desk",
+  slug: "macro-desk",
+  accentColor: "magenta" as const,
+  shortName: "MD",
+  allowMemberInvites: false,
+  channelId: "team:org-1",
+  createdAt: "2026-09-14T12:00:00.000Z",
+  role: "owner" as const,
+  memberCount: 3,
+};
+
+const members = [
+  { id: "m-1", role: "owner", joinedAt: "2026-09-01T00:00:00.000Z", user: { id: "u0", username: "vince", displayName: "Vince" } },
+  { id: "m-2", role: "admin", joinedAt: "2026-09-02T00:00:00.000Z", user: { id: "u2", username: "lucas", displayName: "Lucas Bing" } },
+  { id: "m-3", role: "member", joinedAt: "2026-09-03T00:00:00.000Z", user: { id: "u3", username: "mikahk", displayName: "Mika" } },
+];
+
+function respond(path: string, method: string): unknown {
+  if (path === "/teams/org-1/members") return { team: macroDesk, members };
+  if (path === "/teams/org-1/invitations" && method === "GET") {
+    return { invitations: [{ id: "inv-1", status: "pending", role: "member", expiresAt: new Date(Date.now() + 6 * 86_400_000).toISOString(), createdAt: "2026-09-14T00:00:00.000Z", inviter: members[0]!.user, invitee: { id: "u9", username: "sneh", displayName: "Sneh" } }] };
+  }
+  if (path === "/teams/org-1/invite-links") return { links: [{ token: "a".repeat(32), url: "https://gloom.sh/teams/invite/aaaaaaaa", teamId: "org-1", createdBy: "u0", expiresAt: new Date(Date.now() + 5 * 86_400_000).toISOString(), maxUses: null, uses: 3, createdAt: "2026-09-14T00:00:00.000Z" }] };
+  if (path === "/teams") return { teams: teamsOnServer };
+  if (path === "/teams/invitations") return { invitations: receivedInvitations };
+  if (path === "/teams/notifications") return { notifications: [] };
+  if (path === "/chat/channels") return [];
+  if (path === "/chat/state") return { channels: [], onlineCount: 0, channelStates: [], notifications: [] };
+  if (path.endsWith("/views") || path.endsWith("/collections")) return { items: [] };
+  return {};
+}
+
+const requests: string[] = [];
+let receivedInvitations: unknown[] = [];
+let teamsOnServer: unknown[] = [macroDesk];
+
+async function flush() {
+  for (let i = 0; i < 4; i += 1) {
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 5));
+    });
+  }
+}
+
+function Pane({ focused = true }: { focused?: boolean }) {
+  return (
+    <PluginRenderProvider pluginId="gloomberb-cloud" runtime={createTestPluginRuntime()}>
+      <TeamPane paneId="team" paneType="team" focused={focused} width={84} height={24} />
+    </PluginRenderProvider>
+  );
+}
+
+beforeEach(() => {
+  installChatApiTestDefaults();
+  requests.length = 0;
+  receivedInvitations = [];
+  teamsOnServer = [macroDesk];
+  setCloudApiFetchTransport(async (url, init) => {
+    const parsed = new URL(url);
+    const method = init?.method ?? "GET";
+    requests.push(`${method} ${parsed.pathname}`);
+    return new Response(JSON.stringify(respond(parsed.pathname, method)), {
+      status: 200,
+      headers: { "content-type": "application/json" },
+    });
+  });
+  apiClient.setSessionToken("team-pane-session");
+  apiClient.restoreCachedUser({ id: "u0", username: "vince", emailVerified: true, plan: "pro" });
+  (teamStore as any).update({ teams: [macroDesk], invitations: [], loaded: true });
+});
+
+afterEach(async () => {
+  await cleanupChatTest(setup);
+  setup = undefined;
+  (teamStore as any).update({ teams: [], invitations: [], loaded: false });
+  apiClient.setSessionToken(null);
+});
+
+describe("TeamPane", () => {
+  test("shows the team, its members with roles, and management actions for the owner", async () => {
+    await act(async () => {
+      setup = await testRender(<Pane />, { width: 84, height: 24 });
+    });
+    await flush();
+    const frame = setup!.captureCharFrame();
+    if (process.env.PRINT_FRAMES) console.log(frame);
+    expect(frame).toContain("MD· Macro Desk");
+    expect(frame).toContain("Members (3)");
+    expect(frame).toContain("@vince");
+    expect(frame).toContain("Owner");
+    expect(frame).toContain("@lucas");
+    expect(frame).toContain("Admin");
+    expect(frame).toContain("Make member");
+    expect(frame).toContain("Remove");
+    expect(requests).toContain("GET /teams/org-1/members");
+  });
+
+  test("switches sections on request: invites list pending people and links, never emails", async () => {
+    await act(async () => {
+      setup = await testRender(<Pane />, { width: 84, height: 24 });
+    });
+    await flush();
+    await act(async () => {
+      requestTeamPaneView({ teamId: "org-1", section: "invites" });
+    });
+    await flush();
+    const frame = setup!.captureCharFrame();
+    if (process.env.PRINT_FRAMES) console.log(frame);
+    expect(frame).toContain("Invite by username");
+    expect(frame).toContain("@sneh");
+    expect(frame).toContain("gloom.sh/teams/invite/aaaaaaaa");
+    expect(frame).toContain("3 uses");
+    expect(frame).not.toContain("@example.com");
+  });
+
+  test("the create form previews the accent with the short name derived from the name", async () => {
+    teamsOnServer = [];
+    (teamStore as any).update({ teams: [], invitations: [], loaded: true });
+    await act(async () => {
+      setup = await testRender(<Pane />, { width: 84, height: 24 });
+    });
+    await flush();
+    const frame = setup!.captureCharFrame();
+    if (process.env.PRINT_FRAMES) console.log(frame);
+    expect(frame).toContain("New team");
+    expect(frame).toContain("Create team");
+    // The picker marks the chosen swatch and previews the prefix.
+    expect(frame).toContain("▣");
+    expect(frame).toContain("TM· Your team");
+  });
+
+  test("settings edit in place with a live accent preview; channels list with a creator", async () => {
+    await act(async () => {
+      setup = await testRender(<Pane />, { width: 84, height: 26 });
+    });
+    await flush();
+    await act(async () => {
+      requestTeamPaneView({ teamId: "org-1", section: "settings" });
+    });
+    await flush();
+    let frame = setup!.captureCharFrame();
+    if (process.env.PRINT_FRAMES) console.log(frame);
+    expect(frame).toContain("Short name");
+    expect(frame).toContain("MD· Macro Desk");
+    expect(frame).toContain("Members can share invite links");
+    expect(frame).toContain("Save changes");
+    expect(frame).toContain("Delete team");
+
+    await act(async () => {
+      requestTeamPaneView({ teamId: "org-1", section: "channels" });
+    });
+    await flush();
+    frame = setup!.captureCharFrame();
+    if (process.env.PRINT_FRAMES) console.log(frame);
+    expect(frame).toContain("New channel");
+    expect(frame).toContain("earnings-season");
+  });
+
+  test("shows a banner for an invitation addressed to me", async () => {
+    receivedInvitations = [{
+      id: "inv-9",
+      role: "member",
+      expiresAt: new Date(Date.now() + 3 * 86_400_000).toISOString(),
+      createdAt: "2026-09-14T00:00:00.000Z",
+      team: { id: "org-2", name: "Rates Desk", slug: "rates", accentColor: "blue", shortName: "RD", memberCount: 4 },
+      inviter: { id: "u5", username: "ann", displayName: "Ann" },
+    }];
+    (teamStore as any).update({ teams: [macroDesk], invitations: receivedInvitations, loaded: true });
+    await act(async () => {
+      setup = await testRender(<Pane />, { width: 84, height: 24 });
+    });
+    await flush();
+    const frame = setup!.captureCharFrame();
+    if (process.env.PRINT_FRAMES) console.log(frame);
+    expect(frame).toContain("RD· Rates Desk");
+    expect(frame).toContain("@ann invited you");
+    expect(frame).toContain("Accept");
+    expect(frame).toContain("Decline");
+  });
+});