webview: six terminal polish fixes (market chrome, SOL mark, tier colors, iCloud picker, context readout) (#199)

* webview: market header and chrome join the terminal idiom

Pre-terminal drift on the market screen, trued up:

- The connected RPC chip was a rounded Tailwind-green pill with a bare
  gear button, directly under the Add Helius key banner that already
  speaks the terminal idiom. Now the same an-bracket bar as its sibling
  (term green tokens, mono uppercase network, corner ticks), and the
  whole row taps through to the key form instead of a tiny gear target.
- The SKILL and WORKFLOW browse tabs gain their kana subs, matching the
  profile view's AGENT and COMMUNITY tabs.
- The header balance becomes a control: it shows the real Solana mark
  (the three-bar logotype, replacing the circled-ring lookalike) and
  taps through to your own agent profile. The skills readout shares the
  mark; balance and Publish center on the header axis.

* webview: hairline under the agent tab section headings

The tiny uppercase labels on the profile agent tab (Verified work,
Skills) floated over their content with nothing anchoring them. Each
gets the existing hairline (var(--an-line)). The community tab and the
skill detail already carry their own terminal section headers, so they
are untouched.

* webview: the agent card tier badge reads the tier ramp

The card's STAR_TIERS table already declares the shared an-tier tokens
so the tier reads the same on the card and the profile, but the badge
painted the wallet accent instead: BRONZE could be pink. It now takes
its tier's token (copper, silver, gold, violet), matching the profile
gauge and the VS Code directory. Everything else on the card keeps the
wallet accent.

* webview: tap the context ring for the numbers behind it

The ring's data lived in a title tooltip, which touch never sees and
mouse users rarely find. Tapping the ring now opens a small terminal
readout (tokens / window, percent in the ring's color, compacting
state), tap away to close. The hover tooltip stays.

* webview: one Solana mark for every SOL amount

The SOL amounts wore a circled-ring lookalike (the 9678 dingbat) in the
agent card EARNED footer, the SD card price chip, and the buy receipt,
while the market header had just gained the real three-bar mark. The
mark moves into the shared icons module as SolIcon (currentColor, sized
for inline text) and every SOL amount now uses it.

* webview: offer iCloud Drive in the storage picker on macOS

The core has shipped the icloud backend all along (icloudStorage: a
folder in the user's iCloud Drive that macOS syncs itself, no OAuth, no
tokens), the VS Code surface labels it, and connectCloud accepts the
kind. But the react picker offered only device / Google Drive / custom,
so a Mac user already mirroring to iCloud saw a picker with no active
row and no way to choose their actual backend.

The option renders only when the host UA says Macintosh (Tauri, a Mac
browser, VS Code on a Mac), so Android and Windows never see a folder
they cannot have. One tap connects: no input, no OAuth, matching how the
backend works. Strings carry the ko and ru translations like the rest of
the picker; the storage row now names iCloud Drive when it is active.

---------

Co-authored-by: RemilioNubilio <275382225+RemilioNubilio@users.noreply.github.com>
Co-authored-by: sumin <dwckey5356@gmail.com>

Author: RemilioNubilio

surfaces/webview/src/chat/Composer.tsx

@@ -10,7 +10,21 @@ import { CHAT_SLASH_COMMANDS } from "@iqlabs-official/agent-sdk/chat/slashComman
 
 // ── Context dot (compact donut circle for mobile, mirrors Claude Code's meter) ──
 // Colors: green < 60 %, amber < 85 %, red ≥ 85 %. Orange pulse while compacting.
+// Tapping it opens a small readout of the numbers behind the ring: the title
+// tooltip only exists for mouse hover, which touch (and most desktop users)
+// never see.
 function CtxDot({ tokens, window: win, compacting }: { tokens: number; window: number; compacting?: boolean }) {
+  const [open, setOpen] = useState(false);
+  const rootRef = useRef<HTMLSpanElement>(null);
+  // Tap-away closes: listen only while open, the same pattern the pickers use.
+  useEffect(() => {
+    if (!open) return;
+    const close = (e: PointerEvent) => {
+      if (rootRef.current && !rootRef.current.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener("pointerdown", close);
+    return () => document.removeEventListener("pointerdown", close);
+  }, [open]);
   const frac = Math.min(1, tokens / win);
   const pct = Math.round(frac * 100);
   const color = compacting
@@ -21,10 +35,37 @@ function CtxDot({ tokens, window: win, compacting }: { tokens: number; window: n
   const fmtK = (n: number) => n >= 1000 ? Math.round(n / 1000) + "k" : String(n);
   return (
     <span
-      className="ml-auto flex items-center"
+      ref={rootRef}
+      className="ml-auto relative flex items-center"
       title={compacting ? "Compacting context…" : `Context: ${tokens.toLocaleString()} / ${win.toLocaleString()} tokens (${pct}%)\n${fmtK(tokens)} / ${fmtK(win)} ctx`}
-      style={{ cursor: "default" }}
     >
+      {open && (
+        <div
+          className="an-term-mono absolute bottom-full right-0 z-30 mb-2 whitespace-nowrap px-3 py-2.5 text-[10px] font-bold tracking-wider"
+          style={{ background: "var(--an-bg-1)", border: "1px solid var(--an-line)", color: "var(--an-fg-dim)", boxShadow: "0 10px 30px rgba(0,0,0,0.5)" }}
+        >
+          <div className="mb-1 uppercase" style={{ color: "var(--an-fg-mute)" }}>Context</div>
+          {compacting ? (
+            <div style={{ color: "var(--an-orange, #f80)" }}>COMPACTING…</div>
+          ) : (
+            <>
+              <div style={{ color: "var(--an-fg)" }}>{tokens.toLocaleString()} / {win.toLocaleString()} tk</div>
+              <div className="mt-0.5 flex items-center gap-1.5">
+                <span style={{ color }}>{pct}%</span>
+                <span style={{ color: "var(--an-fg-mute)" }}>used · compacts near full</span>
+              </div>
+            </>
+          )}
+        </div>
+      )}
+      <button
+        type="button"
+        aria-label="Context usage"
+        aria-expanded={open}
+        onClick={() => setOpen((v) => !v)}
+        className="flex items-center active:opacity-80"
+        style={{ background: "none", border: 0, padding: 0 }}
+      >
       <svg width="18" height="18" viewBox="0 0 18 18" style={{ display: "block" }}>
         <circle cx="9" cy="9" r={r} fill="none" stroke="var(--an-line, #333)" strokeWidth="2.5" />
         <circle
@@ -38,6 +79,7 @@ function CtxDot({ tokens, window: win, compacting }: { tokens: number; window: n
           style={compacting ? { transformBox: "fill-box", transformOrigin: "center", animation: "ctxspin 1s linear infinite" } : undefined}
         />
       </svg>
+      </button>
       {compacting && <style>{`@keyframes ctxspin { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }`}</style>}
     </span>
   );

surfaces/webview/src/chat/Sessions.tsx

@@ -135,6 +135,12 @@ function StorageOption({ active, title, subtitle, onClick }: { active: boolean;
 
 type SettingsMode = "list" | "configure" | "wallet" | "connect" | "gdrive" | "custom" | "helius" | "github" | "engines" | "language";
 
+// The server runs on the host this page came from, so its OS decides whether an
+// iCloud Drive folder can exist. Every macOS host webview (Tauri WKWebView, a
+// browser on the Mac, VS Code's webview) carries Macintosh in the UA; Android
+// and Windows do not.
+const IS_MAC = typeof navigator !== "undefined" && /Macintosh/.test(navigator.userAgent);
+
 export function Sessions({
   onClose,
   embedded = false,
@@ -523,7 +529,7 @@ export function Sessions({
                 unlocked={!!state.walletAddress}
                 onUnlocked={() => setSettingsMode("connect")}
                 label={t(M.settings.storage)}
-                subtitle={cloudConnected ? `${info?.account ?? (info?.kind === "gdrive" ? "Google Drive" : t(M.settings.customCloud))}${cloudSync ? ` · ${cloudSync.ok ? t(M.settings.synced) : t(M.settings.syncError)}` : ""}` : t(M.settings.localOnly)}
+                subtitle={cloudConnected ? `${info?.account ?? (info?.kind === "gdrive" ? "Google Drive" : info?.kind === "icloud" ? "iCloud Drive" : t(M.settings.customCloud))}${cloudSync ? ` · ${cloudSync.ok ? t(M.settings.synced) : t(M.settings.syncError)}` : ""}` : t(M.settings.localOnly)}
                 icon={<svg width="22" height="22" viewBox="0 0 22 22" fill="none" stroke="currentColor" strokeWidth="1.55" strokeLinecap="round" strokeLinejoin="round"><path d="M4 7.5c0-1.4 3.1-2.5 7-2.5s7 1.1 7 2.5S14.9 10 11 10 4 8.9 4 7.5Z" /><path d="M4 7.5v7c0 1.4 3.1 2.5 7 2.5s7-1.1 7-2.5v-7" /><path d="M4 11c0 1.4 3.1 2.5 7 2.5s7-1.1 7-2.5" /></svg>}
               />
               {!state.walletAddress && (
@@ -809,6 +815,23 @@ export function Sessions({
                     setSettingsMode("configure");
                   }}
                 />
+                {/* iCloud = a folder macOS syncs (core icloudStorage, decided with zo): one tap,
+                    no OAuth. Only offered where that folder can exist, so Android never sees it. */}
+                {IS_MAC && (
+                  <StorageOption
+                    active={info?.kind === "icloud" && !!info?.connected}
+                    title="iCloud Drive"
+                    subtitle={
+                      info?.kind === "icloud" && info?.connected
+                        ? `${t(M.storagePicker.connected)}${info.location ? ` · ${info.location}` : ""}`
+                        : t(M.storagePicker.icloudSub)
+                    }
+                    onClick={() => {
+                      send({ type: "connectCloud", kind: "icloud" });
+                      setSettingsMode("configure");
+                    }}
+                  />
+                )}
                 <StorageOption
                   active={info?.kind === "gdrive" && !!info?.connected}
                   title="Google Drive"

surfaces/webview/src/i18n/messages.ts

@@ -287,6 +287,7 @@ export const M = {
     thisDeviceSub: m("Sessions stay local. No cloud mirror.", "세션이 로컬에만 저장됩니다. 클라우드 미러 없음.", "Сессии остаются локально. Без облачного зеркала."),
     connected: m("Connected", "연결됨", "Подключено"),
     gdriveSub: m("Mirror sessions to your own Google account", "내 Google 계정으로 세션 미러링", "Зеркалить сессии в ваш Google аккаунт"),
+    icloudSub: m("Mirror to your iCloud Drive folder. No sign in.", "iCloud Drive 폴더로 미러링. 로그인 불필요.", "Зеркалить в папку iCloud Drive. Без входа."),
     customStorage: m("Custom Storage", "커스텀 저장소", "Своё Хранилище"),
     customStorageSub: m("Mirror to an S3 / WebDAV / HTTP endpoint", "S3 / WebDAV / HTTP 엔드포인트로 미러링", "Зеркалить в S3 / WebDAV / HTTP endpoint"),
     done: m("Done", "완료", "Готово"),

surfaces/webview/src/icons.tsx

@@ -179,3 +179,15 @@ export function CollectionIcon(props: IconProps) {
     </svg>
   );
 }
+
+// The Solana mark (the official three slanted bars), sized for inline text
+// use next to SOL amounts. currentColor so it inherits the amount's tone.
+export function SolIcon(props: IconProps) {
+  return (
+    <svg width="10" height="8" viewBox="0 0 398 312" fill="currentColor" style={{ display: "inline-block", verticalAlign: "-0.5px" }} aria-label="SOL" {...props}>
+      <path d="M64.6 237.9c2.4-2.4 5.7-3.8 9.2-3.8h317.4c5.8 0 8.7 7 4.6 11.1l-62.7 62.7c-2.4 2.4-5.7 3.8-9.2 3.8H6.5c-5.8 0-8.7-7-4.6-11.1l62.7-62.7z"/>
+      <path d="M64.6 3.8C67.1 1.4 70.4 0 73.8 0h317.4c5.8 0 8.7 7 4.6 11.1l-62.7 62.7c-2.4 2.4-5.7 3.8-9.2 3.8H6.5c-5.8 0-8.7-7-4.6-11.1L64.6 3.8z"/>
+      <path d="M333.1 120.9c-2.4-2.4-5.7-3.8-9.2-3.8H6.5c-5.8 0-8.7 7-4.6 11.1l62.7 62.7c2.4 2.4 5.7 3.8 9.2 3.8h317.4c5.8 0 8.7-7 4.6-11.1l-62.7-62.7z"/>
+    </svg>
+  );
+}

surfaces/webview/src/market/AgentDirectory.tsx

@@ -5,7 +5,7 @@ import { walletAvatarSvg, walletBandColor } from "./walletAvatar";
 import { AgentListSkeleton } from "./Skeletons";
 import type { Reputation } from "../transport/protocol";
 import { LockedGate } from "../unlock/UnlockProvider";
-import { LockIcon } from "../icons";
+import { LockIcon, SolIcon } from "../icons";
 
 // The card's single accent — the avatar's own hue, normalized to one chic mid-tone so it reads
 // the same as a tag fill / gauge fill whatever the avatar's exact shade. The colour avatar is the
@@ -88,7 +88,10 @@ function AgentCard({ agent, self, onOpen }: { agent: Reputation; self?: boolean;
           <div className="an-ac-access">
             アクセス / ACCESS
             <br />
-            <span className={`an-ac-tier ${tier ? "" : "unranked"}`}>{tierName}</span>
+            {/* The badge reads the tier ramp, not the wallet accent: BRONZE is copper
+                everywhere (card, profile gauge, VS Code directory), per the shared
+                an-tier tokens this file already declares for exactly that reason. */}
+            <span className={`an-ac-tier ${tier ? "" : "unranked"}`} style={tier ? { background: `var(${tier.token})` } : undefined}>{tierName}</span>
           </div>
         </div>
         <div className="an-ac-body">
@@ -114,7 +117,7 @@ function AgentCard({ agent, self, onOpen }: { agent: Reputation; self?: boolean;
         </div>
         <div className="an-ac-foot">
           <span className="an-ac-box" />
-          <span>&gt;EARNED <span className="earn">{earned}&#9678;</span></span>
+          <span>&gt;EARNED <span className="earn">{earned} <SolIcon width={8} height={6.5} /></span></span>
           <span className="an-ac-box" />
         </div>
       </div>

surfaces/webview/src/market/AgentProfileView.tsx

@@ -883,7 +883,7 @@ export function AgentProfileView({ profile, onBack, onOpenSkill }: Props) {
               {/* WORK — verified repos as tall terminal-folders in a horizontal swipe row */}
               {verifiedRepos.length > 0 && (
                 <div>
-                  <p className="mb-2 text-[11px] uppercase tracking-wide" style={{ color: "var(--an-fg-mute)" }}>Verified work</p>
+                  <p className="mb-2 border-b pb-1.5 text-[11px] uppercase tracking-wide" style={{ color: "var(--an-fg-mute)", borderColor: "var(--an-line)" }}>Verified work</p>
                   <div className="an-workrow flex snap-x gap-3 overflow-x-auto pb-1 [-webkit-overflow-scrolling:touch]">
                     {sortedRepos.map((r) => (
                       <WorkCard key={`${r.owner}/${r.name}`} repo={r} skillById={skillById} onOpenSkill={onOpenSkill} onAllSkills={setRepoSkills} />
@@ -895,7 +895,7 @@ export function AgentProfileView({ profile, onBack, onOpenSkill }: Props) {
               {/* SKILLS — SD-card collectibles (colour = category, sigil generated from the name) */}
               {allSkills.length > 0 && (
                 <div>
-                  <p className="mb-2 text-[11px] uppercase tracking-wide" style={{ color: "var(--an-fg-mute)" }}>Skills</p>
+                  <p className="mb-2 border-b pb-1.5 text-[11px] uppercase tracking-wide" style={{ color: "var(--an-fg-mute)", borderColor: "var(--an-line)" }}>Skills</p>
                   <div className="an-cardgrid grid grid-cols-3 gap-3.5">
                     {allSkills.map((card) => (
                       <SkillSdCard

surfaces/webview/src/market/MarketScreen.tsx

@@ -9,7 +9,7 @@ import type { SkillCard } from "../transport/protocol";
 import { HeliusSetupPanel } from "../settings/HeliusKeyForm";
 import { SkillDetailSkeleton, MarketListSkeleton, AgentProfileSkeleton } from "./Skeletons";
 import { LockedGate, useUnlock } from "../unlock/UnlockProvider";
-import { LockIcon } from "../icons";
+import { LockIcon, SolIcon } from "../icons";
 import { AlertCard } from "../Alert";
 import { haptics } from "../haptics";
 
@@ -223,14 +223,24 @@ export function MarketScreen({ tab, onBack, onGoMarket }: { tab: ShellTab; onBac
         {/* SKILLS: SOL balance + owned-count readout (stacked, right-aligned) */}
         {isSkills && (
           <div className="shrink-0 text-right">
-            {balanceSol && <div className="an-term-mono text-[13px] font-bold leading-none" style={{ color: "var(--an-term-fg-2)", letterSpacing: "0.5px" }}>{balanceSol} ◎</div>}
+            {balanceSol && <div className="an-term-mono flex items-center justify-end gap-1.5 text-[13px] font-bold leading-none" style={{ color: "var(--an-term-fg-2)", letterSpacing: "0.5px" }}>{balanceSol} <SolIcon /></div>}
             <div className="an-term-mono text-[8px] font-bold tracking-wider" style={{ color: "var(--an-term-fg-7)", marginTop: "5px" }}>[ {state.marketOwned.length} OWNED ]</div>
           </div>
         )}
-        {/* MARKET: SOL balance + publish */}
-        {isMarket && balanceSol && <span className="an-term-mono shrink-0 text-xs font-bold" style={{ color: "var(--an-term-fg-2)", letterSpacing: "0.5px" }}>{balanceSol} ◎</span>}
+        {/* MARKET: SOL balance (taps through to your own agent profile) + publish */}
+        {isMarket && balanceSol && (
+          <button
+            onClick={() => { if (state.walletAddress) send({ type: "getAgentProfile", wallet: state.walletAddress }); }}
+            disabled={!state.walletAddress}
+            aria-label="Your agent profile"
+            className="an-term-mono flex shrink-0 items-center gap-1.5 self-center text-xs font-bold active:opacity-80"
+            style={{ color: "var(--an-term-fg-2)", letterSpacing: "0.5px" }}
+          >
+            {balanceSol} <SolIcon />
+          </button>
+        )}
         {isMarket && (
-          <LockedGate reason="publish" onUnlocked={() => setView("publish")} className="shrink-0" badge={false}>
+          <LockedGate reason="publish" onUnlocked={() => setView("publish")} className="shrink-0 self-center" badge={false}>
             <button
               onClick={() => setView("publish")}
               className="an-term-mono text-[10px] font-bold uppercase tracking-wider active:opacity-80"
@@ -273,11 +283,17 @@ export function MarketScreen({ tab, onBack, onGoMarket }: { tab: ShellTab; onBac
         </button>
       )}
       {isMarket && state.rpcStatus?.hasKey && (
-        <div className="mx-3 mt-2 shrink-0 flex items-center gap-1.5 rounded-lg border border-green-800/40 bg-green-900/10 px-3 py-1.5 text-[11px] text-green-500">
-          <span>●</span>
-          <span>{state.rpcStatus.network} · {state.rpcStatus.masked}</span>
-          <button onClick={() => setView("helius")} className="ml-auto text-zinc-600 hover:text-zinc-400">⚙</button>
-        </div>
+        <button
+          onClick={() => setView("helius")}
+          className="an-bracket mx-3.5 mt-2.5 shrink-0 flex items-center gap-2.5 px-3 py-2.5 active:opacity-80"
+          style={{ border: "1px solid var(--an-term-green-line)", color: "var(--an-term-green)", "--ts": "8px", "--bk": "var(--an-term-green-bg)", "--tk": "var(--an-term-green-line)" } as CSSProperties}
+        >
+          <span style={{ fontSize: "8px" }}>●</span>
+          <span className="an-term-mono flex-1 text-left text-[10px] font-bold tracking-wide">
+            <span className="uppercase">{state.rpcStatus.network}</span> · {state.rpcStatus.masked}
+          </span>
+          <span className="an-term-mono font-bold">›</span>
+        </button>
       )}
 
       {/* Browse tabs (market only): skill / workflow — agents moved to their own Agent tab */}
@@ -294,7 +310,10 @@ export function MarketScreen({ tab, onBack, onGoMarket }: { tab: ShellTab; onBac
                   : "border-transparent text-zinc-500 active:text-zinc-300",
               ].join(" ")}
             >
-              {t}s
+              <div>{t}s</div>
+              <div style={{ fontFamily: "'Noto Sans JP', sans-serif", fontWeight: 500, fontSize: "8px", marginTop: "3px", color: view === "browse" && state.marketTab === t ? "var(--an-term-fg-7)" : "var(--an-term-line-3)" }}>
+                {t === "skill" ? "スキル" : "ワークフロー"}
+              </div>
             </button>
           ))}
           {/* HIDE OWNED filter — on by default so the grid surfaces NEW skills */}

surfaces/webview/src/market/SkillReceiptOverlay.tsx

@@ -1,4 +1,5 @@
 import { useMemo } from "react";
+import { SolIcon } from "../icons";
 import type { SkillCard } from "../transport/protocol";
 import { skillSigilSvg } from "./skillSigil";
 
@@ -11,7 +12,7 @@ const SCANLINES = "repeating-linear-gradient(0deg, rgba(0,0,0,0.22) 0, rgba(0,0,
 
 export function SkillReceiptOverlay({ card, onClick }: { card: SkillCard; onClick?: () => void }) {
   const sigil = useMemo(() => skillSigilSvg(card.name, card.category), [card.name, card.category]);
-  const paid = card.price && card.price !== "0" ? `${(Number(card.price) / 1e9).toFixed(2)} ◎` : "FREE";
+  const paidSol = card.price && card.price !== "0" ? (Number(card.price) / 1e9).toFixed(2) : null;
   const mint = card.id ? `${card.id.slice(0, 4)}…${card.id.slice(-4)}` : "-";
   const kindLabel = card.type === "workflow" ? "Workflow" : "Skill";
 
@@ -34,7 +35,7 @@ export function SkillReceiptOverlay({ card, onClick }: { card: SkillCard; onClic
           <div className="flex min-w-0 flex-1 flex-col gap-2 pt-0.5">
             <span className="an-rcpt-k">{kindLabel}</span>
             <p className="an-rcpt-name">&gt;{card.name}<span className="unlock-cursor">_</span></p>
-            <div className="an-rcpt-row"><span className="an-rcpt-k">Paid</span><span>{paid}</span></div>
+            <div className="an-rcpt-row"><span className="an-rcpt-k">Paid</span><span>{paidSol ? <>{paidSol} <SolIcon width={8} height={6.5} /></> : "FREE"}</span></div>
             <div className="an-rcpt-row"><span className="an-rcpt-k">Mint</span><span style={{ color: "var(--an-green)" }}>{mint}</span></div>
             <div className="mt-auto flex flex-col gap-1.5">
               <span className="an-rcpt-k">Sync</span>

surfaces/webview/src/market/SkillSdCard.tsx

@@ -1,4 +1,5 @@
 import { useMemo } from "react";
+import { SolIcon } from "../icons";
 import type { SkillCard } from "../transport/protocol";
 import { skillSigilSvg } from "./skillSigil";
 import { mediaUrl } from "./mediaUrl";
@@ -48,7 +49,7 @@ export function SkillSdCard({ card, owned, disposed, firing, dim, onOpen }: Prop
         {/* the data chip: copies big, price + state stacked small */}
         <div className="an-sd-chip">
           <span className="an-sd-big">{card.supply ?? "—"}</span>
-          <span className="an-sd-meta">{priceSol ? `${priceSol}◎` : "FREE"}<br />{state}</span>
+          <span className="an-sd-meta">{priceSol ? <>{priceSol}<SolIcon width={7} height={5.5} /></> : "FREE"}<br />{state}</span>
         </div>
         {/* 2a gold star grade: summed GitHub stars of repos using this skill (issue #89), corner
             brackets on the right axis under the mark. Hidden at 0 so plain skills stay clean. */}