mirror of
https://github.com/alkimake/paperclip.git
synced 2026-06-14 01:50:39 +09:00
## Thinking Path > - Paperclip orchestrates AI agents for zero-human companies > - Human operators supervise that work through issue lists, issue detail, comments, inbox groups, markdown references, and profile/activity surfaces > - The branch had many small UI fixes that improve the operator loop but do not need to ship with backend runtime migrations > - These changes belong together as board workflow polish because they affect scanning, navigation, issue context, comment state, and markdown clarity > - This pull request groups the UI-only slice so it can merge independently from runtime/backend changes > - The benefit is a clearer board experience with better issue context, steadier optimistic updates, and more predictable keyboard navigation ## What Changed - Improves issue properties, sub-issue actions, blocker chips, and issue list/detail refresh behavior. - Adds blocker context above the issue composer and stabilizes queued/interrupted comment UI state. - Improves markdown issue/GitHub link rendering and opens external markdown links in a new tab. - Adds inbox group keyboard navigation and fold/unfold support. - Polishes activity/avatar/profile/settings/workspace presentation details. ## Verification - `pnpm exec vitest run ui/src/components/IssueProperties.test.tsx ui/src/components/IssueChatThread.test.tsx ui/src/components/MarkdownBody.test.tsx ui/src/lib/inbox.test.ts ui/src/lib/optimistic-issue-comments.test.ts` ## Risks - Low to medium risk: changes are UI-focused but cover high-traffic issue and inbox surfaces. - This branch intentionally does not include the backend runtime changes from the companion PR; where UI calls newer API filters, unsupported servers should continue to fail visibly through existing API error handling. - Visual screenshots were not captured in this heartbeat; targeted component/helper tests cover the changed behavior. > For core feature work, check [`ROADMAP.md`](ROADMAP.md) first and discuss it in `#dev` before opening the PR. Feature PRs that overlap with planned core work may need to be redirected — check the roadmap first. See `CONTRIBUTING.md`. ## Model Used - OpenAI Codex, GPT-5-based coding agent runtime, shell/git tool use enabled. Exact hosted model build and context window are not exposed in this Paperclip heartbeat environment. ## Checklist - [x] I have included a thinking path that traces from project context to this change - [x] I have specified the model used (with version and capability details) - [x] I have checked ROADMAP.md and confirmed this PR does not duplicate planned core work - [x] I have run tests locally and they pass - [x] I have added or updated tests where applicable - [ ] If this change affects the UI, I have included before/after screenshots - [x] I have updated relevant documentation to reflect my changes - [x] I have considered and documented any risks above - [x] I will address all Greptile and reviewer comments before requesting merge
192 lines
6.5 KiB
TypeScript
192 lines
6.5 KiB
TypeScript
import { type ClassValue, clsx } from "clsx";
|
|
import { twMerge } from "tailwind-merge";
|
|
import { deriveAgentUrlKey, deriveProjectUrlKey, normalizeProjectUrlKey, hasNonAsciiContent } from "@paperclipai/shared";
|
|
import type { BillingType, FinanceDirection, FinanceEventKind } from "@paperclipai/shared";
|
|
|
|
export function cn(...inputs: ClassValue[]) {
|
|
return twMerge(clsx(inputs));
|
|
}
|
|
|
|
export function formatCents(cents: number): string {
|
|
return `$${(cents / 100).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
|
|
}
|
|
|
|
export function formatNumber(n: number): string {
|
|
return n.toLocaleString("en-US");
|
|
}
|
|
|
|
export function formatDate(date: Date | string): string {
|
|
return new Date(date).toLocaleDateString("en-US", {
|
|
month: "short",
|
|
day: "numeric",
|
|
year: "numeric",
|
|
});
|
|
}
|
|
|
|
export function formatDateTime(date: Date | string): string {
|
|
return new Date(date).toLocaleString("en-US", {
|
|
month: "short",
|
|
day: "numeric",
|
|
year: "numeric",
|
|
hour: "numeric",
|
|
minute: "2-digit",
|
|
});
|
|
}
|
|
|
|
export function formatShortDate(date: Date | string): string {
|
|
return new Date(date).toLocaleString("en-US", {
|
|
month: "short",
|
|
day: "numeric",
|
|
});
|
|
}
|
|
|
|
export function relativeTime(date: Date | string): string {
|
|
const now = Date.now();
|
|
const then = new Date(date).getTime();
|
|
const diffSec = Math.round((now - then) / 1000);
|
|
if (diffSec < 60) return "just now";
|
|
const diffMin = Math.round(diffSec / 60);
|
|
if (diffMin < 60) return `${diffMin}m ago`;
|
|
const diffHr = Math.round(diffMin / 60);
|
|
if (diffHr < 24) return `${diffHr}h ago`;
|
|
const diffDay = Math.round(diffHr / 24);
|
|
if (diffDay < 30) return `${diffDay}d ago`;
|
|
return formatDate(date);
|
|
}
|
|
|
|
export function formatTokens(n: number): string {
|
|
if (n >= 1_000_000_000) return `${(n / 1_000_000_000).toFixed(1)}B`;
|
|
if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
|
|
if (n >= 1_000) return `${(n / 1_000).toFixed(1)}k`;
|
|
return String(n);
|
|
}
|
|
|
|
/** Map a raw provider slug to a display-friendly name. */
|
|
export function providerDisplayName(provider: string): string {
|
|
const map: Record<string, string> = {
|
|
anthropic: "Anthropic",
|
|
aws_bedrock: "AWS Bedrock",
|
|
openai: "OpenAI",
|
|
openrouter: "OpenRouter",
|
|
chatgpt: "ChatGPT",
|
|
google: "Google",
|
|
cursor: "Cursor",
|
|
jetbrains: "JetBrains AI",
|
|
};
|
|
return map[provider.toLowerCase()] ?? provider;
|
|
}
|
|
|
|
export function billingTypeDisplayName(billingType: BillingType): string {
|
|
const map: Record<BillingType, string> = {
|
|
metered_api: "Metered API",
|
|
subscription_included: "Subscription",
|
|
subscription_overage: "Subscription overage",
|
|
credits: "Credits",
|
|
fixed: "Fixed",
|
|
unknown: "Unknown",
|
|
};
|
|
return map[billingType];
|
|
}
|
|
|
|
export function quotaSourceDisplayName(source: string): string {
|
|
const map: Record<string, string> = {
|
|
"anthropic-oauth": "Anthropic OAuth",
|
|
"claude-cli": "Claude CLI",
|
|
"bedrock": "AWS Bedrock",
|
|
"codex-rpc": "Codex app server",
|
|
"codex-wham": "ChatGPT WHAM",
|
|
};
|
|
return map[source] ?? source;
|
|
}
|
|
|
|
function coerceBillingType(value: unknown): BillingType | null {
|
|
if (
|
|
value === "metered_api" ||
|
|
value === "subscription_included" ||
|
|
value === "subscription_overage" ||
|
|
value === "credits" ||
|
|
value === "fixed" ||
|
|
value === "unknown"
|
|
) {
|
|
return value;
|
|
}
|
|
return null;
|
|
}
|
|
|
|
function readRunCostUsd(payload: Record<string, unknown> | null): number {
|
|
if (!payload) return 0;
|
|
for (const key of ["costUsd", "cost_usd", "total_cost_usd"] as const) {
|
|
const value = payload[key];
|
|
if (typeof value === "number" && Number.isFinite(value)) return value;
|
|
}
|
|
return 0;
|
|
}
|
|
|
|
export function visibleRunCostUsd(
|
|
usage: Record<string, unknown> | null,
|
|
result: Record<string, unknown> | null = null,
|
|
): number {
|
|
const billingType = coerceBillingType(usage?.billingType) ?? coerceBillingType(result?.billingType);
|
|
if (billingType === "subscription_included") return 0;
|
|
return readRunCostUsd(usage) || readRunCostUsd(result);
|
|
}
|
|
|
|
export function financeEventKindDisplayName(eventKind: FinanceEventKind): string {
|
|
const map: Record<FinanceEventKind, string> = {
|
|
inference_charge: "Inference charge",
|
|
platform_fee: "Platform fee",
|
|
credit_purchase: "Credit purchase",
|
|
credit_refund: "Credit refund",
|
|
credit_expiry: "Credit expiry",
|
|
byok_fee: "BYOK fee",
|
|
gateway_overhead: "Gateway overhead",
|
|
log_storage_charge: "Log storage",
|
|
logpush_charge: "Logpush",
|
|
provisioned_capacity_charge: "Provisioned capacity",
|
|
training_charge: "Training",
|
|
custom_model_import_charge: "Custom model import",
|
|
custom_model_storage_charge: "Custom model storage",
|
|
manual_adjustment: "Manual adjustment",
|
|
};
|
|
return map[eventKind];
|
|
}
|
|
|
|
export function financeDirectionDisplayName(direction: FinanceDirection): string {
|
|
return direction === "credit" ? "Credit" : "Debit";
|
|
}
|
|
|
|
/** Build an issue URL using the human-readable identifier when available. */
|
|
export function issueUrl(issue: { id: string; identifier?: string | null }): string {
|
|
return `/issues/${issue.identifier ?? issue.id}`;
|
|
}
|
|
|
|
/** Build an agent route URL using the short URL key when available. */
|
|
export function agentRouteRef(agent: { id: string; urlKey?: string | null; name?: string | null }): string {
|
|
return agent.urlKey ?? deriveAgentUrlKey(agent.name, agent.id);
|
|
}
|
|
|
|
/** Build an agent URL using the short URL key when available. */
|
|
export function agentUrl(agent: { id: string; urlKey?: string | null; name?: string | null }): string {
|
|
return `/agents/${agentRouteRef(agent)}`;
|
|
}
|
|
|
|
/** Build a project route reference, falling back to UUID when the derived key is ambiguous. */
|
|
export function projectRouteRef(project: { id: string; urlKey?: string | null; name?: string | null }): string {
|
|
const key = project.urlKey ?? deriveProjectUrlKey(project.name, project.id);
|
|
// Guard for rolling deploys or legacy data where the server returned a bare slug without UUID suffix.
|
|
if (key === normalizeProjectUrlKey(project.name) && hasNonAsciiContent(project.name)) return project.id;
|
|
return key;
|
|
}
|
|
|
|
/** Build a project URL using the short URL key when available. */
|
|
export function projectUrl(project: { id: string; urlKey?: string | null; name?: string | null }): string {
|
|
return `/projects/${projectRouteRef(project)}`;
|
|
}
|
|
|
|
/** Build a project workspace URL scoped under its project. */
|
|
export function projectWorkspaceUrl(
|
|
project: { id: string; urlKey?: string | null; name?: string | null },
|
|
workspaceId: string,
|
|
): string {
|
|
return `${projectUrl(project)}/workspaces/${workspaceId}`;
|
|
}
|