opentradex 0.1.3 → 0.1.4

package/web/src/components/DashboardApp.tsx

@@ -1,20 +1,22 @@
 "use client";
 
-import { useEffect, useState, useCallback, useRef } from "react";
-import { TopBar } from "@/components/TopBar";
-import { PortfolioStrip } from "@/components/PortfolioStrip";
-import { PositionsPanel } from "@/components/PositionsPanel";
-import { MarketScanner } from "@/components/MarketScanner";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { LiveStream } from "@/components/LiveStream";
+import { MarketScanner } from "@/components/MarketScanner";
 import { NewsFeed } from "@/components/NewsFeed";
+import { PortfolioStrip } from "@/components/PortfolioStrip";
+import { PositionsPanel } from "@/components/PositionsPanel";
+import { TopBar } from "@/components/TopBar";
 import type {
-  Portfolio,
-  Trade,
-  NewsArticle,
   Market,
-  StreamLine,
+  NewsArticle,
+  Portfolio,
   PositionPrice,
+  PromptEntry,
   SocialPost,
+  StreamLine,
+  Trade,
+  WorkspaceSummary,
 } from "@/lib/types";
 
 const SHOW_PNL = false;
@@ -25,6 +27,7 @@ export function DashboardApp() {
   const [news, setNews] = useState<NewsArticle[]>([]);
   const [liveNews, setLiveNews] = useState<NewsArticle[]>([]);
   const [markets, setMarkets] = useState<Market[]>([]);
+  const [workspace, setWorkspace] = useState<WorkspaceSummary | null>(null);
   const [rationale, setRationale] = useState("");
   const [customPrompt, setCustomPrompt] = useState("");
   const [agentStatus, setAgentStatus] = useState("");
@@ -40,8 +43,19 @@ export function DashboardApp() {
   const [loadingTruth, setLoadingTruth] = useState(true);
   const [loadingReddit, setLoadingReddit] = useState(true);
   const [loadingTiktok, setLoadingTiktok] = useState(true);
+  const [promptHistory, setPromptHistory] = useState<PromptEntry[]>([]);
   const streamOffset = useRef(0);
 
+  const fetchWorkspace = useCallback(async () => {
+    try {
+      const res = await fetch("/api/workspace");
+      const data = await res.json();
+      setWorkspace(data);
+    } catch {
+      // ignore
+    }
+  }, []);
+
   const fetchAll = useCallback(async () => {
     try {
       const [p, t, n, m] = await Promise.all([
@@ -101,11 +115,11 @@ export function DashboardApp() {
         setLoadingTweets(false);
         tweetRetries.current = 0;
       } else {
-        tweetRetries.current++;
+        tweetRetries.current += 1;
         if (tweetRetries.current > 12) setLoadingTweets(false);
       }
     } catch {
-      tweetRetries.current++;
+      tweetRetries.current += 1;
       if (tweetRetries.current > 12) setLoadingTweets(false);
     }
   }, []);
@@ -132,11 +146,11 @@ export function DashboardApp() {
         setLoadingReddit(false);
         redditRetries.current = 0;
       } else {
-        redditRetries.current++;
+        redditRetries.current += 1;
         if (redditRetries.current > 12) setLoadingReddit(false);
       }
     } catch {
-      redditRetries.current++;
+      redditRetries.current += 1;
       if (redditRetries.current > 12) setLoadingReddit(false);
     }
   }, []);
@@ -151,16 +165,17 @@ export function DashboardApp() {
         setLoadingTiktok(false);
         tiktokRetries.current = 0;
       } else {
-        tiktokRetries.current++;
+        tiktokRetries.current += 1;
         if (tiktokRetries.current > 12) setLoadingTiktok(false);
       }
     } catch {
-      tiktokRetries.current++;
+      tiktokRetries.current += 1;
       if (tiktokRetries.current > 12) setLoadingTiktok(false);
     }
   }, []);
 
   useEffect(() => {
+    fetchWorkspace();
     fetchAll();
     fetchLiveNews();
     fetchPrices();
@@ -168,9 +183,10 @@ export function DashboardApp() {
     const redditDelay = setTimeout(fetchRedditPosts, 5_000);
     const tweetDelay = setTimeout(fetchTweets, 15_000);
     const tiktokDelay = setTimeout(fetchTiktokPosts, 25_000);
-    const id = setInterval(fetchAll, 5000);
+    const dataId = setInterval(fetchAll, 5_000);
     const newsId = setInterval(fetchLiveNews, 120_000);
     const pricesId = setInterval(fetchPrices, 30_000);
+    const workspaceId = setInterval(fetchWorkspace, 60_000);
     const tweetsId = setInterval(() => {
       if (tweetRetries.current > 0 && tweetRetries.current <= 12) {
         fetchTweets();
@@ -190,10 +206,12 @@ export function DashboardApp() {
       }
     }, 5_000);
     const tiktokSlowId = setInterval(fetchTiktokPosts, 300_000);
+
     return () => {
-      clearInterval(id);
+      clearInterval(dataId);
       clearInterval(newsId);
       clearInterval(pricesId);
+      clearInterval(workspaceId);
       clearTimeout(tweetDelay);
       clearTimeout(redditDelay);
       clearTimeout(tiktokDelay);
@@ -205,16 +223,29 @@ export function DashboardApp() {
       clearInterval(tiktokRetryId);
       clearInterval(tiktokSlowId);
     };
-  }, [fetchAll, fetchLiveNews, fetchPrices, fetchTweets, fetchTruthPosts, fetchRedditPosts, fetchTiktokPosts]);
+  }, [
+    fetchAll,
+    fetchLiveNews,
+    fetchPrices,
+    fetchRedditPosts,
+    fetchTiktokPosts,
+    fetchTruthPosts,
+    fetchTweets,
+    fetchWorkspace,
+  ]);
 
   useEffect(() => {
     const pollStream = async () => {
       try {
-        const res = await fetch(
-          `/api/agent/stream?offset=${streamOffset.current}`
-        );
+        const res = await fetch(`/api/agent/stream?offset=${streamOffset.current}`);
         const data = await res.json();
         setLiveStatus(data.status?.status || "idle");
+
+        if (data.offset < streamOffset.current) {
+          setStreamLines([]);
+          streamOffset.current = 0;
+        }
+
         if (data.lines.length > 0) {
           setStreamLines((prev) => {
             const next = [...prev, ...data.lines];
@@ -222,28 +253,42 @@ export function DashboardApp() {
           });
           streamOffset.current = data.offset;
         }
-        if (data.offset < streamOffset.current) {
-          setStreamLines([]);
-          streamOffset.current = 0;
-        }
       } catch {
         // ignore
       }
     };
-    const id = setInterval(pollStream, 1000);
+
+    const id = setInterval(pollStream, 1_000);
     return () => clearInterval(id);
   }, []);
 
   const mergedNews = mergeNews(news, liveNews);
 
-  const runCycle = async (prompt?: string) => {
-    setAgentStatus("Starting cycle...");
+  const runCycle = async (prompt?: string, channel = "command") => {
+    const cleanPrompt = prompt?.trim();
+    if (cleanPrompt) {
+      setPromptHistory((prev) => [
+        ...prev.slice(-7),
+        {
+          id: `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+          text: cleanPrompt,
+          channel,
+          createdAt: new Date().toISOString(),
+        },
+      ]);
+    }
+
+    setAgentStatus(cleanPrompt ? `Routing ${channel} request...` : "Starting cycle...");
     setStreamLines([]);
     streamOffset.current = 0;
+
     const res = await fetch("/api/agent", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ action: "run_cycle", prompt }),
+      body: JSON.stringify({
+        action: "run_cycle",
+        prompt: cleanPrompt ? buildChannelPrompt(cleanPrompt, channel, workspace) : undefined,
+      }),
     });
     const data = await res.json();
     setAgentStatus(data.message || data.status);
@@ -262,11 +307,23 @@ export function DashboardApp() {
 
   const submitRationale = async () => {
     if (!rationale.trim()) return;
+
+    const thesis = rationale.trim();
+    setPromptHistory((prev) => [
+      ...prev.slice(-7),
+      {
+        id: `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+        text: thesis,
+        channel: "command",
+        createdAt: new Date().toISOString(),
+      },
+    ]);
     setAgentStatus("Researching thesis...");
+
     const res = await fetch("/api/agent", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ action: "submit_rationale", rationale }),
+      body: JSON.stringify({ action: "submit_rationale", rationale: thesis }),
     });
     const data = await res.json();
     setAgentStatus(data.message || data.status);
@@ -274,64 +331,73 @@ export function DashboardApp() {
   };
 
   return (
-    <div className="h-screen w-screen max-w-full flex flex-col overflow-hidden bg-background">
-      <TopBar
-        liveStatus={liveStatus}
-        agentStatus={agentStatus}
-        rationale={rationale}
-        loopInterval={loopInterval}
-        onRationaleChange={setRationale}
-        onSubmitRationale={submitRationale}
-        onRunCycle={() => runCycle()}
-        onStartLoop={startLoop}
-        onRefresh={() => {
-          fetchAll();
-          fetchLiveNews();
-        }}
-        onLoopIntervalChange={setLoopInterval}
-      />
-
-      <PortfolioStrip portfolio={portfolio} unrealizedPnl={prices.reduce((s, p) => s + p.unrealized_pnl, 0)} />
-
-      <div className="flex-1 grid grid-cols-1 md:grid-cols-[minmax(0,280px)_minmax(0,1fr)] lg:grid-cols-[minmax(0,280px)_minmax(0,1fr)_minmax(0,340px)] min-h-0 overflow-hidden">
-        <div className="hidden md:flex flex-col border-r border-border min-h-0 overflow-hidden">
-          <div className="flex-1 min-h-0 overflow-hidden">
-            <PositionsPanel
-              positions={portfolio?.open_positions ?? []}
-              trades={trades}
-              prices={prices}
-            />
-          </div>
-          <div className="h-[40%] min-h-0 overflow-hidden border-t border-border">
-            <MarketScanner markets={markets} />
+    <div className="dashboard-shell h-screen w-screen max-w-full overflow-hidden bg-background">
+      <div className="flex h-full min-h-0 flex-col">
+        <TopBar
+          workspace={workspace}
+          liveStatus={liveStatus}
+          agentStatus={agentStatus}
+          rationale={rationale}
+          loopInterval={loopInterval}
+          onRationaleChange={setRationale}
+          onSubmitRationale={submitRationale}
+          onRunCycle={() => runCycle()}
+          onStartLoop={startLoop}
+          onRefresh={() => {
+            fetchWorkspace();
+            fetchAll();
+            fetchLiveNews();
+          }}
+          onLoopIntervalChange={setLoopInterval}
+        />
+
+        <PortfolioStrip
+          portfolio={portfolio}
+          unrealizedPnl={prices.reduce((sum, price) => sum + price.unrealized_pnl, 0)}
+        />
+
+        <div className="grid min-h-0 flex-1 grid-cols-1 overflow-hidden md:grid-cols-[minmax(0,280px)_minmax(0,1fr)] lg:grid-cols-[minmax(0,300px)_minmax(0,1fr)_minmax(0,360px)]">
+          <div className="hidden min-h-0 flex-col overflow-hidden border-r border-border/70 bg-white/40 backdrop-blur md:flex">
+            <div className="flex-1 min-h-0 overflow-hidden">
+              <PositionsPanel
+                positions={portfolio?.open_positions ?? []}
+                trades={trades}
+                prices={prices}
+              />
+            </div>
+            <div className="h-[40%] min-h-0 overflow-hidden border-t border-border/70">
+              <MarketScanner markets={markets} />
+            </div>
           </div>
-        </div>
 
-        <div className="flex flex-col min-h-0">
-          <LiveStream
-            lines={streamLines}
-            liveStatus={liveStatus}
-            customPrompt={customPrompt}
-            onCustomPromptChange={setCustomPrompt}
-            onSendCommand={(prompt) => {
-              runCycle(prompt);
-              setCustomPrompt("");
-            }}
-          />
-        </div>
+          <div className="min-h-0 overflow-hidden">
+            <LiveStream
+              lines={streamLines}
+              liveStatus={liveStatus}
+              customPrompt={customPrompt}
+              prompts={promptHistory}
+              workspace={workspace}
+              onCustomPromptChange={setCustomPrompt}
+              onSendCommand={(prompt, channel) => {
+                runCycle(prompt, channel);
+                setCustomPrompt("");
+              }}
+            />
+          </div>
 
-        <div className="hidden lg:flex flex-col border-l border-border min-h-0 overflow-hidden">
-          <NewsFeed
-            news={mergedNews}
-            tweets={tweets}
-            truthPosts={truthPosts}
-            redditPosts={redditPosts}
-            tiktokPosts={tiktokPosts}
-            loadingTweets={loadingTweets}
-            loadingTruth={loadingTruth}
-            loadingReddit={loadingReddit}
-            loadingTiktok={loadingTiktok}
-          />
+          <div className="hidden min-h-0 flex-col overflow-hidden border-l border-border/70 bg-white/40 backdrop-blur lg:flex">
+            <NewsFeed
+              news={mergedNews}
+              tweets={tweets}
+              truthPosts={truthPosts}
+              redditPosts={redditPosts}
+              tiktokPosts={tiktokPosts}
+              loadingTweets={loadingTweets}
+              loadingTruth={loadingTruth}
+              loadingReddit={loadingReddit}
+              loadingTiktok={loadingTiktok}
+            />
+          </div>
         </div>
       </div>
     </div>
@@ -348,6 +414,7 @@ function mergeNews(dbNews: NewsArticle[], liveNews: NewsArticle[]): NewsArticle[
       merged.push(item);
     }
   }
+
   for (const item of liveNews) {
     if (!seen.has(item.title)) {
       seen.add(item.title);
@@ -355,8 +422,45 @@ function mergeNews(dbNews: NewsArticle[], liveNews: NewsArticle[]): NewsArticle[
     }
   }
 
-  merged.sort(
-    (a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()
-  );
+  merged.sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime());
   return merged.slice(0, 60);
 }
+
+function buildChannelPrompt(
+  prompt: string,
+  channel: string,
+  workspace: WorkspaceSummary | null
+) {
+  const rails = workspace?.enabledMarkets.join(", ") || "kalshi";
+  const feeds = workspace?.integrations.join(", ") || "apify, rss";
+  const watchlist = workspace?.tradingview.watchlist.join(", ") || "SPY, QQQ, BTCUSD, NQ1!";
+
+  if (channel === "markets") {
+    return `Channel: markets.\nFocus on the enabled market rails (${rails}). Compare prices, scan only liquid contracts, and explain the best surviving setup.\n\nUser request: ${prompt}`;
+  }
+
+  if (channel === "feeds") {
+    return `Channel: feeds.\nFocus on the enabled news and social feeds (${feeds}). Summarize what changed recently, what is already priced in, and what deserves a market follow-up.\n\nUser request: ${prompt}`;
+  }
+
+  if (channel === "risk") {
+    return `Channel: risk.\nReview open exposure first. Prioritize thesis validation, exit conditions, bankroll preservation, and hard passes over new trades.\n\nUser request: ${prompt}`;
+  }
+
+  if (channel === "execution") {
+    return `Channel: execution.\nFocus on the most executable idea only. Confirm supported rails, size, entry level, and why the trade should or should not actually fire.\n\nUser request: ${prompt}`;
+  }
+
+  if (channel === "tradingview") {
+    const connectorLine =
+      workspace?.tradingview.connectorMode === "mcp" && workspace.tradingview.mcpEnabled
+        ? workspace.tradingview.configured
+          ? "A TradingView MCP connector is configured for this workspace. Use it if the local Claude session has the server available."
+          : "TradingView MCP is enabled in the workspace profile but still incomplete. Fall back to the watchlist unless the connector becomes available."
+        : "TradingView is running in watchlist-only mode for this workspace.";
+
+    return `Channel: tradingview.\nFocus on the TradingView watchlist (${watchlist}). ${connectorLine}\nUse this lane for symbol triage, cross-asset context, and chart-aware market research.\n\nUser request: ${prompt}`;
+  }
+
+  return prompt;
+}

package/web/src/components/HarnessBootPanel.tsx

@@ -0,0 +1,160 @@
+"use client";
+
+import type { WorkspaceSummary } from "@/lib/types";
+
+const cockpitLanes = [
+  {
+    id: "command",
+    name: "Command",
+    detail: "Direct the harness, launch scans, and ask for a clean next move.",
+  },
+  {
+    id: "markets",
+    name: "Markets",
+    detail: "Cross-market comparison across Kalshi, Polymarket, and active rails.",
+  },
+  {
+    id: "feeds",
+    name: "Feeds",
+    detail: "News and social context for catalysts, narrative shifts, and timing.",
+  },
+  {
+    id: "risk",
+    name: "Risk",
+    detail: "Position review, sizing discipline, and reasons to pass.",
+  },
+  {
+    id: "execution",
+    name: "Execution",
+    detail: "Supported trade routing, order readiness, and cycle recap.",
+  },
+  {
+    id: "tradingview",
+    name: "TradingView",
+    detail: "Watchlist or MCP-backed chart context for symbols, macro, and timing.",
+  },
+];
+
+function buildMissions(workspace: WorkspaceSummary | null) {
+  const watchlist = workspace?.tradingview.watchlist.join(", ") || "SPY, QQQ, BTCUSD, NQ1!";
+
+  return [
+    {
+      label: "Connector audit",
+      prompt:
+        "Audit this OpenTradex workspace. Tell me which rails, feeds, channels, and credentials are configured, what is still missing, and the smartest next local step.",
+    },
+    {
+      label: "Cross-market scan",
+      prompt:
+        "Scan the enabled market rails, compare overlapping themes, and surface the best 3 setups before recommending one paper trade or pass.",
+    },
+    {
+      label: "TradingView pass",
+      prompt: `Use the TradingView lane and focus on this watchlist: ${watchlist}. Tell me which symbols or macro instruments deserve attention right now and why.`,
+    },
+    {
+      label: "Risk review",
+      prompt:
+        "Run a strict risk-manager review of the portfolio and open theses. Cut weak ideas, flag unsupported execution paths, and list only what survives.",
+    },
+    {
+      label: "News recap",
+      prompt:
+        "Summarize the latest feeds, separate what is new from what is already priced in, and point me to one market worth deeper research.",
+    },
+    {
+      label: "Explain setup",
+      prompt:
+        "Explain this OpenTradex setup like an operator boot briefing: runtime, rails, dashboard surface, channels, and where live execution is actually supported.",
+    },
+  ];
+}
+
+export function HarnessBootPanel({
+  workspace,
+  onLaunchMission,
+}: {
+  workspace: WorkspaceSummary | null;
+  onLaunchMission: (prompt: string) => void;
+}) {
+  const missions = buildMissions(workspace);
+
+  return (
+    <div className="relative overflow-hidden rounded-[1.6rem] border border-[#553249] bg-[linear-gradient(180deg,#321126_0%,#240b1c_100%)] p-5 text-[#f7e6ee] shadow-[0_30px_120px_rgba(24,6,14,0.45)]">
+      <div className="absolute inset-0 pointer-events-none bg-[linear-gradient(rgba(255,255,255,0.04)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.04)_1px,transparent_1px)] bg-[size:22px_22px] opacity-40" />
+
+      <div className="relative flex flex-wrap items-start justify-between gap-4">
+        <div className="max-w-2xl">
+          <p className="font-mono text-[0.68rem] uppercase tracking-[0.28em] text-[#f3a96f]">
+            OpenTradex onboarding
+          </p>
+          <h3 className="mt-3 text-3xl font-semibold tracking-tight text-white">
+            Start in chat, route by channel, keep the rails honest.
+          </h3>
+          <p className="mt-3 max-w-xl text-sm leading-7 text-[#e9c9d9]/80">
+            This cockpit is meant to feel like an operator interface, not a flat log.
+            Pick a lane, send a mission, and use the right connector for the job.
+          </p>
+        </div>
+
+        <div className="rounded-full border border-[#724b62] bg-[#4a2038]/80 px-3 py-1.5 font-mono text-[0.68rem] uppercase tracking-[0.24em] text-[#ffd9a4]">
+          {workspace?.dashboardSurface === "chat" ? "Chat cockpit active" : "Stream surface active"}
+        </div>
+      </div>
+
+      <div className="relative mt-5 grid gap-3 xl:grid-cols-5">
+        {cockpitLanes
+          .filter((lane) => (lane.id === "tradingview" ? workspace?.tradingview.enabled : true))
+          .map((lane) => (
+            <div
+              key={lane.id}
+              className="rounded-[1.2rem] border border-[#6f475f] bg-[#40172f]/70 p-3"
+            >
+              <p className="font-mono text-[0.66rem] uppercase tracking-[0.24em] text-[#f3a96f]">
+                {lane.name}
+              </p>
+              <p className="mt-2 text-[0.82rem] leading-6 text-[#f4dfea]/78">{lane.detail}</p>
+            </div>
+          ))}
+      </div>
+
+      <div className="relative mt-5 flex flex-wrap gap-2">
+        {workspace?.enabledMarkets.map((market) => (
+          <span
+            key={market}
+            className="rounded-full border border-[#724b62] bg-[#4a2038]/70 px-3 py-1 text-[11px] uppercase tracking-[0.18em] text-[#f7d3a7]"
+          >
+            {market}
+          </span>
+        ))}
+        {workspace?.tradingview.enabled ? (
+          <span className="rounded-full border border-[#724b62] bg-[#4a2038]/70 px-3 py-1 text-[11px] uppercase tracking-[0.18em] text-[#f7d3a7]">
+            {workspace.tradingview.connectorMode === "mcp"
+              ? workspace.tradingview.configured
+                ? "tradingview mcp ready"
+                : "tradingview mcp incomplete"
+              : "tradingview watchlist"}
+          </span>
+        ) : null}
+      </div>
+
+      <div className="relative mt-5 grid gap-3 md:grid-cols-2 xl:grid-cols-3">
+        {missions.map((mission) => (
+          <button
+            key={mission.label}
+            onClick={() => onLaunchMission(mission.prompt)}
+            className="rounded-[1.2rem] border border-[#724b62] bg-[#4a2038]/58 px-4 py-3 text-left transition-all hover:-translate-y-0.5 hover:border-[#9e6985] hover:bg-[#572542]/72"
+          >
+            <p className="font-mono text-[0.66rem] uppercase tracking-[0.24em] text-[#f7d3a7]">
+              {mission.label}
+            </p>
+            <p className="mt-2 text-[0.82rem] leading-6 text-[#f4dfea]/78">
+              {mission.prompt}
+            </p>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}