Investmode v0.2 — Inversion asistida por IA, en web y Android nativo </title>
Wednesday January 21st, 1970
Chat con tu portfolio, dashboard modular, comunidad y Android nativo. Todo guiado por IA.
<iframe width="1863" height="886" src="https://www.youtube.com/embed/mRZ5H6UBfTw" title="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<p>
<strong>💼 Investmode v0.2.0</strong> — Primer lanzamiento<br />
<small
>Chat con tu portfolio, dashboard modular, comunidad y Android nativo.
Todo guiado por IA.</small
>
</p>
<h1>💼 Presentamos Investmode</h1>
<p>
Investmode es la nueva cara amable del ecosistema CryptoTools. Una
aplicacion diseñada para personas que quieren
<strong>invertir sin ser traders</strong>: sin escribir codigo, sin pelear
con APIs, sin mirar graficos durante horas. Hablas con un agente IA, el
entiende tu portfolio, te muestra las mejores estrategias publicas de la
comunidad y opera por ti. En la web, en tu movil — siempre en sincronia.
</p>
<hr />
<h2>🎯 ¿Que es Investmode?</h2>
<blockquote>
<em
>Investmode es una plataforma de inversion conversacional que orquesta
un agente IA (Portfolio Agent) sobre el motor de trading de CryptoTools.
Te da un dashboard modular, un historial de movimientos con graficos, un
ranking publico de estrategias y un chat en streaming con el agente.
Todo ello tanto en <strong>web (Next.js 15)</strong> como en
<strong>Android nativo (Kotlin)</strong>, con la misma cuenta y los
mismos datos.</em
>
</blockquote>
<ul>
<li>
💬 <strong>Chat con Portfolio Agent</strong> — streaming socket.io,
mensajes intermedios y cancelacion <500ms
</li>
<li>
🏠 <strong>Dashboard modular</strong> — widgets drag & drop sobre una
grid DnD Kit
</li>
<li>
📈 <strong>Movimientos</strong> — historial con detalle y graficos
lightweight-charts
</li>
<li>
🌍 <strong>Comunidad</strong> — ranking publico de estrategias, copiar
al chat con un click
</li>
<li>
📱 <strong>Android nativo</strong> — Kotlin + Jetpack Compose, FCM push,
deep links, CI/CD firmado
</li>
<li>
🧭 <strong>Onboarding guiado</strong> — bot-driven tutorial con
Shepherd, 5 pasos atomicos
</li>
<li>
🌙 <strong>Diseño nocturno</strong> — tema oscuro por defecto con un
<em>pointable system</em> unificado web/android
</li>
</ul>
<hr />
<h2>🔥 ¿Por que Investmode?</h2>
<p>
Porque CryptoTools es poderoso, pero pide mucho al usuario: escribir una
estrategia en JS, gestionar credenciales, entender rankings por
expectativa matematica... Mucha gente quiere
<em>invertir de forma inteligente</em> sin convertirse en desarrolladora.
</p>
<p>
Investmode pone una capa conversacional encima. Le preguntas al Portfolio
Agent que hacer con tu dinero, el consulta tus cuentas, te propone
opciones (incluyendo estrategias bien rankeadas de la comunidad) y ejecuta
los cambios en tu nombre. La potencia sigue intacta — solo cambia el tipo
de conversacion.
</p>
<hr />
<h2>⚙️ ¿Como funciona?</h2>
<ol>
<li>
<strong>Entras con Google</strong> — misma cuenta que CryptoTools via
Firebase Auth
</li>
<li>
<strong>Te saluda el onboarding bot</strong> — 5 pasos atomicos que te
muestran las 4 vistas principales y el chat
</li>
<li>
<strong>El dashboard se carga</strong> — widgets con tus cuentas,
performance y movimientos. Los arrastras y sueltas a tu gusto.
</li>
<li>
<strong>Abres el chat</strong> — escribes o copias una estrategia
publica, el Portfolio Agent responde en streaming y usa sus tools para
leer o modificar tu portfolio en CryptoTools.
</li>
<li>
<strong>Recibes push</strong> — cuando algo importante pasa (orden
ejecutada, target alcanzado), te llega una notificacion nativa con deep
link al detalle.
</li>
</ol>
<hr />
<h2>💬 Chat con el Portfolio Agent</h2>
<p>
El corazon de la app. El chat habla directamente con el
<strong>Portfolio Agent</strong> que vive en
<a href="https://agents-api.cryptotools.trade"><code>agents-hub</code></a>
(ver articulo de Agents-Hub v0.2). Caracteristicas clave:
</p>
<ul>
<li>
<strong>Streaming real</strong> — socket.io con buffer y auto-scroll
inteligente
</li>
<li>
<strong>Cancelacion <500ms</strong> — emites stop y el agente se
detiene casi al instante
</li>
<li>
<strong>Bubbles polimorficos</strong> — texto, mensajes intermedios,
tool calls, UI control, separadores de turno
</li>
<li>
<strong>Sidebar de conversaciones</strong> — historial persistente,
seleccion de hilo activo
</li>
<li>
<strong>Historial al orquestador</strong> — el agente recibe el contexto
completo de la conversacion, no solo el ultimo mensaje
</li>
<li>
<strong>Web Notification API</strong> — aviso del sistema cuando llega
respuesta y la pestaña no esta activa
</li>
</ul>
<h3>UI Control — el agente dibuja en tu pantalla</h3>
<p>
El chat implementa un <code>executeUiTool</code> dispatcher con
<strong>7 tools UI</strong> que el agente puede disparar para guiar la
experiencia: navegar a una vista, resaltar un elemento, abrir un drawer,
aplicar filtros... (ver PR #458). El resultado: el agente no solo responde
texto, tambien <em>mueve la UI</em> a donde el usuario necesita mirar.
</p>
<h3>Quick Replies</h3>
<p>
Cada turno del agente viene acompañado de replies sugeridas (generadas por
<code>quick-replies-agent</code>). Chips que el usuario pulsa para seguir
la conversacion sin teclear.
</p>
<hr />
<h2>🏠 Dashboard — tu inicio modular</h2>
<p>
La vista de <strong>Inicio</strong> es una grid configurable con @dnd-kit.
Cada widget lee datos reales de CryptoTools y renderiza una seccion del
portfolio:
</p>
<ul>
<li>Cuentas paginadas con performance compacta</li>
<li>
Widgets con header comun, tipos definidos y persistencia (Zustand)
</li>
<li>Layout reordenable drag & drop, con skeleton inicial</li>
<li>Datos enganchados al <code>useWidgetStore</code> con persist</li>
</ul>
<hr />
<h2>📈 Movimientos — trades y graficos</h2>
<ul>
<li>List view paginada de trades con chips de estado</li>
<li>
Detalle por trade con grafico interactivo en
<code>lightweight-charts</code> (PR #461)
</li>
<li>Tiempos relativos, sorting y manejo de estados sin id</li>
</ul>
<h3>Detalle de Cuenta</h3>
<p>
Un <code>DetalleCuentaView</code> ultra-simple con chips clave y un mini
panel de performance. La idea no es saturar — es que con un vistazo veas
si una cuenta va bien.
</p>
<hr />
<h2>🌍 Comunidad — ranking publico</h2>
<ul>
<li>Ranking publico de estrategias con sus metricas</li>
<li>
<strong>Copy to Chat</strong> — pulsa un boton y la estrategia entra
como contexto en el Portfolio Agent, listo para preguntarle si la copias
o no
</li>
<li>PR #462 con feedback de Gemini/Copilot aplicado</li>
</ul>
<hr />
<h2>⚙️ Configuracion — 6 pestañas</h2>
<p>
La vista <strong>Config</strong> agrupa las opciones en 6 pestañas,
accesible desde el avatar del topbar. Diseñada para que todo lo que no sea
operar este ordenado pero fuera de la vista principal.
</p>
<p>
Complementada por los <strong>fullscreen dropdowns</strong> (GroupSelector
y TimeSelector) que en movil ocupan toda la pantalla para una seleccion
comoda, y la <code>FiltersBar</code> unificada (<code
>accountListId + timeframe</code
>) que comparte todas las vistas.
</p>
<hr />
<h2>📱 Android nativo</h2>
<p>
Investmode no es una PWA envuelta. La app Android esta escrita en
<strong>Kotlin con Jetpack Compose</strong>, siguiendo el mismo patron que
ya usa <a href="https://app.talkmode.app">TalkMode Android</a>. En 6 fases
consecutivas (PRs #479 → #484) se entrego:
</p>
<ul>
<li>
<strong>Fase 1 (#479):</strong> Firebase Credential Manager, Retrofit
ApiClient con JWT, Login/Splash
</li>
<li>
<strong>Fase 2 (#480):</strong> MainNavigation con 4-tab NavHost,
TopAppBar, FiltersBar con ModalBottomSheet dropdowns
</li>
<li>
<strong>Fase 3 (#481):</strong> Chat con socket.io streaming, bubbles
polimorficos, drawer y persistencia en SharedPreferences
</li>
<li>
<strong>Fase 4 (#482):</strong> Inicio con widgets, Movimientos,
Comunidad, TradeDetail, CuentaDetail y Config
</li>
<li>
<strong>Push nativo (#483):</strong> FCM con lifecycle de tokens, deep
links y permiso runtime <code>POST_NOTIFICATIONS</code>
</li>
<li>
<strong>CI/CD (#484):</strong> release-android.yml con build firmado +
ci-android.yml en PRs + docs de firma
</li>
</ul>
<p>
La app comparte cuenta, datos y contexto con la version web. Cambia un
widget en el movil y lo ves al abrir el portatil.
</p>
<hr />
<h2>🧭 Onboarding guiado por bot</h2>
<p>
El primer contacto esta cuidado al detalle. Un tutorial con
<strong>Shepherd.js</strong> dispara 5 pasos atomicos, coordinados con el
Portfolio Agent via un sentinel <code>#__onboarding</code> (ver Agents-Hub
v0.2).
</p>
<ul>
<li>
El bot habla primero — cada burbuja es un paso de tutorial, no un
tooltip generico
</li>
<li>
Completion condicionada a <em>speak count</em> real del bot (no a clicks
del usuario) — garantiza que leyo todo
</li>
<li>
Emision del sentinel via socket.io, comprobacion
<code>===false</code> estricta
</li>
<li>
Feedback de PR review aplicado (incluye drop de
<code>@popperjs/core</code> no usado)
</li>
</ul>
<hr />
<h2>🌙 Diseño nocturno + pointable system</h2>
<p>
Investmode estrena un redesign completo con una paleta oscura elegante y
un sistema <strong>pointable</strong> unificado entre web y Android.
Significa que cualquier elemento interactivo — boton, chip, card —
responde con la misma cadencia visual en ambas plataformas.
</p>
<hr />
<h2>🔧 Bajo el capo</h2>
<p>Para los curiosos — el stack de v0.2:</p>
<ul>
<li>
<strong>packages/web</strong> — Next.js 15 (App Router), Tailwind,
Zustand, React 19
</li>
<li>
<strong>packages/android</strong> — Kotlin, Jetpack Compose, Material 3,
Retrofit, Firebase Credential Manager
</li>
<li>
<strong>Tauri retirado</strong> — migracion completa de Vitest a Jest y
deploy a Railway con Next.js
</li>
<li>
<strong>Firebase Auth</strong> — misma cuenta Google que CryptoTools /
TradingView2 / Agents-Hub
</li>
<li>
<strong>Socket.io</strong> — chat streaming con hybrid notifications y
badge de unread (PR #456)
</li>
<li><strong>@dnd-kit</strong> — dashboard modular con grid de widgets</li>
<li>
<strong>lightweight-charts</strong> — graficos de trades en Movimientos
</li>
<li>
<strong>Choochmeque FCM plugin</strong> — integracion de push con token
flow post-login (PR #465)
</li>
<li><strong>Shepherd.js</strong> — tutorial bot-driven del onboarding</li>
<li>
<strong>Portfolio Agent orchestrator</strong> — webhook TV2 pattern
reutilizado para el chat
</li>
</ul>
<hr />
<h2>🔗 Integracion con el ecosistema</h2>
<p>Investmode no vive aislado. Se apoya en:</p>
<ul>
<li>
<strong>CryptoTools (TV1) v3.8</strong> — demo pool, Alpaca exchange,
trade simulator precargado, hasCompletedOnboarding flag
</li>
<li>
<strong>Agents-Hub v0.2</strong> — Portfolio Agent, quick-replies,
tv1-api source, ui-control source, onboarding sentinel
</li>
<li>
<strong>TradingView2</strong> — el ranking publico surge de los
specimens optimizados via MOEHGA
</li>
</ul>
<p>
El primer minuto del usuario nuevo lo resuelve CryptoTools (cuenta demo
con trades reales). El primer dialogo lo lleva Agents-Hub (tutorial de 5
turnos). La experiencia completa la envuelve Investmode — web y Android.
</p>
<hr />
<h2>🚀 v0.2.0 — Changelog resumido</h2>
<h3>✨ New Features destacadas</h3>
<ul>
<li>Investmode nocturnal redesign + pointable system (web + android)</li>
<li>
<strong>Chat</strong> completo con streaming, UI control del agente,
mensajes intermedios, historia al orquestador, sidebar y notificaciones
Web
</li>
<li>
<strong>Onboarding</strong> bot-guided con Shepherd (5 pasos atomicos)
</li>
<li>
<strong>Android</strong> — 6 fases (#479-#484): auth, navegacion, chat,
vistas, push FCM, CI/CD firmado
</li>
<li>
<strong>Migration</strong> — Vitest → Jest, retirada de Tauri, deploy
Next.js a Railway
</li>
<li>
<strong>Views</strong> — Dashboard @dnd-kit, Movimientos, Comunidad,
DetalleCuenta, ConfigView, fullscreen dropdowns
</li>
<li>
<strong>Auth</strong> — Firebase, AuthGuard, MainLayout,
Topbar/BottomNav, App Router
</li>
<li>
<strong>Core</strong> — tipos, utils, stores, services, Firebase config
en <code>packages/web</code> con NEXT_PUBLIC env vars
</li>
<li>
<strong>Scaffold</strong> — Next.js 15 + Android Kotlin con tooling
alineado
</li>
<li>
<strong>Push</strong> — Choochmeque FCM + token flow post-login (#465)
</li>
<li>
<strong>Config</strong> — 6 pestañas, Topbar avatar links, FiltersBar
wiring
</li>
<li>
<strong>Dropdowns</strong> — FullscreenDropdown, GroupSelector,
TimeSelector
</li>
<li>
<strong>Comunidad</strong> — ranking publico + copy-to-chat (#462)
</li>
<li>
<strong>Movimientos</strong> — list + trade detail con
lightweight-charts (#461)
</li>
<li>
<strong>Inicio</strong> — dashboard completo con widgets, grid @dnd-kit,
accounts paginated
</li>
<li>
<strong>UI-Control</strong> — executeUiTool dispatcher + stores para 7
ui tools (#458)
</li>
<li><strong>Quick-Replies</strong> — fetch service y contract types</li>
<li>
<strong>Realtime</strong> — socket.io client con hybrid notifications y
badge (#456)
</li>
</ul>
<h3>🐛 Bug Fixes destacadas</h3>
<ul>
<li>
<strong>Android:</strong> OAuth client en google-services.json,
dev-android con <code>adb install -r -d</code>, feedback PR (#484, #483,
#482, #481), fix capability permission, drop tauri-plugin, build gradle
inject
</li>
<li>
<strong>Chat:</strong> subscribe antes de enviar, send/stop socket
emits, SSR hydration guards, memo comparator, perf optimizations
</li>
<li>
<strong>Web:</strong> React 19 <code>inert</code> boolean, hermetic test
env, suppress hydration warning
</li>
<li>
<strong
>Filters/Onboarding/Migration/Views/Auth/Core/Push/Comunidad/Movimientos/UI-Control/Quick-Replies/Realtime/Investmode</strong
>
— feedback de PR review (Gemini + Copilot) aplicado en todos los PRs
</li>
</ul>
<h3>🔁 Refactors</h3>
<ul>
<li>
<strong>Chat:</strong> pattern webhook de TV2 para portfolio-agent,
feedback PR #4
</li>
<li>
<strong>Filters:</strong> <code>useFilterStore</code> unificado (<code
>accountListId</code
>
+ timeframe keys)
</li>
<li><strong>Detail-config / Inicio:</strong> feedback PR #10 / #7</li>
</ul>
<h3>🧹 Chores</h3>
<ul>
<li>
Scripts de release + CHANGELOG inicial + env de produccion cableado
</li>
<li>
Android: scripts dev/build/lint/test, Firebase scaffold patches
automatizados
</li>
<li>
Identifier alineado + google-services.json + network config (#465)
</li>
<li>Tracking de <code>.env</code> y <code>.env.production</code></li>
<li>
Investmode: drop de baseUrl deprecated, coverage threshold alineada con
talkmode backend, bootstrap readme/gitignore
</li>
</ul>
<h3>🤖 CI</h3>
<ul>
<li>Auto-request Copilot review al abrir PR</li>
<li>Workflow alineado con talkmode/tradingview/agents-hub</li>
<li>
Usa <code>@copilot login</code> segun el tutorial oficial de GitHub
</li>
</ul>
<h3>📄 Docs</h3>
<ul>
<li>README: link a guia de setup Android + one-liner quickstart</li>
</ul>
<hr />
<p>
<strong
><a href="https://investmode.app">🌐 Visita investmode.app</a></strong
>
</p>
<p>
<small
><a href="https://investmode.app">Investmode</a> — Inversion asistida
por IA. Tu portfolio, en tu idioma. 💼📱</small
>
</p>
