@elizaos/plugin-vincent 2.0.3-beta.6 → 2.0.3-beta.7

package/dist/TradingProfileCard.d.ts

@@ -0,0 +1,8 @@
+/** TradingProfileCard — P&L summary stats and per-token breakdown. */
+import type { VincentTradingProfile } from "./vincent-contracts";
+interface TradingProfileCardProps {
+    tradingProfile: VincentTradingProfile | null;
+}
+export declare const TradingProfileCard: import("react").MemoExoticComponent<({ tradingProfile, }: TradingProfileCardProps) => import("react/jsx-runtime").JSX.Element>;
+export {};
+//# sourceMappingURL=TradingProfileCard.d.ts.map

package/dist/TradingProfileCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TradingProfileCard.d.ts","sourceRoot":"","sources":["../src/TradingProfileCard.tsx"],"names":[],"mappings":"AAAA,sEAAsE;AAItE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAEjE,UAAU,uBAAuB;IAC/B,cAAc,EAAE,qBAAqB,GAAG,IAAI,CAAC;CAC9C;AAgCD,eAAO,MAAM,kBAAkB,4DAE5B,uBAAuB,6CAyDxB,CAAC"}

package/dist/TradingProfileCard.js

@@ -0,0 +1,70 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { BadgeDollarSign, Repeat2, Target, TrendingUp } from "lucide-react";
+import { memo } from "react";
+function StatTile({ label, value, tone = "muted", icon: Icon }) {
+  const toneClass = tone === "ok" ? "text-ok" : tone === "accent" ? "text-accent" : "text-muted";
+  return /* @__PURE__ */ jsxs("div", { className: "px-1 py-1", children: [
+    /* @__PURE__ */ jsx(Icon, { className: `h-4 w-4 ${toneClass}` }),
+    /* @__PURE__ */ jsx("div", { className: "mt-2 text-sm font-semibold tabular-nums text-txt", children: value }),
+    /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-2xs font-semibold text-muted", children: label })
+  ] });
+}
+function formatWinRate(rate) {
+  return `${(rate * 100).toFixed(1)}%`;
+}
+const TradingProfileCard = memo(function TradingProfileCard2({
+  tradingProfile
+}) {
+  if (!tradingProfile) {
+    return /* @__PURE__ */ jsx("div", { className: "px-1 py-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsx(TrendingUp, { className: "h-4 w-4 text-muted/50" }),
+      /* @__PURE__ */ jsx("span", { className: "h-2 w-2 rounded-full bg-muted/50", title: "None" })
+    ] }) });
+  }
+  const { totalPnl, winRate, totalSwaps, volume24h, tokenBreakdown } = tradingProfile;
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3 px-1 py-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(TrendingUp, { className: "h-4 w-4 text-accent" }),
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-txt", children: "P&L" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid gap-2 sm:grid-cols-4", children: [
+      /* @__PURE__ */ jsx(
+        StatTile,
+        {
+          icon: BadgeDollarSign,
+          label: "P&L",
+          value: totalPnl,
+          tone: "ok"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        StatTile,
+        {
+          icon: Target,
+          label: "Win",
+          value: formatWinRate(winRate),
+          tone: "accent"
+        }
+      ),
+      /* @__PURE__ */ jsx(StatTile, { icon: Repeat2, label: "Swaps", value: String(totalSwaps) }),
+      /* @__PURE__ */ jsx(StatTile, { icon: TrendingUp, label: "24h", value: volume24h })
+    ] }),
+    tokenBreakdown && tokenBreakdown.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: tokenBreakdown.slice(0, 8).map((tok) => /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: "inline-flex items-center gap-2 px-1 py-1.5 text-xs font-semibold text-muted",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-ok" }),
+          /* @__PURE__ */ jsx("span", { className: "text-txt", children: tok.symbol }),
+          /* @__PURE__ */ jsx("span", { className: "font-mono text-ok", children: tok.pnl }),
+          /* @__PURE__ */ jsx("span", { className: "font-mono", children: tok.swaps })
+        ]
+      },
+      tok.symbol
+    )) })
+  ] });
+});
+export {
+  TradingProfileCard
+};
+//# sourceMappingURL=TradingProfileCard.js.map

package/dist/TradingProfileCard.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/TradingProfileCard.tsx"],"sourcesContent":["/** TradingProfileCard — P&L summary stats and per-token breakdown. */\n\nimport { BadgeDollarSign, Repeat2, Target, TrendingUp } from \"lucide-react\";\nimport { type ComponentType, memo } from \"react\";\nimport type { VincentTradingProfile } from \"./vincent-contracts.js\";\n\ninterface TradingProfileCardProps {\n  tradingProfile: VincentTradingProfile | null;\n}\n\ninterface StatTileProps {\n  label: string;\n  value: string;\n  tone?: \"accent\" | \"ok\" | \"muted\";\n  icon: ComponentType<{ className?: string }>;\n}\n\nfunction StatTile({ label, value, tone = \"muted\", icon: Icon }: StatTileProps) {\n  const toneClass =\n    tone === \"ok\"\n      ? \"text-ok\"\n      : tone === \"accent\"\n        ? \"text-accent\"\n        : \"text-muted\";\n\n  return (\n    <div className=\"px-1 py-1\">\n      <Icon className={`h-4 w-4 ${toneClass}`} />\n      <div className=\"mt-2 text-sm font-semibold tabular-nums text-txt\">\n        {value}\n      </div>\n      <div className=\"mt-0.5 text-2xs font-semibold text-muted\">{label}</div>\n    </div>\n  );\n}\n\nfunction formatWinRate(rate: number): string {\n  return `${(rate * 100).toFixed(1)}%`;\n}\n\nexport const TradingProfileCard = memo(function TradingProfileCard({\n  tradingProfile,\n}: TradingProfileCardProps) {\n  if (!tradingProfile) {\n    return (\n      <div className=\"px-1 py-3\">\n        <div className=\"flex items-center justify-between gap-3\">\n          <TrendingUp className=\"h-4 w-4 text-muted/50\" />\n          <span className=\"h-2 w-2 rounded-full bg-muted/50\" title=\"None\" />\n        </div>\n      </div>\n    );\n  }\n\n  const { totalPnl, winRate, totalSwaps, volume24h, tokenBreakdown } =\n    tradingProfile;\n\n  return (\n    <div className=\"space-y-3 px-1 py-3\">\n      {/* Header */}\n      <div className=\"flex items-center gap-2\">\n        <TrendingUp className=\"h-4 w-4 text-accent\" />\n        <span className=\"text-sm font-semibold text-txt\">P&amp;L</span>\n      </div>\n\n      <div className=\"grid gap-2 sm:grid-cols-4\">\n        <StatTile\n          icon={BadgeDollarSign}\n          label=\"P&L\"\n          value={totalPnl}\n          tone=\"ok\"\n        />\n        <StatTile\n          icon={Target}\n          label=\"Win\"\n          value={formatWinRate(winRate)}\n          tone=\"accent\"\n        />\n        <StatTile icon={Repeat2} label=\"Swaps\" value={String(totalSwaps)} />\n        <StatTile icon={TrendingUp} label=\"24h\" value={volume24h} />\n      </div>\n\n      {tokenBreakdown && tokenBreakdown.length > 0 && (\n        <div className=\"flex flex-wrap gap-2\">\n          {tokenBreakdown.slice(0, 8).map((tok) => (\n            <span\n              key={tok.symbol}\n              className=\"inline-flex items-center gap-2 px-1 py-1.5 text-xs font-semibold text-muted\"\n            >\n              <span className=\"h-1.5 w-1.5 rounded-full bg-ok\" />\n              <span className=\"text-txt\">{tok.symbol}</span>\n              <span className=\"font-mono text-ok\">{tok.pnl}</span>\n              <span className=\"font-mono\">{tok.swaps}</span>\n            </span>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n});\n"],"mappings":"AA0BI,SACE,KADF;AAxBJ,SAAS,iBAAiB,SAAS,QAAQ,kBAAkB;AAC7D,SAA6B,YAAY;AAczC,SAAS,SAAS,EAAE,OAAO,OAAO,OAAO,SAAS,MAAM,KAAK,GAAkB;AAC7E,QAAM,YACJ,SAAS,OACL,YACA,SAAS,WACP,gBACA;AAER,SACE,qBAAC,SAAI,WAAU,aACb;AAAA,wBAAC,QAAK,WAAW,WAAW,SAAS,IAAI;AAAA,IACzC,oBAAC,SAAI,WAAU,oDACZ,iBACH;AAAA,IACA,oBAAC,SAAI,WAAU,4CAA4C,iBAAM;AAAA,KACnE;AAEJ;AAEA,SAAS,cAAc,MAAsB;AAC3C,SAAO,IAAI,OAAO,KAAK,QAAQ,CAAC,CAAC;AACnC;AAEO,MAAM,qBAAqB,KAAK,SAASA,oBAAmB;AAAA,EACjE;AACF,GAA4B;AAC1B,MAAI,CAAC,gBAAgB;AACnB,WACE,oBAAC,SAAI,WAAU,aACb,+BAAC,SAAI,WAAU,2CACb;AAAA,0BAAC,cAAW,WAAU,yBAAwB;AAAA,MAC9C,oBAAC,UAAK,WAAU,oCAAmC,OAAM,QAAO;AAAA,OAClE,GACF;AAAA,EAEJ;AAEA,QAAM,EAAE,UAAU,SAAS,YAAY,WAAW,eAAe,IAC/D;AAEF,SACE,qBAAC,SAAI,WAAU,uBAEb;AAAA,yBAAC,SAAI,WAAU,2BACb;AAAA,0BAAC,cAAW,WAAU,uBAAsB;AAAA,MAC5C,oBAAC,UAAK,WAAU,kCAAiC,iBAAO;AAAA,OAC1D;AAAA,IAEA,qBAAC,SAAI,WAAU,6BACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,OAAM;AAAA,UACN,OAAO;AAAA,UACP,MAAK;AAAA;AAAA,MACP;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,OAAM;AAAA,UACN,OAAO,cAAc,OAAO;AAAA,UAC5B,MAAK;AAAA;AAAA,MACP;AAAA,MACA,oBAAC,YAAS,MAAM,SAAS,OAAM,SAAQ,OAAO,OAAO,UAAU,GAAG;AAAA,MAClE,oBAAC,YAAS,MAAM,YAAY,OAAM,OAAM,OAAO,WAAW;AAAA,OAC5D;AAAA,IAEC,kBAAkB,eAAe,SAAS,KACzC,oBAAC,SAAI,WAAU,wBACZ,yBAAe,MAAM,GAAG,CAAC,EAAE,IAAI,CAAC,QAC/B;AAAA,MAAC;AAAA;AAAA,QAEC,WAAU;AAAA,QAEV;AAAA,8BAAC,UAAK,WAAU,kCAAiC;AAAA,UACjD,oBAAC,UAAK,WAAU,YAAY,cAAI,QAAO;AAAA,UACvC,oBAAC,UAAK,WAAU,qBAAqB,cAAI,KAAI;AAAA,UAC7C,oBAAC,UAAK,WAAU,aAAa,cAAI,OAAM;AAAA;AAAA;AAAA,MANlC,IAAI;AAAA,IAOX,CACD,GACH;AAAA,KAEJ;AAEJ,CAAC;","names":["TradingProfileCard"]}

package/dist/TradingStrategyPanel.d.ts

@@ -0,0 +1,10 @@
+/**
+ * TradingStrategyPanel — displays Vincent strategy configuration.
+ */
+import type { VincentStrategy } from "./vincent-contracts";
+interface TradingStrategyPanelProps {
+    strategy: VincentStrategy | null;
+}
+export declare const TradingStrategyPanel: import("react").MemoExoticComponent<({ strategy, }: TradingStrategyPanelProps) => import("react/jsx-runtime").JSX.Element>;
+export {};
+//# sourceMappingURL=TradingStrategyPanel.d.ts.map

package/dist/TradingStrategyPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TradingStrategyPanel.d.ts","sourceRoot":"","sources":["../src/TradingStrategyPanel.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAYH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAE3D,UAAU,yBAAyB;IACjC,QAAQ,EAAE,eAAe,GAAG,IAAI,CAAC;CAClC;AASD,eAAO,MAAM,oBAAoB,sDAE9B,yBAAyB,6CAuH1B,CAAC"}

package/dist/TradingStrategyPanel.js

@@ -0,0 +1,133 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button, StatusBadge } from "@elizaos/ui";
+import { useAgentElement } from "@elizaos/ui/agent-surface";
+import {
+  Activity,
+  ExternalLink,
+  Gauge,
+  Repeat2,
+  Settings2
+} from "lucide-react";
+import { memo, useMemo } from "react";
+const STRATEGY_LABELS = {
+  dca: "DCA",
+  rebalance: "Rebalance",
+  threshold: "Threshold",
+  manual: "Manual"
+};
+const TradingStrategyPanel = memo(function TradingStrategyPanel2({
+  strategy
+}) {
+  const strategyName = strategy?.name ?? null;
+  const paramEntries = useMemo(
+    () => Object.entries(strategy?.params ?? {}),
+    [strategy?.params]
+  );
+  const openVincent = useAgentElement({
+    id: "link-open-vincent",
+    role: "link",
+    label: "Open Vincent",
+    group: "vincent-strategy",
+    description: "Open the Vincent dashboard at heyvincent.ai in a new tab"
+  });
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3 px-1 py-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Activity, { className: "h-4 w-4 text-accent" }),
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-txt", children: "Strategy" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        strategyName && /* @__PURE__ */ jsx(StatusBadge, { label: STRATEGY_LABELS[strategyName], tone: "muted" }),
+        strategy !== null && /* @__PURE__ */ jsx(StatusBadge, { label: "Configured", tone: "success", withDot: true })
+      ] })
+    ] }),
+    strategy === null && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-6 gap-y-2 px-1 text-xs font-semibold text-muted", children: [
+      /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Settings2, { className: "h-4 w-4" }),
+        "Unset"
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Gauge, { className: "h-4 w-4" }),
+        "0%"
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Repeat2, { className: "h-4 w-4" }),
+        "Idle"
+      ] })
+    ] }),
+    strategy !== null && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-6 gap-y-2 px-1 text-xs font-semibold", children: [
+        /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 text-accent", children: [
+          /* @__PURE__ */ jsx(Settings2, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx("span", { className: "truncate text-txt", children: strategy.venues.join(" + ") || "Venue" })
+        ] }),
+        /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 text-muted", children: [
+          /* @__PURE__ */ jsx(Repeat2, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsxs("span", { className: "tabular-nums text-txt", children: [
+            strategy.intervalSeconds,
+            "s"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: `flex items-center gap-2 ${strategy.dryRun ? "text-warn" : "text-ok"}`,
+            children: [
+              /* @__PURE__ */ jsx(Gauge, { className: "h-4 w-4" }),
+              strategy.dryRun ? "Dry" : "Live"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 text-muted", children: [
+          /* @__PURE__ */ jsx(Activity, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx("span", { className: "tabular-nums text-txt", children: paramEntries.length })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+        paramEntries.slice(0, 6).map(([key, val]) => /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: "inline-flex max-w-full items-center gap-1.5 px-1 py-1.5 text-xs font-semibold text-muted",
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-accent/70" }),
+              /* @__PURE__ */ jsx("span", { className: "truncate", children: key }),
+              /* @__PURE__ */ jsx("span", { className: "max-w-24 truncate font-mono text-txt", children: String(val) })
+            ]
+          },
+          key
+        )),
+        paramEntries.length > 6 ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center px-1 py-1.5 text-xs font-semibold text-muted", children: [
+          "+",
+          paramEntries.length - 6
+        ] }) : null
+      ] }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          asChild: true,
+          variant: "outline",
+          size: "sm",
+          className: "h-9 w-fit px-4 text-xs font-semibold",
+          children: /* @__PURE__ */ jsxs(
+            "a",
+            {
+              ref: openVincent.ref,
+              ...openVincent.agentProps,
+              href: "https://heyvincent.ai",
+              target: "_blank",
+              rel: "noreferrer",
+              children: [
+                "Open Vincent",
+                /* @__PURE__ */ jsx(ExternalLink, { className: "h-3.5 w-3.5" })
+              ]
+            }
+          )
+        }
+      )
+    ] })
+  ] });
+});
+export {
+  TradingStrategyPanel
+};
+//# sourceMappingURL=TradingStrategyPanel.js.map

package/dist/TradingStrategyPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/TradingStrategyPanel.tsx"],"sourcesContent":["/**\n * TradingStrategyPanel — displays Vincent strategy configuration.\n */\n\nimport { Button, StatusBadge } from \"@elizaos/ui\";\nimport { useAgentElement } from \"@elizaos/ui/agent-surface\";\nimport {\n  Activity,\n  ExternalLink,\n  Gauge,\n  Repeat2,\n  Settings2,\n} from \"lucide-react\";\nimport { memo, useMemo } from \"react\";\nimport type { VincentStrategy } from \"./vincent-contracts.js\";\n\ninterface TradingStrategyPanelProps {\n  strategy: VincentStrategy | null;\n}\n\nconst STRATEGY_LABELS: Record<VincentStrategy[\"name\"], string> = {\n  dca: \"DCA\",\n  rebalance: \"Rebalance\",\n  threshold: \"Threshold\",\n  manual: \"Manual\",\n};\n\nexport const TradingStrategyPanel = memo(function TradingStrategyPanel({\n  strategy,\n}: TradingStrategyPanelProps) {\n  const strategyName = strategy?.name ?? null;\n  const paramEntries = useMemo(\n    () => Object.entries(strategy?.params ?? {}),\n    [strategy?.params],\n  );\n\n  const openVincent = useAgentElement<HTMLAnchorElement>({\n    id: \"link-open-vincent\",\n    role: \"link\",\n    label: \"Open Vincent\",\n    group: \"vincent-strategy\",\n    description: \"Open the Vincent dashboard at heyvincent.ai in a new tab\",\n  });\n\n  return (\n    <div className=\"space-y-3 px-1 py-3\">\n      <div className=\"flex items-center justify-between gap-3\">\n        <div className=\"flex items-center gap-2\">\n          <Activity className=\"h-4 w-4 text-accent\" />\n          <span className=\"text-sm font-semibold text-txt\">Strategy</span>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          {strategyName && (\n            <StatusBadge label={STRATEGY_LABELS[strategyName]} tone=\"muted\" />\n          )}\n          {strategy !== null && (\n            <StatusBadge label=\"Configured\" tone=\"success\" withDot />\n          )}\n        </div>\n      </div>\n\n      {strategy === null && (\n        <div className=\"flex flex-wrap items-center gap-x-6 gap-y-2 px-1 text-xs font-semibold text-muted\">\n          <span className=\"flex items-center gap-2\">\n            <Settings2 className=\"h-4 w-4\" />\n            Unset\n          </span>\n          <span className=\"flex items-center gap-2\">\n            <Gauge className=\"h-4 w-4\" />\n            0%\n          </span>\n          <span className=\"flex items-center gap-2\">\n            <Repeat2 className=\"h-4 w-4\" />\n            Idle\n          </span>\n        </div>\n      )}\n\n      {strategy !== null && (\n        <>\n          <div className=\"flex flex-wrap items-center gap-x-6 gap-y-2 px-1 text-xs font-semibold\">\n            <span className=\"flex items-center gap-2 text-accent\">\n              <Settings2 className=\"h-4 w-4\" />\n              <span className=\"truncate text-txt\">\n                {strategy.venues.join(\" + \") || \"Venue\"}\n              </span>\n            </span>\n            <span className=\"flex items-center gap-2 text-muted\">\n              <Repeat2 className=\"h-4 w-4\" />\n              <span className=\"tabular-nums text-txt\">\n                {strategy.intervalSeconds}s\n              </span>\n            </span>\n            <span\n              className={`flex items-center gap-2 ${strategy.dryRun ? \"text-warn\" : \"text-ok\"}`}\n            >\n              <Gauge className=\"h-4 w-4\" />\n              {strategy.dryRun ? \"Dry\" : \"Live\"}\n            </span>\n            <span className=\"flex items-center gap-2 text-muted\">\n              <Activity className=\"h-4 w-4\" />\n              <span className=\"tabular-nums text-txt\">\n                {paramEntries.length}\n              </span>\n            </span>\n          </div>\n\n          <div className=\"flex flex-wrap gap-2\">\n            {paramEntries.slice(0, 6).map(([key, val]) => (\n              <span\n                key={key}\n                className=\"inline-flex max-w-full items-center gap-1.5 px-1 py-1.5 text-xs font-semibold text-muted\"\n              >\n                <span className=\"h-1.5 w-1.5 rounded-full bg-accent/70\" />\n                <span className=\"truncate\">{key}</span>\n                <span className=\"max-w-24 truncate font-mono text-txt\">\n                  {String(val)}\n                </span>\n              </span>\n            ))}\n            {paramEntries.length > 6 ? (\n              <span className=\"inline-flex items-center px-1 py-1.5 text-xs font-semibold text-muted\">\n                +{paramEntries.length - 6}\n              </span>\n            ) : null}\n          </div>\n\n          <Button\n            asChild\n            variant=\"outline\"\n            size=\"sm\"\n            className=\"h-9 w-fit px-4 text-xs font-semibold\"\n          >\n            <a\n              ref={openVincent.ref}\n              {...openVincent.agentProps}\n              href=\"https://heyvincent.ai\"\n              target=\"_blank\"\n              rel=\"noreferrer\"\n            >\n              Open Vincent\n              <ExternalLink className=\"h-3.5 w-3.5\" />\n            </a>\n          </Button>\n        </>\n      )}\n    </div>\n  );\n});\n"],"mappings":"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","names":["TradingStrategyPanel"]}

package/dist/VincentAppView.d.ts

@@ -0,0 +1,4 @@
+/** VincentAppView — full-screen overlay app for Vincent trading access. */
+import type { OverlayAppContext } from "@elizaos/ui";
+export declare function VincentAppView({ exitToApps, t }: OverlayAppContext): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=VincentAppView.d.ts.map

package/dist/VincentAppView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VincentAppView.d.ts","sourceRoot":"","sources":["../src/VincentAppView.tsx"],"names":[],"mappings":"AAAA,2EAA2E;AAE3E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAgBrD,wBAAgB,cAAc,CAAC,EAAE,UAAU,EAAE,CAAC,EAAE,EAAE,iBAAiB,2CAmJlE"}

package/dist/VincentAppView.helpers.d.ts

@@ -0,0 +1,10 @@
+import type { WalletAddresses, WalletBalancesResponse } from "@elizaos/shared";
+import type { VincentStatusResponse, VincentStrategyResponse, VincentTradingProfileResponse } from "./vincent-contracts";
+export declare function loadVincentTuiState(): Promise<{
+    status: VincentStatusResponse;
+    walletAddresses: WalletAddresses | null;
+    walletBalances: WalletBalancesResponse | null;
+    strategy: VincentStrategyResponse;
+    tradingProfile: VincentTradingProfileResponse;
+}>;
+//# sourceMappingURL=VincentAppView.helpers.d.ts.map

package/dist/VincentAppView.helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VincentAppView.helpers.d.ts","sourceRoot":"","sources":["../src/VincentAppView.helpers.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,eAAe,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAE/E,OAAO,KAAK,EACV,qBAAqB,EACrB,uBAAuB,EACvB,6BAA6B,EAC9B,MAAM,qBAAqB,CAAC;AAE7B,wBAAsB,mBAAmB,IAAI,OAAO,CAAC;IACnD,MAAM,EAAE,qBAAqB,CAAC;IAC9B,eAAe,EAAE,eAAe,GAAG,IAAI,CAAC;IACxC,cAAc,EAAE,sBAAsB,GAAG,IAAI,CAAC;IAC9C,QAAQ,EAAE,uBAAuB,CAAC;IAClC,cAAc,EAAE,6BAA6B,CAAC;CAC/C,CAAC,CAyBD"}

package/dist/VincentAppView.helpers.js

@@ -0,0 +1,21 @@
+import { vincentClient } from "./client.js";
+async function loadVincentTuiState() {
+  const status = await vincentClient.vincentStatus();
+  const [walletAddresses, walletBalances, strategy, tradingProfile] = await Promise.allSettled([
+    vincentClient.getWalletAddresses(),
+    vincentClient.getWalletBalances(),
+    vincentClient.vincentStrategy(),
+    vincentClient.vincentTradingProfile()
+  ]);
+  return {
+    status,
+    walletAddresses: walletAddresses.status === "fulfilled" ? walletAddresses.value : null,
+    walletBalances: walletBalances.status === "fulfilled" ? walletBalances.value : null,
+    strategy: strategy.status === "fulfilled" ? strategy.value : { connected: status.connected, strategy: null },
+    tradingProfile: tradingProfile.status === "fulfilled" ? tradingProfile.value : { connected: status.connected, profile: null }
+  };
+}
+export {
+  loadVincentTuiState
+};
+//# sourceMappingURL=VincentAppView.helpers.js.map

package/dist/VincentAppView.helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/VincentAppView.helpers.ts"],"sourcesContent":["// Shared data helper for the Vincent terminal `interact` capability handler\n// (in VincentAppView.interact.ts), which loads the full dashboard snapshot for\n// the terminal-vincent-state / start-login / disconnect / update-strategy\n// capabilities. Kept out of the .tsx so that file exports only React components\n// and stays Fast-Refresh-compatible in dev.\nimport type { WalletAddresses, WalletBalancesResponse } from \"@elizaos/shared\";\nimport { vincentClient } from \"./client.js\";\nimport type {\n  VincentStatusResponse,\n  VincentStrategyResponse,\n  VincentTradingProfileResponse,\n} from \"./vincent-contracts.js\";\n\nexport async function loadVincentTuiState(): Promise<{\n  status: VincentStatusResponse;\n  walletAddresses: WalletAddresses | null;\n  walletBalances: WalletBalancesResponse | null;\n  strategy: VincentStrategyResponse;\n  tradingProfile: VincentTradingProfileResponse;\n}> {\n  const status = await vincentClient.vincentStatus();\n  const [walletAddresses, walletBalances, strategy, tradingProfile] =\n    await Promise.allSettled([\n      vincentClient.getWalletAddresses(),\n      vincentClient.getWalletBalances(),\n      vincentClient.vincentStrategy(),\n      vincentClient.vincentTradingProfile(),\n    ]);\n\n  return {\n    status,\n    walletAddresses:\n      walletAddresses.status === \"fulfilled\" ? walletAddresses.value : null,\n    walletBalances:\n      walletBalances.status === \"fulfilled\" ? walletBalances.value : null,\n    strategy:\n      strategy.status === \"fulfilled\"\n        ? strategy.value\n        : { connected: status.connected, strategy: null },\n    tradingProfile:\n      tradingProfile.status === \"fulfilled\"\n        ? tradingProfile.value\n        : { connected: status.connected, profile: null },\n  };\n}\n"],"mappings":"AAMA,SAAS,qBAAqB;AAO9B,eAAsB,sBAMnB;AACD,QAAM,SAAS,MAAM,cAAc,cAAc;AACjD,QAAM,CAAC,iBAAiB,gBAAgB,UAAU,cAAc,IAC9D,MAAM,QAAQ,WAAW;AAAA,IACvB,cAAc,mBAAmB;AAAA,IACjC,cAAc,kBAAkB;AAAA,IAChC,cAAc,gBAAgB;AAAA,IAC9B,cAAc,sBAAsB;AAAA,EACtC,CAAC;AAEH,SAAO;AAAA,IACL;AAAA,IACA,iBACE,gBAAgB,WAAW,cAAc,gBAAgB,QAAQ;AAAA,IACnE,gBACE,eAAe,WAAW,cAAc,eAAe,QAAQ;AAAA,IACjE,UACE,SAAS,WAAW,cAChB,SAAS,QACT,EAAE,WAAW,OAAO,WAAW,UAAU,KAAK;AAAA,IACpD,gBACE,eAAe,WAAW,cACtB,eAAe,QACf,EAAE,WAAW,OAAO,WAAW,SAAS,KAAK;AAAA,EACrD;AACF;","names":[]}

package/dist/VincentAppView.interact.d.ts

@@ -0,0 +1,2 @@
+export declare function interact(capability: string, params?: Record<string, unknown>): Promise<unknown>;
+//# sourceMappingURL=VincentAppView.interact.d.ts.map

package/dist/VincentAppView.interact.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VincentAppView.interact.d.ts","sourceRoot":"","sources":["../src/VincentAppView.interact.ts"],"names":[],"mappings":"AAQA,wBAAsB,QAAQ,CAC5B,UAAU,EAAE,MAAM,EAClB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAC/B,OAAO,CAAC,OAAO,CAAC,CA2ClB"}

package/dist/VincentAppView.interact.js

@@ -0,0 +1,45 @@
+import { vincentClient } from "./client.js";
+import { loadVincentTuiState } from "./VincentAppView.helpers";
+async function interact(capability, params) {
+  if (capability === "terminal-vincent-state") {
+    return { viewType: "tui", ...await loadVincentTuiState() };
+  }
+  if (capability === "terminal-vincent-start-login") {
+    return {
+      viewType: "tui",
+      login: await vincentClient.vincentStartLogin(
+        typeof params?.appName === "string" ? params.appName : "Eliza"
+      )
+    };
+  }
+  if (capability === "terminal-vincent-disconnect") {
+    return {
+      viewType: "tui",
+      disconnected: await vincentClient.vincentDisconnect()
+    };
+  }
+  if (capability === "terminal-vincent-update-strategy") {
+    const request = {};
+    if (typeof params?.strategy === "string") {
+      request.strategy = params.strategy;
+    }
+    if (params?.params && typeof params.params === "object") {
+      request.params = params.params;
+    }
+    if (typeof params?.intervalSeconds === "number") {
+      request.intervalSeconds = params.intervalSeconds;
+    }
+    if (typeof params?.dryRun === "boolean") {
+      request.dryRun = params.dryRun;
+    }
+    return {
+      viewType: "tui",
+      update: await vincentClient.vincentUpdateStrategy(request)
+    };
+  }
+  throw new Error(`Unsupported capability "${capability}"`);
+}
+export {
+  interact
+};
+//# sourceMappingURL=VincentAppView.interact.js.map

package/dist/VincentAppView.interact.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/VincentAppView.interact.ts"],"sourcesContent":["// View-bundle `interact` capability handler, split out of VincentAppView.tsx\n// so that file exports only React components and stays Fast-Refresh-compatible\n// (Vite would full-reload a component file that also exports a plain function).\n// The view bundle re-exports `interact` via ./vincent-view-bundle.ts.\nimport { vincentClient } from \"./client.js\";\nimport { loadVincentTuiState } from \"./VincentAppView.helpers\";\nimport type { VincentStrategyUpdateRequest } from \"./vincent-contracts.js\";\n\nexport async function interact(\n  capability: string,\n  params?: Record<string, unknown>,\n): Promise<unknown> {\n  if (capability === \"terminal-vincent-state\") {\n    return { viewType: \"tui\", ...(await loadVincentTuiState()) };\n  }\n\n  if (capability === \"terminal-vincent-start-login\") {\n    return {\n      viewType: \"tui\",\n      login: await vincentClient.vincentStartLogin(\n        typeof params?.appName === \"string\" ? params.appName : \"Eliza\",\n      ),\n    };\n  }\n\n  if (capability === \"terminal-vincent-disconnect\") {\n    return {\n      viewType: \"tui\",\n      disconnected: await vincentClient.vincentDisconnect(),\n    };\n  }\n\n  if (capability === \"terminal-vincent-update-strategy\") {\n    const request: VincentStrategyUpdateRequest = {};\n    if (typeof params?.strategy === \"string\") {\n      request.strategy =\n        params.strategy as VincentStrategyUpdateRequest[\"strategy\"];\n    }\n    if (params?.params && typeof params.params === \"object\") {\n      request.params = params.params as Record<string, unknown>;\n    }\n    if (typeof params?.intervalSeconds === \"number\") {\n      request.intervalSeconds = params.intervalSeconds;\n    }\n    if (typeof params?.dryRun === \"boolean\") {\n      request.dryRun = params.dryRun;\n    }\n    return {\n      viewType: \"tui\",\n      update: await vincentClient.vincentUpdateStrategy(request),\n    };\n  }\n\n  throw new Error(`Unsupported capability \"${capability}\"`);\n}\n"],"mappings":"AAIA,SAAS,qBAAqB;AAC9B,SAAS,2BAA2B;AAGpC,eAAsB,SACpB,YACA,QACkB;AAClB,MAAI,eAAe,0BAA0B;AAC3C,WAAO,EAAE,UAAU,OAAO,GAAI,MAAM,oBAAoB,EAAG;AAAA,EAC7D;AAEA,MAAI,eAAe,gCAAgC;AACjD,WAAO;AAAA,MACL,UAAU;AAAA,MACV,OAAO,MAAM,cAAc;AAAA,QACzB,OAAO,QAAQ,YAAY,WAAW,OAAO,UAAU;AAAA,MACzD;AAAA,IACF;AAAA,EACF;AAEA,MAAI,eAAe,+BAA+B;AAChD,WAAO;AAAA,MACL,UAAU;AAAA,MACV,cAAc,MAAM,cAAc,kBAAkB;AAAA,IACtD;AAAA,EACF;AAEA,MAAI,eAAe,oCAAoC;AACrD,UAAM,UAAwC,CAAC;AAC/C,QAAI,OAAO,QAAQ,aAAa,UAAU;AACxC,cAAQ,WACN,OAAO;AAAA,IACX;AACA,QAAI,QAAQ,UAAU,OAAO,OAAO,WAAW,UAAU;AACvD,cAAQ,SAAS,OAAO;AAAA,IAC1B;AACA,QAAI,OAAO,QAAQ,oBAAoB,UAAU;AAC/C,cAAQ,kBAAkB,OAAO;AAAA,IACnC;AACA,QAAI,OAAO,QAAQ,WAAW,WAAW;AACvC,cAAQ,SAAS,OAAO;AAAA,IAC1B;AACA,WAAO;AAAA,MACL,UAAU;AAAA,MACV,QAAQ,MAAM,cAAc,sBAAsB,OAAO;AAAA,IAC3D;AAAA,EACF;AAEA,QAAM,IAAI,MAAM,2BAA2B,UAAU,GAAG;AAC1D;","names":[]}

package/dist/VincentAppView.js

@@ -0,0 +1,145 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button, PagePanel, Spinner, useAppSelector } from "@elizaos/ui";
+import { useAgentElement } from "@elizaos/ui/agent-surface";
+import {
+  ArrowLeft,
+  KeyRound,
+  RefreshCw,
+  ShieldCheck,
+  Wallet
+} from "lucide-react";
+import { TradingProfileCard } from "./TradingProfileCard.js";
+import { TradingStrategyPanel } from "./TradingStrategyPanel.js";
+import { useVincentDashboard } from "./useVincentDashboard.js";
+import { VincentConnectionCard } from "./VincentConnectionCard.js";
+import { WalletStatusCard } from "./WalletStatusCard.js";
+function VincentAppView({ exitToApps, t }) {
+  const setActionNotice = useAppSelector((s) => s.setActionNotice);
+  const backLabel = t("nav.back", { defaultValue: "Back" });
+  const refreshLabel = t("actions.refresh", { defaultValue: "Refresh" });
+  const back = useAgentElement({
+    id: "action-back",
+    role: "button",
+    label: backLabel,
+    group: "vincent-header",
+    description: "Exit the Vincent app and return to the apps grid"
+  });
+  const refreshControl = useAgentElement({
+    id: "action-refresh",
+    role: "button",
+    label: refreshLabel,
+    group: "vincent-header",
+    description: "Reload Vincent connection status, wallet, strategy and P&L"
+  });
+  const {
+    vincentConnected,
+    walletAddresses,
+    walletBalances,
+    strategy,
+    tradingProfile,
+    loading,
+    error,
+    refresh
+  } = useVincentDashboard();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-testid": "vincent-shell",
+      className: "fixed inset-0 z-50 flex h-[100vh] flex-col overflow-hidden bg-bg pb-[var(--safe-area-bottom,0px)] pl-[var(--safe-area-left,0px)] pr-[var(--safe-area-right,0px)] pt-[var(--safe-area-top,0px)] supports-[height:100dvh]:h-[100dvh]",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center justify-between gap-3 px-3 py-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                ref: back.ref,
+                ...back.agentProps,
+                variant: "ghost",
+                size: "icon",
+                className: "h-9 w-9 shrink-0 text-muted hover:text-txt",
+                onClick: exitToApps,
+                "aria-label": backLabel,
+                children: /* @__PURE__ */ jsx(ArrowLeft, { className: "h-4 w-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "min-w-0", children: /* @__PURE__ */ jsx("h1", { className: "text-base font-semibold text-txt", children: "Vincent" }) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
+            /* @__PURE__ */ jsxs(
+              "span",
+              {
+                "data-testid": "vincent-status-card",
+                className: `inline-flex max-w-[8.5rem] items-center gap-1.5 px-1 py-1 text-xs-tight font-semibold ${vincentConnected ? "text-ok" : "text-muted"}`,
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: `h-1.5 w-1.5 shrink-0 rounded-full ${vincentConnected ? "bg-ok" : "bg-muted"}`
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: "truncate", children: vincentConnected ? t("vincent.statusConnected", { defaultValue: "Connected" }) : t("vincent.statusDisconnected", {
+                    defaultValue: "Disconnected"
+                  }) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                ref: refreshControl.ref,
+                ...refreshControl.agentProps,
+                variant: "ghost",
+                size: "icon",
+                className: "h-9 w-9 text-muted hover:text-txt",
+                onClick: refresh,
+                disabled: loading,
+                "aria-label": refreshLabel,
+                children: /* @__PURE__ */ jsx(RefreshCw, { className: `h-4 w-4 ${loading ? "animate-spin" : ""}` })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "chat-native-scrollbar flex-1 overflow-y-auto px-3 pb-32 pt-2 sm:px-5 sm:pb-36", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-5xl", children: [
+          error && /* @__PURE__ */ jsx(PagePanel.Notice, { tone: "danger", children: error }),
+          loading && !vincentConnected && walletAddresses === null && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center py-16", children: [
+            /* @__PURE__ */ jsx(Spinner, { className: "h-5 w-5 text-muted" }),
+            /* @__PURE__ */ jsx("span", { className: "ml-3 text-sm text-muted", children: "Loading\u2026" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+            /* @__PURE__ */ jsx(VincentConnectionCard, { setActionNotice, t }),
+            vincentConnected && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                WalletStatusCard,
+                {
+                  walletAddresses,
+                  walletBalances,
+                  setActionNotice
+                }
+              ),
+              /* @__PURE__ */ jsx(TradingStrategyPanel, { strategy }),
+              /* @__PURE__ */ jsx(TradingProfileCard, { tradingProfile })
+            ] }),
+            !vincentConnected && !loading && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-6 gap-y-3 px-1 py-2 text-sm font-semibold text-muted", children: [
+              /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 text-accent", children: [
+                /* @__PURE__ */ jsx(ShieldCheck, { className: "h-4 w-4" }),
+                "Vincent"
+              ] }),
+              /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx(Wallet, { className: "h-4 w-4" }),
+                "Wallet"
+              ] }),
+              /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx(KeyRound, { className: "h-4 w-4" }),
+                "OAuth"
+              ] })
+            ] })
+          ] }) })
+        ] }) })
+      ]
+    }
+  );
+}
+export {
+  VincentAppView
+};
+//# sourceMappingURL=VincentAppView.js.map

package/dist/VincentAppView.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/VincentAppView.tsx"],"sourcesContent":["/** VincentAppView — full-screen overlay app for Vincent trading access. */\n\nimport type { OverlayAppContext } from \"@elizaos/ui\";\nimport { Button, PagePanel, Spinner, useAppSelector } from \"@elizaos/ui\";\nimport { useAgentElement } from \"@elizaos/ui/agent-surface\";\nimport {\n  ArrowLeft,\n  KeyRound,\n  RefreshCw,\n  ShieldCheck,\n  Wallet,\n} from \"lucide-react\";\nimport { TradingProfileCard } from \"./TradingProfileCard.js\";\nimport { TradingStrategyPanel } from \"./TradingStrategyPanel.js\";\nimport { useVincentDashboard } from \"./useVincentDashboard.js\";\nimport { VincentConnectionCard } from \"./VincentConnectionCard.js\";\nimport { WalletStatusCard } from \"./WalletStatusCard.js\";\n\nexport function VincentAppView({ exitToApps, t }: OverlayAppContext) {\n  // Subscribe to only the stable `setActionNotice` callback instead of the whole\n  // AppContext value, which is rebuilt on a large dependency array — this stops\n  // VincentAppView (and its card subtree) re-rendering on unrelated context churn.\n  const setActionNotice = useAppSelector((s) => s.setActionNotice);\n\n  const backLabel = t(\"nav.back\", { defaultValue: \"Back\" });\n  const refreshLabel = t(\"actions.refresh\", { defaultValue: \"Refresh\" });\n  const back = useAgentElement<HTMLButtonElement>({\n    id: \"action-back\",\n    role: \"button\",\n    label: backLabel,\n    group: \"vincent-header\",\n    description: \"Exit the Vincent app and return to the apps grid\",\n  });\n  const refreshControl = useAgentElement<HTMLButtonElement>({\n    id: \"action-refresh\",\n    role: \"button\",\n    label: refreshLabel,\n    group: \"vincent-header\",\n    description: \"Reload Vincent connection status, wallet, strategy and P&L\",\n  });\n\n  const {\n    vincentConnected,\n    walletAddresses,\n    walletBalances,\n    strategy,\n    tradingProfile,\n    loading,\n    error,\n    refresh,\n  } = useVincentDashboard();\n\n  return (\n    <div\n      data-testid=\"vincent-shell\"\n      className=\"fixed inset-0 z-50 flex h-[100vh] flex-col overflow-hidden bg-bg pb-[var(--safe-area-bottom,0px)] pl-[var(--safe-area-left,0px)] pr-[var(--safe-area-right,0px)] pt-[var(--safe-area-top,0px)] supports-[height:100dvh]:h-[100dvh]\"\n    >\n      {/* Header */}\n      <div className=\"flex shrink-0 items-center justify-between gap-3 px-3 py-2\">\n        <div className=\"flex min-w-0 flex-1 items-center gap-3\">\n          <Button\n            ref={back.ref}\n            {...back.agentProps}\n            variant=\"ghost\"\n            size=\"icon\"\n            className=\"h-9 w-9 shrink-0 text-muted hover:text-txt\"\n            onClick={exitToApps}\n            aria-label={backLabel}\n          >\n            <ArrowLeft className=\"h-4 w-4\" />\n          </Button>\n          <div className=\"min-w-0\">\n            <h1 className=\"text-base font-semibold text-txt\">Vincent</h1>\n          </div>\n        </div>\n\n        <div className=\"flex shrink-0 items-center gap-2\">\n          {/* Connection status pill */}\n          <span\n            data-testid=\"vincent-status-card\"\n            className={`inline-flex max-w-[8.5rem] items-center gap-1.5 px-1 py-1 text-xs-tight font-semibold ${\n              vincentConnected ? \"text-ok\" : \"text-muted\"\n            }`}\n          >\n            <span\n              className={`h-1.5 w-1.5 shrink-0 rounded-full ${vincentConnected ? \"bg-ok\" : \"bg-muted\"}`}\n            />\n            <span className=\"truncate\">\n              {vincentConnected\n                ? t(\"vincent.statusConnected\", { defaultValue: \"Connected\" })\n                : t(\"vincent.statusDisconnected\", {\n                    defaultValue: \"Disconnected\",\n                  })}\n            </span>\n          </span>\n\n          <Button\n            ref={refreshControl.ref}\n            {...refreshControl.agentProps}\n            variant=\"ghost\"\n            size=\"icon\"\n            className=\"h-9 w-9 text-muted hover:text-txt\"\n            onClick={refresh}\n            disabled={loading}\n            aria-label={refreshLabel}\n          >\n            <RefreshCw className={`h-4 w-4 ${loading ? \"animate-spin\" : \"\"}`} />\n          </Button>\n        </div>\n      </div>\n\n      {/* Scrollable content */}\n      <div className=\"chat-native-scrollbar flex-1 overflow-y-auto px-3 pb-32 pt-2 sm:px-5 sm:pb-36\">\n        <div className=\"mx-auto max-w-5xl\">\n          {/* Error banner */}\n          {error && <PagePanel.Notice tone=\"danger\">{error}</PagePanel.Notice>}\n\n          {/* Initial loading state */}\n          {loading && !vincentConnected && walletAddresses === null && (\n            <div className=\"flex items-center justify-center py-16\">\n              <Spinner className=\"h-5 w-5 text-muted\" />\n              <span className=\"ml-3 text-sm text-muted\">Loading…</span>\n            </div>\n          )}\n\n          <div className=\"flex flex-col gap-4\">\n            <div className=\"space-y-3\">\n              <VincentConnectionCard setActionNotice={setActionNotice} t={t} />\n\n              {vincentConnected && (\n                <>\n                  <WalletStatusCard\n                    walletAddresses={walletAddresses}\n                    walletBalances={walletBalances}\n                    setActionNotice={setActionNotice}\n                  />\n\n                  <TradingStrategyPanel strategy={strategy} />\n\n                  <TradingProfileCard tradingProfile={tradingProfile} />\n                </>\n              )}\n\n              {!vincentConnected && !loading && (\n                <div className=\"flex flex-wrap items-center gap-x-6 gap-y-3 px-1 py-2 text-sm font-semibold text-muted\">\n                  <span className=\"flex items-center gap-2 text-accent\">\n                    <ShieldCheck className=\"h-4 w-4\" />\n                    Vincent\n                  </span>\n                  <span className=\"flex items-center gap-2\">\n                    <Wallet className=\"h-4 w-4\" />\n                    Wallet\n                  </span>\n                  <span className=\"flex items-center gap-2\">\n                    <KeyRound className=\"h-4 w-4\" />\n                    OAuth\n                  </span>\n                </div>\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/VincentConnectionCard.d.ts

@@ -0,0 +1,9 @@
+/** VincentConnectionCard — OAuth connect/disconnect UI for Vincent. */
+interface VincentConnectionCardProps {
+    onConnectedChange?: (connected: boolean) => void;
+    setActionNotice: (text: string, tone?: "info" | "success" | "error", ttlMs?: number) => void;
+    t: (key: string, opts?: Record<string, unknown>) => string;
+}
+export declare const VincentConnectionCard: import("react").MemoExoticComponent<({ setActionNotice, t, }: VincentConnectionCardProps) => import("react/jsx-runtime").JSX.Element>;
+export {};
+//# sourceMappingURL=VincentConnectionCard.d.ts.map

package/dist/VincentConnectionCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VincentConnectionCard.d.ts","sourceRoot":"","sources":["../src/VincentConnectionCard.tsx"],"names":[],"mappings":"AAAA,uEAAuE;AAQvE,UAAU,0BAA0B;IAClC,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,eAAe,EAAE,CACf,IAAI,EAAE,MAAM,EACZ,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,EACnC,KAAK,CAAC,EAAE,MAAM,KACX,IAAI,CAAC;IACV,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,MAAM,CAAC;CAC5D;AAiBD,eAAO,MAAM,qBAAqB,gEAG/B,0BAA0B,6CA4G3B,CAAC"}