trelly 0.1.0

package/src/cli/ui/custom-fields.ts

@@ -0,0 +1,75 @@
+import { formatDue } from "./palette.ts";
+
+export type UiCustomFieldOption = { id: string; text: string; color: string | null };
+
+export type UiCustomFieldDef = {
+  id: string;
+  name: string;
+  type: string;
+  cardFront: boolean;
+  options: UiCustomFieldOption[];
+};
+
+export type UiCustomFieldItem = {
+  idCustomField: string;
+  idValue?: string | null;
+  value?: { text?: string; number?: string; date?: string; checked?: string } | null;
+};
+
+export type CardChip = { id: string; label: string; color: string | null };
+
+type RawCustomFieldDef = {
+  id: string;
+  name: string;
+  type: string;
+  display?: { cardFront?: boolean };
+  options?: Array<{ id: string; color?: string | null; value?: { text?: string } }>;
+};
+
+export function toCustomFieldDefs(raw: unknown): UiCustomFieldDef[] {
+  if (!Array.isArray(raw)) return [];
+  return (raw as RawCustomFieldDef[]).map((def) => ({
+    id: def.id,
+    name: def.name,
+    type: def.type,
+    cardFront: def.display?.cardFront === true,
+    options: (def.options ?? []).map((opt) => ({
+      id: opt.id,
+      text: opt.value?.text ?? "",
+      color: opt.color ?? null,
+    })),
+  }));
+}
+
+/** Resolve a card's custom field items to displayable chips. */
+export function customFieldChips(
+  defs: UiCustomFieldDef[],
+  items: UiCustomFieldItem[] | undefined,
+): CardChip[] {
+  const chips: CardChip[] = [];
+  for (const item of items ?? []) {
+    const def = defs.find((d) => d.id === item.idCustomField);
+    if (!def) continue;
+    if (item.idValue) {
+      const opt = def.options.find((o) => o.id === item.idValue);
+      if (opt) {
+        chips.push({ id: def.id, label: `${def.name}: ${opt.text}`, color: opt.color });
+      }
+      continue;
+    }
+    const value = item.value;
+    if (!value) continue;
+    if (value.checked !== undefined) {
+      if (value.checked === "true") {
+        chips.push({ id: def.id, label: `${def.name} ✓`, color: null });
+      }
+      continue;
+    }
+    const text =
+      value.text ?? value.number ?? (value.date ? formatDue(value.date) : undefined);
+    if (text !== undefined) {
+      chips.push({ id: def.id, label: `${def.name}: ${text}`, color: null });
+    }
+  }
+  return chips;
+}

package/src/cli/ui/palette.ts

@@ -0,0 +1,69 @@
+export const TRELLO_LABEL_HEX: Record<string, string> = {
+  green: "#61bd4f",
+  yellow: "#f2d600",
+  orange: "#ff9f1a",
+  red: "#eb5a46",
+  purple: "#0079bf",
+  blue: "#0079bf",
+  sky: "#00c2e0",
+  lime: "#51e898",
+  pink: "#ff78cb",
+  black: "#344563",
+  // List-color values (Trello list colors) beyond the classic label set
+  teal: "#6cc3e0",
+  magenta: "#e774bb",
+  gray: "#8590a2",
+};
+
+export const TRELLO_BLUE = "#0079bf";
+
+const FALLBACK_HEX = "#6b778c";
+
+/** Trello sends shades like "green_dark" — map them to the base color. */
+export function labelHex(color: string | null | undefined): string {
+  const base = (color ?? "").split("_")[0] ?? "";
+  return TRELLO_LABEL_HEX[base] ?? FALLBACK_HEX;
+}
+
+/** Accent for a Trello list: its set color, else Trello blue. */
+export function listAccentHex(color: string | null | undefined): string {
+  return color ? labelHex(color) : TRELLO_BLUE;
+}
+
+export type DueStatus = "none" | "complete" | "overdue" | "soon" | "later";
+
+const SOON_MS = 24 * 60 * 60 * 1000;
+
+export function dueStatus(
+  due: string | null | undefined,
+  dueComplete: boolean | undefined,
+  now: Date = new Date(),
+): DueStatus {
+  if (!due) return "none";
+  if (dueComplete) return "complete";
+  const t = Date.parse(due);
+  if (Number.isNaN(t)) return "none";
+  if (t < now.getTime()) return "overdue";
+  if (t - now.getTime() <= SOON_MS) return "soon";
+  return "later";
+}
+
+export function dueHex(status: DueStatus): string | undefined {
+  switch (status) {
+    case "complete":
+      return TRELLO_LABEL_HEX.green;
+    case "overdue":
+      return TRELLO_LABEL_HEX.red;
+    case "soon":
+      return TRELLO_LABEL_HEX.yellow;
+    default:
+      return undefined;
+  }
+}
+
+export function formatDue(due: string): string {
+  return new Date(due).toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+  });
+}

package/src/cli/ui/shapes.ts

@@ -0,0 +1,68 @@
+export type Rec = Record<string, unknown>;
+
+export function isRecord(v: unknown): v is Rec {
+  return typeof v === "object" && v !== null && !Array.isArray(v);
+}
+
+export function isCard(v: unknown): v is Rec {
+  return isRecord(v) && typeof v.name === "string" && "idList" in v;
+}
+
+export function isBoard(v: unknown): v is Rec {
+  return (
+    isRecord(v) &&
+    typeof v.name === "string" &&
+    !("idBoard" in v) &&
+    !("idList" in v) &&
+    ("prefs" in v || "idOrganization" in v || "shortUrl" in v)
+  );
+}
+
+export function isList(v: unknown): v is Rec {
+  return (
+    isRecord(v) &&
+    typeof v.name === "string" &&
+    "idBoard" in v &&
+    "pos" in v &&
+    !("idList" in v) &&
+    !("color" in v)
+  );
+}
+
+export function isLabel(v: unknown): v is Rec {
+  return isRecord(v) && "color" in v && "idBoard" in v && !("pos" in v);
+}
+
+export function isMember(v: unknown): v is Rec {
+  return isRecord(v) && typeof v.username === "string";
+}
+
+export function isWebhook(v: unknown): v is Rec {
+  return isRecord(v) && "callbackURL" in v;
+}
+
+export function isAction(v: unknown): v is Rec {
+  return (
+    isRecord(v) && typeof v.type === "string" && "date" in v && "idMemberCreator" in v
+  );
+}
+
+export function isChecklist(v: unknown): v is Rec {
+  return isRecord(v) && Array.isArray(v.checkItems) && "idCard" in v;
+}
+
+export function isSearchResult(v: unknown): v is Rec {
+  return (
+    isRecord(v) && "options" in v && (Array.isArray(v.cards) || Array.isArray(v.boards))
+  );
+}
+
+export function isProfilesPayload(v: unknown): v is Rec {
+  return (
+    isRecord(v) && Array.isArray(v.profiles) && typeof v.defaultProfile === "string"
+  );
+}
+
+export function isMessagePayload(v: unknown): v is Rec {
+  return isRecord(v) && typeof v.message === "string";
+}

package/src/cli/ui/static.tsx

@@ -0,0 +1,382 @@
+import { Box, render, Text } from "ink";
+import type { ReactNode } from "react";
+import type { CliError, CliResult } from "../context.ts";
+import { dueHex, dueStatus, formatDue, labelHex, listAccentHex } from "./palette.ts";
+import {
+  isAction,
+  isBoard,
+  isCard,
+  isChecklist,
+  isLabel,
+  isList,
+  isMember,
+  isMessagePayload,
+  isProfilesPayload,
+  isRecord,
+  isSearchResult,
+  isWebhook,
+  type Rec,
+} from "./shapes.ts";
+
+const TRELLO_BLUE = "#0079bf";
+const GREEN = "#61bd4f";
+const RED = "#eb5a46";
+const YELLOW = "#f2d600";
+
+function clip(text: string, max: number): string {
+  return text.length <= max ? text : `${text.slice(0, Math.max(0, max - 1))}…`;
+}
+
+/** Render a result as a one-shot ink frame (colors auto-disable when piped). */
+export async function renderResult(result: CliResult | CliError): Promise<void> {
+  const instance = render(<ResultView result={result} />, {
+    exitOnCtrlC: false,
+    patchConsole: false,
+  });
+  instance.unmount();
+  await instance.waitUntilExit();
+}
+
+function ResultView({ result }: { result: CliResult | CliError }) {
+  if (!result.ok) {
+    return (
+      <Box flexDirection="column">
+        <Text color={RED}>
+          ✗ {result.error}
+          {result.status ? <Text dimColor> (HTTP {result.status})</Text> : null}
+        </Text>
+        {result.details && isRecord(result.details) ? (
+          <Text dimColor>{clip(JSON.stringify(result.details), 120)}</Text>
+        ) : null}
+      </Box>
+    );
+  }
+  return (
+    <Box flexDirection="column">
+      <ResultData data={result.data} />
+      {result.profile !== "default" ? (
+        <Text dimColor>profile: {result.profile}</Text>
+      ) : null}
+    </Box>
+  );
+}
+
+function ResultData({ data }: { data: unknown }) {
+  if (Array.isArray(data)) return <ArrayView items={data} />;
+  if (isSearchResult(data)) return <SearchView data={data} />;
+  if (isProfilesPayload(data)) return <ProfilesView data={data} />;
+  if (isMessagePayload(data)) return <MessageView data={data} />;
+  if (isCard(data)) return <CardDetail card={data} />;
+  if (isChecklist(data)) return <ChecklistView checklist={data} />;
+  if (isMember(data)) return <MemberRow member={data} />;
+  if (isBoard(data)) return <BoardRow board={data} />;
+  if (isRecord(data)) return <KeyValue obj={data} />;
+  if (data === null || data === undefined) return <Text dimColor>(no data)</Text>;
+  return <Text>{String(data)}</Text>;
+}
+
+function ArrayView({ items }: { items: unknown[] }) {
+  if (items.length === 0) return <Text dimColor>(none)</Text>;
+  const first = items[0];
+  let rows: ReactNode;
+  if (isCard(first)) {
+    rows = items.filter(isCard).map((c) => <CardRow key={String(c.id)} card={c} />);
+  } else if (isList(first)) {
+    rows = items.filter(isList).map((l) => <ListRow key={String(l.id)} list={l} />);
+  } else if (isLabel(first)) {
+    rows = items.filter(isLabel).map((l) => <LabelRow key={String(l.id)} label={l} />);
+  } else if (isBoard(first)) {
+    rows = items.filter(isBoard).map((b) => <BoardRow key={String(b.id)} board={b} />);
+  } else if (isWebhook(first)) {
+    rows = items
+      .filter(isWebhook)
+      .map((w) => <WebhookRow key={String(w.id)} webhook={w} />);
+  } else if (isAction(first)) {
+    rows = items
+      .filter(isAction)
+      .map((a) => <ActionRow key={String(a.id)} action={a} />);
+  } else {
+    rows = items.map((item, i) => (
+      <GenericRow key={isRecord(item) ? String(item.id ?? i) : i} item={item} />
+    ));
+  }
+  return (
+    <Box flexDirection="column">
+      {rows}
+      <Text dimColor>{items.length} total</Text>
+    </Box>
+  );
+}
+
+function LabelDots({ labels }: { labels: unknown }) {
+  if (!Array.isArray(labels) || labels.length === 0) return null;
+  return (
+    <>
+      {labels.filter(isRecord).map((label) => (
+        <Text key={String(label.id)} color={labelHex(label.color as string | null)}>
+          ●{" "}
+        </Text>
+      ))}
+    </>
+  );
+}
+
+function DueBadge({ card }: { card: Rec }) {
+  const due = card.due as string | null | undefined;
+  if (!due) return null;
+  const status = dueStatus(due, card.dueComplete as boolean | undefined);
+  return (
+    <Text color={dueHex(status)} dimColor={status === "later"}>
+      {formatDue(due)}
+      {status === "complete" ? " ✓" : ""}{" "}
+    </Text>
+  );
+}
+
+function CardRow({ card }: { card: Rec }) {
+  const badges = isRecord(card.badges) ? card.badges : undefined;
+  const checkItems = (badges?.checkItems as number | undefined) ?? 0;
+  const checked = (badges?.checkItemsChecked as number | undefined) ?? 0;
+  const comments = (badges?.comments as number | undefined) ?? 0;
+  const attachments = (badges?.attachments as number | undefined) ?? 0;
+  return (
+    <Text wrap="truncate">
+      <LabelDots labels={card.labels} />
+      {card.dueComplete === true ? <Text color={GREEN}>✓ </Text> : null}
+      {String(card.name)} <DueBadge card={card} />
+      {checkItems > 0 ? (
+        <Text dimColor>
+          ✓{checked}/{checkItems}{" "}
+        </Text>
+      ) : null}
+      {card.desc ? <Text dimColor>≡ </Text> : null}
+      {comments > 0 ? <Text dimColor>💬{comments} </Text> : null}
+      {attachments > 0 ? <Text dimColor>📎{attachments} </Text> : null}
+      <Text dimColor>{String(card.shortLink ?? card.id ?? "")}</Text>
+    </Text>
+  );
+}
+
+function CardDetail({ card }: { card: Rec }) {
+  const labels = Array.isArray(card.labels) ? card.labels.filter(isRecord) : [];
+  const desc = typeof card.desc === "string" ? card.desc : "";
+  return (
+    <Box flexDirection="column">
+      <Text bold wrap="truncate">
+        {String(card.name)}
+      </Text>
+      {labels.length > 0 ? (
+        <Box gap={1}>
+          {labels.map((label) => (
+            <Text
+              key={String(label.id)}
+              backgroundColor={labelHex(label.color as string | null)}
+              color="#1d2125"
+            >
+              {` ${String(label.name || label.color || "label")} `}
+            </Text>
+          ))}
+        </Box>
+      ) : null}
+      {card.due ? (
+        <Text>
+          Due: <DueBadge card={card} />
+        </Text>
+      ) : null}
+      {desc ? <Text>{clip(desc, 600)}</Text> : null}
+      <Text dimColor>{String(card.shortUrl ?? card.url ?? card.id ?? "")}</Text>
+    </Box>
+  );
+}
+
+function BoardRow({ board }: { board: Rec }) {
+  return (
+    <Text wrap="truncate">
+      <Text color={TRELLO_BLUE}>● </Text>
+      {String(board.name)}
+      {board.closed === true ? <Text color={RED}> (closed)</Text> : null}{" "}
+      <Text dimColor>{String(board.shortUrl ?? board.id ?? "")}</Text>
+    </Text>
+  );
+}
+
+function ListRow({ list }: { list: Rec }) {
+  return (
+    <Text wrap="truncate">
+      <Text color={listAccentHex(list.color as string | null | undefined)}>▍</Text>{" "}
+      {String(list.name)}
+      {list.closed === true ? <Text color={RED}> (archived)</Text> : null}{" "}
+      <Text dimColor>{String(list.id ?? "")}</Text>
+    </Text>
+  );
+}
+
+function LabelRow({ label }: { label: Rec }) {
+  return (
+    <Text wrap="truncate">
+      <Text backgroundColor={labelHex(label.color as string | null)} color="#1d2125">
+        {` ${String(label.name || label.color || "label")} `}
+      </Text>{" "}
+      <Text dimColor>{String(label.id ?? "")}</Text>
+    </Text>
+  );
+}
+
+function WebhookRow({ webhook }: { webhook: Rec }) {
+  return (
+    <Text wrap="truncate">
+      <Text color={webhook.active === false ? RED : GREEN}>● </Text>
+      {String(webhook.description || webhook.callbackURL)}{" "}
+      <Text dimColor>
+        model {String(webhook.idModel ?? "")} · {String(webhook.id ?? "")}
+      </Text>
+    </Text>
+  );
+}
+
+function ActionRow({ action }: { action: Rec }) {
+  const date = String(action.date ?? "")
+    .slice(0, 16)
+    .replace("T", " ");
+  return (
+    <Text wrap="truncate">
+      <Text dimColor>{date} </Text>
+      {String(action.type)}
+    </Text>
+  );
+}
+
+function ChecklistView({ checklist }: { checklist: Rec }) {
+  const items = (checklist.checkItems as unknown[]).filter(isRecord);
+  return (
+    <Box flexDirection="column">
+      <Text bold>{String(checklist.name)}</Text>
+      {items.map((item) => {
+        const done = item.state === "complete";
+        return (
+          <Text key={String(item.id)}>
+            {done ? <Text color={GREEN}>☑ </Text> : "☐ "}
+            <Text dimColor={done} strikethrough={done}>
+              {String(item.name)}
+            </Text>
+          </Text>
+        );
+      })}
+    </Box>
+  );
+}
+
+function MemberRow({ member }: { member: Rec }) {
+  return (
+    <Box flexDirection="column">
+      <Text>
+        <Text bold color={TRELLO_BLUE}>
+          @{String(member.username)}
+        </Text>
+        {member.fullName ? <Text> {String(member.fullName)}</Text> : null}
+      </Text>
+      {member.url ? <Text dimColor>{String(member.url)}</Text> : null}
+    </Box>
+  );
+}
+
+function ProfilesView({ data }: { data: Rec }) {
+  const profiles = (data.profiles as unknown[]).filter(isRecord);
+  return (
+    <Box flexDirection="column">
+      {profiles.length === 0 ? (
+        <Text dimColor>No profiles. Run: trelly auth login</Text>
+      ) : (
+        profiles.map((p) => (
+          <Text key={String(p.name)}>
+            {p.isDefault === true ? <Text color={YELLOW}>★ </Text> : "  "}
+            <Text bold={p.isDefault === true}>{String(p.name)}</Text>
+            {p.label ? <Text dimColor> {String(p.label)}</Text> : null}
+          </Text>
+        ))
+      )}
+      <Text dimColor>app key: {data.hasAppApiKey === true ? "✓" : "not set"}</Text>
+    </Box>
+  );
+}
+
+function MessageView({ data }: { data: Rec }) {
+  const { message, ...rest } = data;
+  return (
+    <Box flexDirection="column">
+      <Text color={GREEN}>✓ {String(message)}</Text>
+      {Object.keys(rest).length > 0 ? <KeyValue obj={rest} dim /> : null}
+    </Box>
+  );
+}
+
+function SearchView({ data }: { data: Rec }) {
+  const boards = Array.isArray(data.boards) ? data.boards : [];
+  const cards = Array.isArray(data.cards) ? data.cards : [];
+  return (
+    <Box flexDirection="column">
+      {boards.length > 0 ? (
+        <Box flexDirection="column" marginBottom={cards.length > 0 ? 1 : 0}>
+          <Text bold dimColor>
+            Boards
+          </Text>
+          {boards.filter(isBoard).map((b) => (
+            <BoardRow key={String(b.id)} board={b} />
+          ))}
+        </Box>
+      ) : null}
+      {cards.length > 0 ? (
+        <Box flexDirection="column">
+          <Text bold dimColor>
+            Cards
+          </Text>
+          {cards.filter(isCard).map((c) => (
+            <CardRow key={String(c.id)} card={c} />
+          ))}
+        </Box>
+      ) : null}
+      {boards.length === 0 && cards.length === 0 ? (
+        <Text dimColor>(no results)</Text>
+      ) : null}
+    </Box>
+  );
+}
+
+function GenericRow({ item }: { item: unknown }) {
+  if (isRecord(item) && typeof item.name === "string") {
+    return (
+      <Text wrap="truncate">
+        {item.name} <Text dimColor>{String(item.id ?? "")}</Text>
+      </Text>
+    );
+  }
+  return <Text wrap="truncate">{clip(JSON.stringify(item) ?? "", 100)}</Text>;
+}
+
+function KeyValue({ obj, dim = false }: { obj: Rec; dim?: boolean }) {
+  return (
+    <Box flexDirection="column">
+      {Object.entries(obj).map(([key, value]) => (
+        <Box key={key}>
+          <Text dimColor>{key}: </Text>
+          <ValueText value={value} dim={dim} />
+        </Box>
+      ))}
+    </Box>
+  );
+}
+
+function ValueText({ value, dim }: { value: unknown; dim: boolean }) {
+  if (value === null || value === undefined) return <Text dimColor>—</Text>;
+  if (typeof value === "boolean") {
+    return <Text color={value ? GREEN : RED}>{String(value)}</Text>;
+  }
+  if (typeof value === "string" || typeof value === "number") {
+    return (
+      <Text dimColor={dim} wrap="truncate">
+        {String(value)}
+      </Text>
+    );
+  }
+  return <Text dimColor>{clip(JSON.stringify(value) ?? "", 80)}</Text>;
+}