@nexus-ai-fs/tui 0.9.18

package/src/panels/files/share-links-tab.tsx

@@ -0,0 +1,33 @@
+/**
+ * Share Links tab: displays a scrollable list of share links with
+ * columns for path, permission, status, access count, and expiry.
+ */
+
+import React from "react";
+import type { ShareLink } from "../../stores/share-link-store.js";
+
+interface ShareLinksTabProps {
+  readonly links: readonly ShareLink[];
+  readonly selectedIndex: number;
+  readonly loading: boolean;
+}
+
+export function ShareLinksTab({ links, selectedIndex, loading }: ShareLinksTabProps): React.ReactNode {
+  if (loading) return <text>Loading share links...</text>;
+  if (links.length === 0) return <text>{"No share links. Press 'n' to create one."}</text>;
+
+  return (
+    <scrollbox height="100%" width="100%">
+      {links.map((link, i) => {
+        const isSelected = i === selectedIndex;
+        const prefix = isSelected ? "> " : "  ";
+        const statusBadge = link.status === "active" ? "\u25CF" : link.status === "revoked" ? "\u00D7" : "\u25CB";
+        return (
+          <box key={link.link_id} height={1} width="100%">
+            <text>{`${prefix}${statusBadge} ${link.path}  ${link.permission_level}  ${link.access_count} views  ${link.expires_at ?? "no expiry"}`}</text>
+          </box>
+        );
+      })}
+    </scrollbox>
+  );
+}

package/src/panels/files/uploads-tab.tsx

@@ -0,0 +1,45 @@
+/**
+ * Uploads tab: displays upload sessions with progress bars,
+ * filename, progress (offset/length), status, and expiry.
+ */
+
+import React from "react";
+import type { UploadSession } from "../../stores/upload-store.js";
+
+interface UploadsTabProps {
+  readonly sessions: readonly UploadSession[];
+  readonly selectedIndex: number;
+  readonly loading: boolean;
+}
+
+function formatProgress(offset: number, length: number): string {
+  if (length <= 0) return `${offset} bytes`;
+  const pct = Math.min(100, Math.round((offset / length) * 100));
+  const barWidth = 20;
+  const filled = Math.round((pct / 100) * barWidth);
+  const bar = "\u2588".repeat(filled) + "\u2591".repeat(barWidth - filled);
+  return `[${bar}] ${pct}% (${offset}/${length})`;
+}
+
+export function UploadsTab({ sessions, selectedIndex, loading }: UploadsTabProps): React.ReactNode {
+  if (loading) return <text>Loading upload sessions...</text>;
+  if (sessions.length === 0) return <text>No active upload sessions.</text>;
+
+  return (
+    <scrollbox height="100%" width="100%">
+      {sessions.map((session, i) => {
+        const isSelected = i === selectedIndex;
+        const prefix = isSelected ? "> " : "  ";
+        const filename = session.filename ?? "(unknown)";
+        const progress = formatProgress(session.offset, session.length);
+        const expiry = session.expires_at ? `expires ${session.expires_at}` : "no expiry";
+        return (
+          <box key={session.id} height={2} width="100%" flexDirection="column">
+            <text>{`${prefix}${filename}  ${session.id.slice(0, 8)}...  ${expiry}`}</text>
+            <text>{`    ${progress}`}</text>
+          </box>
+        );
+      })}
+    </scrollbox>
+  );
+}

package/src/panels/payments/approval-list.tsx

@@ -0,0 +1,83 @@
+/**
+ * Approval list: displays spending approval requests with status coloring.
+ */
+
+import React from "react";
+import type { ApprovalRequest } from "../../stores/payments-store.js";
+import { LoadingIndicator } from "../../shared/components/loading-indicator.js";
+import { textStyle } from "../../shared/text-style.js";
+import { statusColor } from "../../shared/theme.js";
+
+interface ApprovalListProps {
+  readonly approvals: readonly ApprovalRequest[];
+  readonly selectedIndex: number;
+  readonly loading: boolean;
+}
+
+function shortId(id: string): string {
+  if (id.length <= 12) return id;
+  return `${id.slice(0, 8)}..`;
+}
+
+function formatTime(ts: string): string {
+  try {
+    return new Date(ts).toLocaleString();
+  } catch {
+    return ts;
+  }
+}
+
+const STATUS_COLOR: Record<string, string> = {
+  pending: statusColor.warning,
+  approved: statusColor.healthy,
+  rejected: statusColor.error,
+};
+
+export function ApprovalList({
+  approvals,
+  selectedIndex,
+  loading,
+}: ApprovalListProps): React.ReactNode {
+  if (loading) {
+    return <LoadingIndicator message="Loading approvals..." />;
+  }
+
+  if (approvals.length === 0) {
+    return (
+      <box height="100%" width="100%" justifyContent="center" alignItems="center">
+        <text style={textStyle({ dim: true })}>No approval requests found</text>
+      </box>
+    );
+  }
+
+  return (
+    <scrollbox height="100%" width="100%">
+      {/* Header */}
+      <box height={1} width="100%">
+        <text>{"  ID          AMOUNT       PURPOSE                    STATUS     REQUESTER     CREATED"}</text>
+      </box>
+      <box height={1} width="100%">
+        <text>{"  ----------  -----------  -------------------------  ---------  ------------  -----------------------"}</text>
+      </box>
+
+      {/* Rows */}
+      {approvals.map((a, i) => {
+        const isSelected = i === selectedIndex;
+        const prefix = isSelected ? "> " : "  ";
+        const amount = String(a.amount).padEnd(11);
+        const purpose = (a.purpose.length > 25 ? a.purpose.slice(0, 22) + "..." : a.purpose).padEnd(25);
+        const color = STATUS_COLOR[a.status];
+
+        return (
+          <box key={a.id} height={1} width="100%">
+            <text>
+              {`${prefix}${shortId(a.id).padEnd(10)}  ${amount}  ${purpose}  `}
+              <span style={color ? textStyle({ fg: color }) : undefined}>{a.status.padEnd(9)}</span>
+              {`  ${shortId(a.requester_id).padEnd(12)}  ${formatTime(a.created_at)}`}
+            </text>
+          </box>
+        );
+      })}
+    </scrollbox>
+  );
+}

package/src/panels/payments/balance-card.tsx

@@ -0,0 +1,43 @@
+/**
+ * Balance card: displays available, reserved, and total credit amounts.
+ */
+
+import React from "react";
+import type { BalanceInfo } from "../../stores/payments-store.js";
+import { LoadingIndicator } from "../../shared/components/loading-indicator.js";
+
+interface BalanceCardProps {
+  readonly balance: BalanceInfo | null;
+  readonly loading: boolean;
+}
+
+export function BalanceCard({ balance, loading }: BalanceCardProps): React.ReactNode {
+  if (loading) {
+    return <LoadingIndicator message="Loading balance..." />;
+  }
+
+  if (!balance) {
+    return (
+      <box height="100%" width="100%" justifyContent="center" alignItems="center">
+        <text>No balance data available</text>
+      </box>
+    );
+  }
+
+  return (
+    <scrollbox height="100%" width="100%">
+      <box height={1} width="100%" marginTop={1}>
+        <text>--- Balances ---</text>
+      </box>
+      <box height={1} width="100%">
+        <text>{`Available:  ${balance.available}`}</text>
+      </box>
+      <box height={1} width="100%">
+        <text>{`Reserved:   ${balance.reserved}`}</text>
+      </box>
+      <box height={1} width="100%">
+        <text>{`Total:      ${balance.total}`}</text>
+      </box>
+    </scrollbox>
+  );
+}

package/src/panels/payments/budget-card.tsx

@@ -0,0 +1,70 @@
+/**
+ * Budget card: displays spending limits vs spent vs remaining for each period.
+ */
+
+import React from "react";
+import type { BudgetSummary } from "../../stores/payments-store.js";
+
+interface BudgetCardProps {
+  readonly budget: BudgetSummary | null;
+  readonly loading: boolean;
+}
+
+export function BudgetCard({ budget, loading }: BudgetCardProps): React.ReactNode {
+  if (loading) {
+    return (
+      <box height="100%" width="100%" justifyContent="center" alignItems="center">
+        <text>Loading budget...</text>
+      </box>
+    );
+  }
+
+  if (!budget) {
+    return (
+      <box height="100%" width="100%" justifyContent="center" alignItems="center">
+        <text>No budget data available. Press b to fetch.</text>
+      </box>
+    );
+  }
+
+  if (!budget.has_policy) {
+    return (
+      <box height="100%" width="100%" justifyContent="center" alignItems="center">
+        <text>No spending policy configured</text>
+      </box>
+    );
+  }
+
+  return (
+    <scrollbox height="100%" width="100%">
+      <box height={1} width="100%" marginTop={1}>
+        <text>--- Budget Summary ---</text>
+      </box>
+
+      {/* Header */}
+      <box height={1} width="100%" marginTop={1}>
+        <text>{"PERIOD     LIMIT          SPENT          REMAINING"}</text>
+      </box>
+      <box height={1} width="100%">
+        <text>{"---------  -------------  -------------  -------------"}</text>
+      </box>
+
+      {/* Rows */}
+      <box height={1} width="100%">
+        <text>{`${"Daily".padEnd(9)}  ${budget.limits.daily.padEnd(13)}  ${budget.spent.daily.padEnd(13)}  ${budget.remaining.daily}`}</text>
+      </box>
+      <box height={1} width="100%">
+        <text>{`${"Weekly".padEnd(9)}  ${budget.limits.weekly.padEnd(13)}  ${budget.spent.weekly.padEnd(13)}  ${budget.remaining.weekly}`}</text>
+      </box>
+      <box height={1} width="100%">
+        <text>{`${"Monthly".padEnd(9)}  ${budget.limits.monthly.padEnd(13)}  ${budget.spent.monthly.padEnd(13)}  ${budget.remaining.monthly}`}</text>
+      </box>
+
+      {budget.policy_id && (
+        <box height={1} width="100%" marginTop={1}>
+          <text>{`Policy: ${budget.policy_id}`}</text>
+        </box>
+      )}
+    </scrollbox>
+  );
+}