npm - shraga - Versions diffs - 0.1.59 → 0.1.61 - Mend

shraga 0.1.59 → 0.1.61

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/dist/client/assets/index-BeVHw9x2.css +10 -0
package/dist/client/assets/index-QguraA7L.js +1946 -0
package/dist/client/index.html +2 -2
package/package.json +2 -1
package/src/client/components/MachineStats.tsx +135 -14
package/src/client/components/ui/popover.tsx +39 -0
package/dist/client/assets/index-DNHg3blr.js +0 -1948
package/dist/client/assets/index-DXJfr5b2.css +0 -10

package/dist/client/index.html CHANGED Viewed

@@ -13,8 +13,8 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
-    <script type="module" crossorigin src="/assets/index-DNHg3blr.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-DXJfr5b2.css">
+    <script type="module" crossorigin src="/assets/index-QguraA7L.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BeVHw9x2.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "shraga",
-  "version": "0.1.59",
+  "version": "0.1.61",
   "description": "The teammate you delegate coding to — a self-hostable, multi-user AI coding agent web UI (Claude Code, with a pluggable engine seam).",
   "type": "module",
   "main": "./src/index.ts",
@@ -59,6 +59,7 @@
     "@livx.cc/mcp-firebase": "^0.1.14",
     "@radix-ui/react-accordion": "^1.2.2",
     "@radix-ui/react-dialog": "^1.1.4",
+    "@radix-ui/react-popover": "^1.1.23",
     "@radix-ui/react-scroll-area": "^1.2.2",
     "@radix-ui/react-slot": "^1.1.1",
     "@tailwindcss/typography": "^0.5.19",

package/src/client/components/MachineStats.tsx CHANGED Viewed

@@ -1,6 +1,7 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import type { AgentSocket, ServerEvent } from '@/lib/ws';
 import { cn } from '@/lib/utils';
+import { Popover, PopoverContent, PopoverTrigger } from './ui/popover';
 type Sample = Extract<ServerEvent, { type: 'stats' }>['sample'];
@@ -96,17 +97,129 @@ function ClaudeUsageMetric({ getToken }: { getToken: () => Promise<string | null
  *  the gate and the labelling are testable without a network or a DOM. */
 export function UsageMetric({ usage }: { usage: Usage | null }) {
   const top = usage && binding(usage.limits);
-  if (!usage || !top) return null;
+  const [state, setState] = useState<CardState>(CLOSED);
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const cancel = () => { if (timer.current) { clearTimeout(timer.current); timer.current = null; } };
+  const send = useCallback((ev: CardEvent, delayMs = 0) => {
+    cancel();
+    if (!delayMs) { setState(prev => nextCardState(prev, ev)); return; }
+    timer.current = setTimeout(() => { timer.current = null; setState(prev => nextCardState(prev, ev)); }, delayMs);
+  }, []);
+  useEffect(() => cancel, []);
-  // Every window, each labelled from its OWN resets_at — the `weekly_*` kinds do NOT reset weekly.
-  const detail = usage.limits
-    .map(l => `${l.scopeLabel ?? l.kind} ${l.percent}%${untilLabel(l.resetsAt) ? ` (resets in ${untilLabel(l.resetsAt)})` : ''}`)
-    .join('\n');
-  const plan = usage.subscriptionType ? `claude ${usage.subscriptionType} — ` : 'claude ';
+  if (!usage || !top) return null;
   // No `series`: usage has no server-side history to seed from, so it renders a GAUGE (full from the
   // first paint) instead of a sparkline that would plot tab-uptime and be empty for the first minutes.
-  return <Metric label="usage" value={top.percent} title={`${plan}${top.percent}% of the binding limit\n${detail}`} severity={top.severity} />;
+  // No `title` either — the breakdown lives in the card below; a native tooltip on the same element
+  // would race it, appear a second late, and repeat the card word for word.
+  //
+  // The trigger is a real <button>: it must be tappable (Radix HoverCard was pointer-only, so the
+  // breakdown was flat-out unreachable on a phone) AND focusable, so Enter/Space opens it too.
+  // Hover is layered on top of that so a desktop mouse still just points at it.
+  return (
+    <Popover open={state.open} onOpenChange={o => send(o ? { type: 'activate' } : { type: 'dismiss' })}>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          aria-label="claude usage breakdown"
+          className="cursor-default rounded-sm outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          onPointerEnter={e => send({ type: 'pointerenter', pointerType: e.pointerType }, HOVER_OPEN_MS)}
+          onPointerLeave={e => send({ type: 'pointerleave', pointerType: e.pointerType }, HOVER_CLOSE_MS)}
+        >
+          <Metric label="usage" value={top.percent} severity={top.severity} />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent
+        // A hover-opened card must not steal focus — that would yank the caret out of the composer
+        // just because the mouse crossed the strip. Escape still closes it: the dismissable layer
+        // listens on the document, not on the content's own focus.
+        onOpenAutoFocus={e => e.preventDefault()}
+        onPointerEnter={() => cancel()}
+        onPointerLeave={e => send({ type: 'pointerleave', pointerType: e.pointerType }, HOVER_CLOSE_MS)}
+      >
+        <UsageCard usage={usage} />
+      </PopoverContent>
+    </Popover>
+  );
+}
+const HOVER_OPEN_MS = 120;
+const HOVER_CLOSE_MS = 80;
+export interface CardState { open: boolean; byHover: boolean }
+export type CardEvent =
+  | { type: 'pointerenter' | 'pointerleave'; pointerType: string }
+  | { type: 'activate' }   // tap, click or Enter/Space on the trigger (Radix reports it as open)
+  | { type: 'dismiss' };   // Escape, outside press, or a second activation
+export const CLOSED: CardState = { open: false, byHover: false };
+/** Who may open and close the card, as a pure function so both interaction modes are testable
+ *  without a DOM. Two rules earn their keep:
+ *   - hover is MOUSE-ONLY. A touch tap also emits pointerenter/pointerleave (pointerType 'touch'),
+ *     and honouring those would open the card on touch-down and immediately close it again on lift.
+ *   - a card opened deliberately (tap / click / keyboard) does NOT close when the pointer wanders
+ *     off; only Escape, an outside press, or another activation dismisses it. */
+export function nextCardState(state: CardState, ev: CardEvent): CardState {
+  switch (ev.type) {
+    case 'pointerenter':
+      return isHoverPointer(ev.pointerType) ? { open: true, byHover: true } : state;
+    case 'pointerleave':
+      return isHoverPointer(ev.pointerType) && state.byHover ? CLOSED : state;
+    case 'activate':
+      return { open: true, byHover: false };
+    case 'dismiss':
+      return CLOSED;
+  }
+}
+// '' covers synthetic/legacy events that carry no pointerType; a real touch always says 'touch'.
+const isHoverPointer = (t: string) => t === 'mouse' || t === '';
+/** The breakdown card: one row per reported window. Exported bare so the rows can be asserted
+ *  without driving a real open (Radix only mounts the content once open). */
+export function UsageCard({ usage }: { usage: Usage }) {
+  const top = binding(usage.limits);
+  return (
+    <div className="text-[11px] leading-tight">
+      <div className="flex items-baseline justify-between gap-2 pb-2 text-muted-foreground">
+        <span className="uppercase tracking-wide">claude usage</span>
+        {usage.subscriptionType && <span className="tabular-nums">{usage.subscriptionType} plan</span>}
+      </div>
+      <div className="flex flex-col gap-3">
+        {usage.limits.map((l, i) => {
+          const until = untilLabel(l.resetsAt);
+          const isTop = l === top;
+          return (
+            <div key={`${l.kind}-${i}`} data-headline={isTop || undefined} className={cn('flex flex-col gap-1', !isTop && 'opacity-60')}>
+              <div className="flex items-baseline justify-between gap-2">
+                <span className={cn('truncate', isTop && 'font-medium')}>
+                  {isTop && <span className="mr-1 text-muted-foreground" aria-hidden>▸</span>}
+                  {windowLabel(l)}
+                </span>
+                <span className={cn('tabular-nums shrink-0', level(l.percent, l.severity))}>{l.percent}%</span>
+              </div>
+              <Gauge value={l.percent} className={cn('w-full', level(l.percent, l.severity))} />
+              <span className="text-[10px] text-muted-foreground">{until ? `resets in ${until}` : 'no reset reported'}</span>
+            </div>
+          );
+        })}
+      </div>
+      <div className="mt-3 border-t pt-2 text-[10px] text-muted-foreground">▸ is the window the strip is showing</div>
+    </div>
+  );
+}
+/** Human name for a window, derived ONLY from what the payload actually states. `weekly_*` is never
+ *  printed as "weekly"/"7 days": that window rolls on a ~72h cadence, so the kind name is a lie and
+ *  only resets_at (rendered separately) tells the truth about its length. */
+export function windowLabel(l: UsageLimit): string {
+  if (l.scopeLabel) return `${l.scopeLabel} window`;
+  if (l.kind === 'session') return 'current session';
+  if (l.kind === 'weekly_all') return 'all models';
+  return l.kind.replace(/_/g, ' ');
 }
 /** The window that gates you first is simply the FULLEST one, whichever kind it is.
@@ -118,15 +231,20 @@ export function binding(limits: UsageLimit[]): UsageLimit | null {
   return limits.reduce<UsageLimit | null>((best, l) => (!best || l.percent > best.percent ? l : best), null);
 }
-/** Human "time until reset", derived from resets_at only — never from the limit's kind name. */
+/** Human "time until reset", derived from resets_at only — never from the limit's kind name.
+ *  Rounded to whole minutes FIRST so a value handed in as exactly 4h does not render "3h 59m"
+ *  because a few milliseconds elapsed between building it and reading the clock. */
 export function untilLabel(iso: string | null): string | null {
   if (!iso) return null;
   const ms = new Date(iso).getTime() - Date.now();
   if (!Number.isFinite(ms) || ms <= 0) return null;
-  const h = ms / 3_600_000;
-  if (h < 1) return `${Math.max(1, Math.round(ms / 60_000))}m`;
-  if (h < 48) return `${Math.round(h)}h`;
-  return `${Math.round(h / 24)}d`;
+  const min = Math.round(ms / 60_000);
+  if (min < 1) return '1m';
+  if (min < 60) return `${min}m`;
+  const h = Math.floor(min / 60), m = min % 60;
+  if (h < 48) return m ? `${h}h ${m}m` : `${h}h`;
+  const d = Math.floor(h / 24), rh = h % 24;
+  return rh ? `${d}d ${rh}h` : `${d}d`;
 }
 /** Only severities we have actually SEEN mean something here. The vendor's vocabulary is not
@@ -143,8 +261,11 @@ function level(v: number, severity?: string) {
 function Metric({ label, value, series, title, severity }: { label: string; value: number; series?: number[]; title?: string; severity?: string }) {
   const tone = level(value, severity);
+  // Plain-text fallback only where nothing richer exists (cpu/mem). The usage metric passes no title:
+  // it owns a popover card, and a native tooltip on the same element would double up on it.
+  const tip = title ?? (series ? `${label} ${value}% — last ${series.length} samples` : undefined);
   return (
-    <span className="flex items-center gap-1" title={title ?? `${label} ${value}%${series ? ` — last ${series.length} samples` : ''}`}>
+    <span className="flex items-center gap-1" title={tip}>
       <span className="uppercase tracking-wide">{label}</span>
       {series ? <Sparkline series={series} className={tone} /> : <Gauge value={value} className={tone} />}
       <span className={cn('tabular-nums', tone)}>{value}%</span>

package/src/client/components/ui/popover.tsx ADDED Viewed

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { cn } from '@/lib/utils';
+const Popover = PopoverPrimitive.Root;
+const PopoverTrigger = PopoverPrimitive.Trigger;
+const PopoverAnchor = PopoverPrimitive.Anchor;
+/** Popover, not HoverCard: HoverCard is pointer-only by design (it listens for pointerenter/leave and
+ *  nothing else), so on a touch device its content is unreachable — no hover, no card. Popover opens
+ *  on activation, which a tap, a click AND Enter/Space all produce, and brings Escape + outside-press
+ *  dismissal with it. Hover is layered on top by the consumer, so desktop still feels like a hover.
+ *
+ *  Portalled + collision-aware by default: the only consumer today sits in the bottom-left corner of
+ *  a fixed 256px sidebar, so the card MUST be free to flip upward and slide rightward into the main
+ *  pane instead of being clipped by the sidebar box or the viewport edge. */
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = 'start', side = 'top', sideOffset = 8, collisionPadding = 8, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      side={side}
+      sideOffset={sideOffset}
+      collisionPadding={collisionPadding}
+      className={cn(
+        'z-50 w-64 max-w-[calc(100vw-1rem)] rounded-md border bg-card p-3 text-card-foreground shadow-md outline-none',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+export { Popover, PopoverTrigger, PopoverAnchor, PopoverContent };