waypoi 0.0.0

package/ui/src/components/toMermaidSankey.ts

@@ -0,0 +1,56 @@
+// Utility to generate mermaid Sankey code from TokenFlowData
+// Usage: toMermaidSankey(tokenFlow: TokenFlowData): string
+
+import type { CaptureRecordDetail } from '@/api/client'
+
+type TokenFlowData = NonNullable<CaptureRecordDetail['analysis']['tokenFlow']>
+
+export function toMermaidSankey(tokenFlow: TokenFlowData): string {
+  // Mermaid Sankey syntax is CSV-like rows after the sankey-beta header:
+  // source,target,value
+  const lines = ['sankey-beta']
+
+  // Main totals
+  const inputTotal = Math.max(0, tokenFlow.totals.inputTokens ?? 0)
+  const outputTotal = Math.max(0, tokenFlow.totals.outputTokens ?? 0)
+  lines.push(sankeyRow('Context Window', 'Input Tokens', inputTotal))
+  lines.push(sankeyRow('Context Window', 'Output Tokens', outputTotal))
+
+  // Input categories
+  for (const category of tokenFlow.input) {
+    if (category.tokens <= 0) continue
+    const target = `${compactLabel(category.label, category.key)} [input:${category.key}]`
+    lines.push(sankeyRow('Input Tokens', target, category.tokens))
+  }
+  // Output categories
+  for (const category of tokenFlow.output) {
+    if (category.tokens <= 0) continue
+    const target = `${compactLabel(category.label, category.key)} [output:${category.key}]`
+    lines.push(sankeyRow('Output Tokens', target, category.tokens))
+  }
+
+  return lines.join('\n')
+}
+
+function sankeyRow(source: string, target: string, value: number): string {
+  return `${csvCell(source)},${csvCell(target)},${Math.max(0, Math.round(value))}`
+}
+
+function csvCell(value: string): string {
+  if (!/[",\n]/.test(value)) return value
+  return `"${value.replace(/"/g, '""')}"`
+}
+
+function compactLabel(label: string, key: string): string {
+  const byKey: Record<string, string> = {
+    instructions: 'Instr',
+    assistant_history: 'Asst Hist',
+    input_media: 'Media In',
+    tool_definitions: 'Tool Defs',
+    unattributed_input: 'Other In',
+    assistant_text: 'Asst Text',
+    tool_calls: 'Tool Calls',
+    unattributed_output: 'Other Out',
+  }
+  return byKey[key] ?? label
+}

package/ui/src/components/ui/button.tsx

@@ -0,0 +1,58 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium font-mono uppercase tracking-wide transition-all duration-150 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90 active:scale-[0.98]",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 active:scale-[0.98]",
+        outline:
+          "border border-border bg-transparent shadow-sm hover:bg-secondary hover:text-secondary-foreground active:scale-[0.98]",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80 active:scale-[0.98]",
+        ghost:
+          "hover:bg-secondary hover:text-secondary-foreground",
+        link:
+          "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

package/ui/src/components/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-input px-3 py-1 text-sm font-mono shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }

package/ui/src/components/ui/textarea.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.ComponentProps<"textarea">
+>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-[60px] w-full rounded-md border border-input bg-input px-3 py-2 text-sm font-mono shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 resize-none",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+})
+Textarea.displayName = "Textarea"
+
+export { Textarea }

package/ui/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/ui/src/main.tsx

@@ -0,0 +1,9 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)