ForgeLM/docs/manusSystemDesign/systemDesign.md

Engenharia Reversa e Extração de Padrões (Visuais)

A análise das interfaces revela um design focado em produtividade e redução de carga cognitiva, adotando a vertente Minimalismo Puro com esquema de cores Dark Mode nativo. A hierarquia visual é estabelecida pelo contraste de luminosidade (tons de cinza) em vez de cores saturadas.

Design Tokens (Tailwind CSS Config)

{
  "theme": {
    "colors": {
      "bg": {
        "base": "#171717", // Fundo principal da área de chat
        "surface": "#1E1E1E", // Sidebar e painéis modais
        "elevated": "#262626", // Inputs, cards de tarefas, modais sobrepostos
        "hover": "#333333" // Hover states em listas e botões
      },
      "text": {
        "primary": "#F3F4F6", // Texto de alta ênfase (títulos, inputs)
        "secondary": "#9CA3AF", // Texto de média ênfase (datas, placeholders, descrições)
        "muted": "#52525B" // Bordas sutis, ícones inativos
      },
      "accent": {
        "blue": "#3B82F6", // Links (Upgrade), focus rings
        "brand": "#FFFFFF" // Ícones de destaque (ex: estrela de créditos)
      }
    },
    "fontFamily": {
      "sans": ["Inter", "system-ui", "sans-serif"], // UI geral, legibilidade técnica
      "serif": ["Merriweather", "Georgia", "serif"] // Apenas para o greeting "What can I do for you?" (Contraste tipográfico intencional)
    },
    "spacing": {
      "xs": "0.25rem", // 4px - Micro-ajustes
      "sm": "0.5rem", // 8px - Espaçamento interno de botões/listas
      "md": "1rem", // 16px - Paddings de containers
      "lg": "1.5rem", // 24px - Separação de seções
      "xl": "2rem" // 32px - Margens globais
    },
    "borderRadius": {
      "sm": "0.375rem", // Inputs secundários, ícones
      "md": "0.5rem", // Cards de histórico, botões
      "lg": "1rem" // Modais, Input principal de chat, Painéis flutuantes
    }
  }
}

---

Inferência de Funcionalidades e UX

Elementos Interativos Visíveis

• Navegação Lateral (Sidebar): Estrutura colapsável contendo gerenciamento de estado global (Nova Tarefa, Agentes, Pesquisa, Biblioteca, Projetos, Histórico).
• Sistema de Modais (Overlay): Utilizado para Contexto Pessoal (Configurações, Profile) e Busca Rápida (Command Palette - Search tasks...). Bloqueia interação com o fundo (backdrop com opacity).
• Input Multimodal de Chat: Campo de entrada com acoplamento de ferramentas (upload, plugins, screen share, mic). Sugere autosize dinâmico baseado no conteúdo.
• Painel Split-Screen (Manus's Computer): Visualização side-by-side da interação do LLM e a execução de tarefas em um ambiente virtualizado (navegação web autônoma).

Lógica Implícita de Estado/Backend

• Comunicação Assíncrona Bidirecional: A interface sugere que a geração de respostas e os passos da execução (Pesquisa, Análise, Salvamento, Conversão) utilizam WebSockets ou Server-Sent Events (SSE) para stream de dados em tempo real sem polling.
• Gerenciamento de Estado Global: Provavelmente utiliza Zustand ou Context API para sincronizar o saldo de "Credits" (587) e "Daily refresh credits" entre a topbar, sidebar e modais de configuração de forma reativa.
• Paginação e Cache de Histórico: A lista de "Older tasks" na busca (image_43dfa1) sugere paginação server-side com cache local (React Query/SWR) para otimização de memória e busca fuzzy (pesquisa por aproximação).
• Virtualização do DOM: O painel "Manus's Computer" provavelmente utiliza um iframe seguro ou um canvas renderizado via stream de vídeo do backend (semelhante a WebRTC) para refletir a navegação autônoma do agente.

---

Desenvolvimento e Síntese: Arquitetura Core (React + Tailwind)

Abaixo, a síntese do Layout Principal, englobando a Sidebar estrutural e a área central de visualização. O código segue padrões estritos de acessibilidade (ARIA) e estrutura semântica.

import React, { useState } from 'react';

// Interfaces para tipagem estrita
interface NavItem {
  id: string;
  label: string;
  icon: React.ReactNode;
  isActive?: boolean;
}

interface AppLayoutProps {
  children: React.ReactNode;
  userName: string;
  userCredits: number;
}

export const AppLayout: React.FC<AppLayoutProps> = ({ children, userName, userCredits }) => {
  const [isSidebarOpen, setIsSidebarOpen] = useState(true);

  return (
    <div className="flex h-screen w-full bg-[#171717] text-[#F3F4F6] font-sans overflow-hidden">
      {/* Sidebar - Navegação Primária */}
      <aside
        className={`flex flex-col bg-[#1E1E1E] transition-all duration-300 ease-in-out border-r border-[#262626] ${
          isSidebarOpen ? 'w-64' : 'w-16'
        }`}
        aria-label="Sidebar Navigation"
      >
        {/* Header da Sidebar */}
        <div className="flex items-center justify-between p-4 border-b border-[#262626]">
          <div className="flex items-center gap-2 overflow-hidden">
            <div className="w-8 h-8 rounded-md bg-[#262626] flex items-center justify-center shrink-0">
              <span className="text-sm font-bold">M</span>
            </div>
            {isSidebarOpen && <span className="font-medium whitespace-nowrap">Manus 1.6 Lite</span>}
          </div>
          <button
            onClick={() => setIsSidebarOpen(!isSidebarOpen)}
            className="p-1 text-[#9CA3AF] hover:text-[#F3F4F6] rounded-md hover:bg-[#262626] transition-colors"
            aria-label={isSidebarOpen ? 'Collapse sidebar' : 'Expand sidebar'}
          >
            {/* Ícone de colapso genérico */}
            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h7" />
            </svg>
          </button>
        </div>

        {/* Links de Navegação */}
        <nav className="flex-1 overflow-y-auto p-2 space-y-1">
          <button className="w-full flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-md bg-[#262626] text-[#F3F4F6] transition-colors">
            <svg className="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
            </svg>
            {isSidebarOpen && <span>New task</span>}
          </button>
          
          <div className="pt-4">
            {isSidebarOpen && <span className="px-3 text-xs font-semibold text-[#52525B] uppercase tracking-wider">Workspace</span>}
            <ul className="mt-2 space-y-1">
              {['Agents', 'Search', 'Library'].map((item) => (
                <li key={item}>
                  <button className="w-full flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-md text-[#9CA3AF] hover:text-[#F3F4F6] hover:bg-[#262626] transition-colors">
                    <div className="w-4 h-4 bg-[#52525B] rounded-sm shrink-0"></div> {/* Placeholder Icon */}
                    {isSidebarOpen && <span>{item}</span>}
                  </button>
                </li>
              ))}
            </ul>
          </div>
        </nav>

        {/* Footer da Sidebar (User Info) */}
        <div className="p-4 border-t border-[#262626]">
          <button className="w-full flex items-center gap-3 hover:bg-[#262626] p-2 rounded-md transition-colors text-left">
            <img
              src="https://via.placeholder.com/32"
              alt={`Avatar de ${userName}`}
              className="w-8 h-8 rounded-full shrink-0"
            />
            {isSidebarOpen && (
              <div className="flex-1 min-w-0">
                <p className="text-sm font-medium text-[#F3F4F6] truncate">{userName}</p>
                <p className="text-xs text-[#9CA3AF] truncate">{userCredits} Credits</p>
              </div>
            )}
          </button>
        </div>
      </aside>

      {/* Área Principal */}
      <main className="flex-1 flex flex-col min-w-0 relative" aria-label="Main Content Area">
        {/* Topbar Opcional / Header de Contexto */}
        <header className="flex items-center justify-between p-4 h-16 shrink-0">
            <div className="flex-1"></div>
            <div className="flex items-center gap-4">
                <button className="text-sm font-medium text-[#9CA3AF] hover:text-[#F3F4F6] transition-colors">Upgrade</button>
                <div className="flex items-center gap-1 px-3 py-1 bg-[#262626] rounded-full text-xs font-medium text-[#F3F4F6]">
                    <span>✨</span>
                    <span>{userCredits}</span>
                </div>
            </div>
        </header>

        {/* Content Wrapper */}
        <div className="flex-1 overflow-y-auto p-4 sm:p-8 flex flex-col">
          {children}
        </div>
      </main>
    </div>
  );
};

export default AppLayout;

O sistema mapeado possui alta complexidade de estados e sub-roteamento (Modais de Perfil, Painel Dividido de Execução de Tarefas, Input Multimodal). Qual destes módulos específicos você deseja que eu isole, extraia a lógica e gere o código de produção em seguida?