agent-orcha 0.0.7 → 0.0.8

package/dist/public/index.html

@@ -6,28 +6,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Agent Orcha</title>
 
-  <!-- Tailwind CSS -->
-  <script src="https://cdn.tailwindcss.com"></script>
-  <script>
-    tailwind.config = {
-      darkMode: 'class',
-      theme: {
-        extend: {
-          colors: {
-            dark: {
-              bg: '#0f172a',
-              surface: '#1e293b',
-              border: '#334155',
-              hover: '#475569',
-            }
-          },
-          fontFamily: {
-            sans: ['Inter', 'sans-serif'],
-          }
-        }
-      }
-    }
-  </script>
+  <!-- Styles -->
+  <link rel="stylesheet" href="./styles.css">
 
   <!-- FontAwesome -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
@@ -67,316 +47,9 @@
     }
     </script>
 
-  <style>
-    body {
-      font-family: 'Inter', sans-serif;
-    }
-
-    /* Custom scrollbar */
-    ::-webkit-scrollbar {
-      width: 8px;
-      height: 8px;
-    }
-
-    ::-webkit-scrollbar-track {
-      background: transparent;
-    }
-
-    ::-webkit-scrollbar-thumb {
-      background: #475569;
-      border-radius: 4px;
-    }
-
-    ::-webkit-scrollbar-thumb:hover {
-      background: #64748b;
-    }
-
-    /* Markdown content styling */
-    /* File tree depth indentation */
-    .tree-item {
-      padding: 4px;
-    }
-    .tree-depth-0 { padding-left: 8px; }
-    .tree-depth-1 { padding-left: 24px; }
-    .tree-depth-2 { padding-left: 40px; }
-    .tree-depth-3 { padding-left: 56px; }
-    .tree-depth-4 { padding-left: 72px; }
-    .tree-depth-5 { padding-left: 88px; }
-
-    .markdown-content {
-      line-height: 1.6;
-    }
-
-    .markdown-content h1 {
-      font-size: 1.5em;
-      font-weight: 700;
-      margin: 0.5em 0;
-    }
-
-    .markdown-content h2 {
-      font-size: 1.3em;
-      font-weight: 600;
-      margin: 0.5em 0;
-    }
-
-    .markdown-content h3 {
-      font-size: 1.1em;
-      font-weight: 600;
-      margin: 0.5em 0;
-    }
-
-    .markdown-content p {
-      margin: 0.5em 0;
-    }
-
-    .markdown-content ul,
-    .markdown-content ol {
-      margin: 0.5em 0;
-      padding-left: 1.5em;
-    }
-
-    .markdown-content li {
-      margin: 0.25em 0;
-    }
-
-    .markdown-content code {
-      background: rgba(255, 255, 255, 0.1);
-      padding: 0.2em 0.4em;
-      border-radius: 3px;
-      font-size: 0.9em;
-    }
-
-    .markdown-content pre {
-      background: rgba(0, 0, 0, 0.3);
-      padding: 1em;
-      border-radius: 6px;
-      overflow-x: auto;
-      margin: 0.5em 0;
-    }
-
-    .markdown-content pre code {
-      background: none;
-      padding: 0;
-    }
-
-    .markdown-content a {
-      color: #60a5fa;
-      text-decoration: underline;
-    }
-
-    .markdown-content a:hover {
-      color: #93c5fd;
-    }
-
-    /* Graph view */
-    .graph-canvas {
-      background: radial-gradient(ellipse at center, #1a2332 0%, #0d1520 100%);
-    }
-
-    #graphContainer {
-      width: 100%;
-      height: 100%;
-    }
-
-    /* Animation delay utilities (avoid inline styles) */
-    .animation-delay-200 {
-      animation-delay: 0.2s;
-    }
-
-    .animation-delay-400 {
-      animation-delay: 0.4s;
-    }
-
-    /* Stream status bar pulse */
-    @keyframes pulse-dot {
-      0%, 100% { opacity: 1; }
-      50% { opacity: 0.4; }
-    }
-
-    .animate-pulse-dot {
-      animation: pulse-dot 1.5s ease-in-out infinite;
-    }
-
-    @keyframes fadeIn {
-      from { opacity: 0; }
-      to { opacity: 1; }
-    }
-    @keyframes slideUp {
-      from { opacity: 0; transform: translateY(8px); }
-      to { opacity: 1; transform: translateY(0); }
-    }
-    .modal-backdrop { animation: fadeIn 0.15s ease-out; }
-    .modal-content { animation: slideUp 0.2s ease-out; }
-
-    /* Sidebar slide for mobile */
-    @keyframes slideInLeft {
-      from { transform: translateX(-100%); }
-      to { transform: translateX(0); }
-    }
-    .sidebar-open { animation: slideInLeft 0.2s ease-out; }
-
-    .markdown-content blockquote {
-      border-left: 3px solid #475569;
-      padding-left: 1em;
-      color: #94a3b8;
-      margin: 0.5em 0;
-    }
-
-    .markdown-content table {
-      border-collapse: collapse;
-      margin: 0.5em 0;
-    }
-
-    .markdown-content th,
-    .markdown-content td {
-      border: 1px solid #475569;
-      padding: 0.5em;
-    }
-
-    .markdown-content th {
-      background: rgba(255, 255, 255, 0.05);
-      font-weight: 600;
-    }
-
-    /* Welcome orca */
-    .welcome-container {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      height: 100%;
-      gap: 2rem;
-    }
-
-    .welcome-orca {
-      width: 200px;
-      height: 140px;
-      animation: orca-swim 4s ease-in-out infinite;
-      filter: drop-shadow(0 0 12px rgba(0, 255, 255, 0.3));
-    }
-
-    .welcome-orca .orca-body {
-      fill: none;
-      stroke: #0ff;
-      stroke-width: 1.5;
-      stroke-linejoin: round;
-      stroke-linecap: round;
-      opacity: 0.7;
-    }
-
-    .welcome-orca .orca-detail {
-      fill: none;
-      stroke: #0ff;
-      stroke-width: 1;
-      opacity: 0.4;
-    }
-
-    .welcome-orca .orca-eye {
-      fill: #0ff;
-      opacity: 0.8;
-    }
-
-    .welcome-orca .orca-patch {
-      fill: rgba(0, 255, 255, 0.08);
-      stroke: #0ff;
-      stroke-width: 0.8;
-      opacity: 0.4;
-    }
-
-    @keyframes orca-swim {
-      0%, 100% { transform: translateY(0) rotate(0deg); }
-      30% { transform: translateY(-10px) rotate(-1.5deg); }
-      70% { transform: translateY(10px) rotate(1.5deg); }
-    }
-
-    .welcome-text {
-      color: #67e8f9;
-      font-size: 0.95rem;
-      opacity: 0.7;
-      text-align: center;
-      letter-spacing: 0.05em;
-    }
-
-    /* Session reset banner */
-    .session-reset-banner {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      padding: 16px 0;
-      margin: 8px 0;
-    }
-
-    .session-reset-line {
-      flex: 1;
-      height: 1px;
-      background: #f59e0b33;
-    }
-
-    .session-reset-label {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      color: #f59e0b;
-      font-size: 0.75rem;
-      white-space: nowrap;
-      opacity: 0.8;
-    }
-
-    /* Tools popover */
-    .tools-badge-wrapper {
-      position: relative;
-      display: inline-flex;
-    }
-
-    .tools-popover {
-      display: none;
-      position: absolute;
-      top: calc(100% + 6px);
-      left: 50%;
-      transform: translateX(-50%);
-      background: #1e293b;
-      border: 1px solid #334155;
-      border-radius: 8px;
-      padding: 6px 0;
-      min-width: 180px;
-      max-height: 240px;
-      overflow-y: auto;
-      z-index: 50;
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
-    }
-
-    .tools-popover::before {
-      content: '';
-      position: absolute;
-      top: -4px;
-      left: 50%;
-      transform: translateX(-50%) rotate(45deg);
-      width: 8px;
-      height: 8px;
-      background: #1e293b;
-      border-left: 1px solid #334155;
-      border-top: 1px solid #334155;
-    }
-
-    .tools-badge-wrapper:hover .tools-popover {
-      display: block;
-    }
-
-    .tools-popover-item {
-      padding: 4px 12px;
-      font-size: 0.75rem;
-      color: #cbd5e1;
-      font-family: 'JetBrains Mono', monospace;
-      white-space: nowrap;
-    }
-
-    .tools-popover-item:hover {
-      background: #334155;
-    }
-  </style>
 </head>
 
-<body class="bg-dark-bg text-gray-100 min-h-screen selection:bg-blue-500/30">
+<body>
   <app-root></app-root>
   <script type="module" src="./src/main.js"></script>
 </body>