initial interface

app.js

@@ -0,0 +1,695 @@
+/* ════════════════════════════════════════
+   AI ORCHESTRATION PLATFORM — APP LOGIC
+   ════════════════════════════════════════ */
+
+const { createApp, ref, reactive, computed, nextTick, onMounted } = Vue;
+
+/* ════════════════════════════════════════
+   SEED / STATIC DATA
+   ════════════════════════════════════════ */
+
+const SEED_AGENTS = [
+  { agent_id: 'agt-001', agent_name: 'Planner',    agent_role: 'Task decomposition',    status: 'idle', color: '#6ee7b7' },
+  { agent_id: 'agt-002', agent_name: 'Researcher', agent_role: 'Web & data retrieval',  status: 'busy', color: '#818cf8' },
+  { agent_id: 'agt-003', agent_name: 'Coder',      agent_role: 'Code generation',       status: 'idle', color: '#f472b6' },
+  { agent_id: 'agt-004', agent_name: 'Reviewer',   agent_role: 'QA & validation',       status: 'idle', color: '#fbbf24' },
+];
+
+const SEED_PIPELINES = [
+  { pipeline_id: 'pip-001', pipeline_name: 'Auto Orchestrate', pipeline_description: 'Pilih agen secara otomatis' },
+  { pipeline_id: 'pip-002', pipeline_name: 'Research Mode',    pipeline_description: 'Fokus riset & analisis' },
+  { pipeline_id: 'pip-003', pipeline_name: 'Code Generator',   pipeline_description: 'Fokus pembuatan kode' },
+  { pipeline_id: 'pip-004', pipeline_name: 'Review Pipeline',  pipeline_description: 'Review & QA saja' },
+];
+
+const SEED_ACTIVE_TASKS = [
+  { task_id: 'tsk-001', task_name: 'Market analysis',   assigned_agent: 'Researcher', progress_percent: 65, task_color: '#818cf8' },
+  { task_id: 'tsk-002', task_name: 'Code review',       assigned_agent: 'Reviewer',   progress_percent: 30, task_color: '#fbbf24' },
+];
+
+const SEED_TOKEN_USAGE = [
+  { model_name: 'claude-3-opus',  tokens_used: 48200, token_limit: 100000, bar_color: '#6ee7b7' },
+  { model_name: 'claude-3-haiku', tokens_used: 12500, token_limit: 100000, bar_color: '#818cf8' },
+];
+
+const SEED_SYSTEM_LOGS = [
+  { log_id: 'log-001', log_time: '14:02', log_level: 'success', log_message: 'Orchestrator ready' },
+  { log_id: 'log-002', log_time: '14:03', log_level: '',        log_message: 'Researcher agent connected' },
+  { log_id: 'log-003', log_time: '14:05', log_level: 'warn',    log_message: 'High latency detected (>500ms)' },
+];
+
+const SUGGESTIONS = [
+  { title: '🔍 Research Task',  desc: 'Riset topik dan buat ringkasan',   prompt: 'Riset perkembangan terbaru machine learning di 2024 dan buat ringkasan eksekutif' },
+  { title: '💻 Generate Code',  desc: 'Buat kode dari deskripsi',         prompt: 'Buat REST API sederhana menggunakan Node.js + Express untuk manajemen todo list' },
+  { title: '📋 Plan a Project', desc: 'Dekomposisi proyek jadi task',      prompt: 'Buat rencana proyek untuk membangun platform e-commerce dari nol dalam 3 bulan' },
+  { title: '✅ Review & QA',    desc: 'Review output dari agen lain',      prompt: 'Review dan evaluasi kualitas kode Python berikut untuk deteksi anomali data sensor' },
+];
+
+/**
+ * Mock SSE event sequences — simulasi stream dari AI backend.
+ *
+ * CATATAN INTEGRASI (SSE):
+ * Nanti ganti seluruh fungsi mockSSEStream() dengan:
+ *
+ *   const es = new EventSource('/api/stream?task_id=...');
+ *   es.addEventListener('message', (e) => pushSSEEntry('msg', e.data));
+ *   es.addEventListener('tool',    (e) => pushSSEEntry('tool', e.data));
+ *   es.addEventListener('done',    (e) => { pushSSEEntry('done', e.data); es.close(); });
+ *   es.addEventListener('error',   (e) => { pushSSEEntry('error', 'Stream error'); es.close(); });
+ */
+const SSE_MOCK_SEQUENCES = [
+  [
+    { event_type: 'msg',    data: 'Parsing task intent…',          delay: 200 },
+    { event_type: 'msg',    data: 'Selecting optimal agent…',      delay: 400 },
+    { event_type: 'tool',   data: 'repo_read: fetching README',    delay: 600 },
+    { event_type: 'tool',   data: 'repo_read: scanning src/',      delay: 500 },
+    { event_type: 'msg',    data: 'Analysing code structure…',     delay: 700 },
+    { event_type: 'stream', data: 'Generating response',           delay: 300 },
+    { event_type: 'done',   data: 'Task completed (1.4s)',         delay: 500 },
+  ],
+  [
+    { event_type: 'msg',    data: 'Decomposing task into steps…',  delay: 300 },
+    { event_type: 'tool',   data: 'web_search: query sent',        delay: 500 },
+    { event_type: 'tool',   data: 'web_search: 12 results found',  delay: 400 },
+    { event_type: 'msg',    data: 'Summarising findings…',         delay: 800 },
+    { event_type: 'stream', data: 'Streaming answer tokens',       delay: 600 },
+    { event_type: 'done',   data: 'Task completed (2.1s)',         delay: 400 },
+  ],
+  [
+    { event_type: 'msg',    data: 'Loading repository context…',   delay: 400 },
+    { event_type: 'tool',   data: 'git_diff: comparing changes',   delay: 700 },
+    { event_type: 'tool',   data: 'code_lint: running checks',     delay: 600 },
+    { event_type: 'msg',    data: 'Writing fix…',                  delay: 500 },
+    { event_type: 'tool',   data: 'git_commit: staging files',     delay: 400 },
+    { event_type: 'tool',   data: 'git_push: pushing branch',      delay: 500 },
+    { event_type: 'done',   data: 'Branch pushed (2.8s)',          delay: 300 },
+  ],
+];
+
+/* ════════════════════════════════════════
+   HELPERS
+   ════════════════════════════════════════ */
+
+const delay    = (ms)       => new Promise((r) => setTimeout(r, ms));
+const rand     = (min, max) => Math.floor(Math.random() * (max - min) + min);
+const pickRand = (arr)      => arr[Math.floor(Math.random() * arr.length)];
+const nowTime  = ()         => new Date().toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' });
+const nowTs    = ()         => new Date().toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+const makeId   = (p, n)     => `${p}-${String(n).padStart(3, '0')}`;
+
+/**
+ * Parse "https://github.com/owner/repo" → { owner, repo_name }
+ * Returns null when invalid.
+ */
+function parseGithubUrl(url) {
+  try {
+    const u = new URL(url.trim());
+    if (u.hostname !== 'github.com') return null;
+    const parts = u.pathname.replace(/^\//, '').replace(/\/$/, '').split('/');
+    if (parts.length < 2) return null;
+    return { owner: parts[0], repo_name: parts[1] };
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Build GitHub API headers from PAT.
+ * CATATAN INTEGRASI: headers ini yang dikirim ke endpoint /api/github/*
+ * atau langsung ke api.github.com.
+ */
+function githubHeaders(pat) {
+  return {
+    Authorization: `Bearer ${pat}`,
+    Accept: 'application/vnd.github+json',
+    'X-GitHub-Api-Version': '2022-11-28',
+  };
+}
+
+/* ════════════════════════════════════════
+   VUE APP
+   ════════════════════════════════════════ */
+
+createApp({
+  setup() {
+
+    /* ── GitHub Auth state ──
+     * Data contract: GitHubAuth
+     * {
+     *   is_authenticated : boolean
+     *   pat_input        : string   (cleared after connect)
+     *   pat              : string   (stored in memory only, never localStorage)
+     *   username         : string
+     *   avatar_url       : string
+     * }
+     */
+    const github_auth = reactive({
+      is_authenticated: false,
+      pat_input:        '',
+      pat:              '',
+      username:         '',
+      avatar_url:       '',
+    });
+
+    /* ── Repo state ──
+     * Data contract: RepoState
+     * {
+     *   url_input     : string
+     *   is_analysing  : boolean
+     *   info          : RepoInfo | null
+     * }
+     *
+     * RepoInfo:
+     * {
+     *   full_name         : string   (e.g. "owner/repo")
+     *   language          : string
+     *   stars_count       : number
+     *   open_issues_count : number
+     *   default_branch    : string
+     *   is_contributor    : boolean  (true if authed user can push)
+     * }
+     */
+    const repo = reactive({
+      url_input:    '',
+      is_analysing: false,
+      info:         null,
+    });
+
+    /* ── SSE Stream state ──
+     * CATATAN INTEGRASI:
+     * is_active  → true saat EventSource sedang terbuka
+     * entries    → array of { ts, event_type, data }
+     * event_type → 'msg' | 'tool' | 'done' | 'error' | 'stream'
+     */
+    const sse_stream = reactive({
+      is_active: false,
+      entries:   [],
+    });
+
+    /* ── Commit result (last) ──
+     * Data contract: CommitResult
+     * {
+     *   branch_name    : string
+     *   commit_sha     : string
+     *   commit_message : string
+     *   commits_url    : string   (link ke tab commits branch)
+     *   pr_url         : string   (link buat PR)
+     * }
+     */
+    const last_commit_result = ref(null);
+
+    /* ── Core state ── */
+    const agents            = ref(SEED_AGENTS.map((a) => ({ ...a })));
+    const pipelines         = ref(SEED_PIPELINES);
+    const active_pipeline   = ref(pipelines.value[0]);
+    const selected_agent_id = ref('agt-001');
+    const messages          = ref([]);
+    const session_stats     = reactive({ total_tasks: 0, success_rate: 98, avg_latency_ms: 312 });
+    const active_tasks      = ref(SEED_ACTIVE_TASKS.map((t) => ({ ...t })));
+    const token_usage       = ref(SEED_TOKEN_USAGE.map((u) => ({ ...u })));
+    const system_logs       = ref(SEED_SYSTEM_LOGS.map((l) => ({ ...l })));
+    const suggestions       = SUGGESTIONS;
+
+    const input_text        = ref('');
+    const is_loading        = ref(false);
+    const messageContainer  = ref(null);
+    const sseLogArea        = ref(null);
+    const textarea          = ref(null);
+
+    const modal = reactive({
+      show:          false,
+      title:         '',
+      body:          '',
+      confirm_label: '',
+      confirm_class: 'primary',
+      on_confirm:    () => {},
+    });
+
+    let msg_counter = 0;
+    let log_counter = SEED_SYSTEM_LOGS.length;
+
+    /* ════════════════════════════════════════
+       GITHUB AUTH
+       ════════════════════════════════════════ */
+
+    /**
+     * connectGithub — verifikasi PAT dan ambil profil user.
+     *
+     * CATATAN INTEGRASI:
+     * Ganti fetch di bawah dengan endpoint backend kamu, misalnya:
+     *   POST /api/auth/github  { pat }  → { username, avatar_url }
+     *
+     * Backend perlu forward ke: GET https://api.github.com/user
+     * dengan header Authorization: Bearer <pat>
+     * dan kembalikan { login, avatar_url } ke frontend.
+     */
+    async function connectGithub() {
+      const pat = github_auth.pat_input.trim();
+      if (!pat) return;
+
+      addLog('', 'Verifying GitHub PAT…');
+
+      /* --- MOCK: simulasi verifikasi token --- */
+      await delay(800);
+      const is_valid = pat.startsWith('ghp_') || pat.length > 20;
+
+      if (!is_valid) {
+        addLog('error', 'GitHub PAT invalid');
+        showModal('Authentication Failed', '<p>PAT tidak valid. Pastikan token dimulai dengan <code>ghp_</code> dan memiliki scope <code>repo</code>.</p>');
+        return;
+      }
+
+      github_auth.pat              = pat;
+      github_auth.pat_input        = '';
+      github_auth.is_authenticated = true;
+      github_auth.username         = 'dev_user';   // ← dari GET /user response: data.login
+      github_auth.avatar_url       = '';            // ← data.avatar_url
+      addLog('success', `GitHub connected as ${github_auth.username}`);
+    }
+
+    function revokeGithub() {
+      github_auth.is_authenticated = false;
+      github_auth.pat              = '';
+      github_auth.username         = '';
+      repo.info                    = null;
+      addLog('warn', 'GitHub session revoked');
+    }
+
+    /* ════════════════════════════════════════
+       REPO ANALYSE
+       ════════════════════════════════════════ */
+
+    /**
+     * analyseRepo — fetch metadata repo dan cek contributor status.
+     *
+     * CATATAN INTEGRASI (dua endpoint GitHub API):
+     *
+     * 1. GET https://api.github.com/repos/{owner}/{repo}
+     *    → ambil full_name, language, stargazers_count, open_issues_count, default_branch
+     *
+     * 2. GET https://api.github.com/repos/{owner}/{repo}/collaborators/{username}
+     *    → 204 = contributor, 404 = bukan contributor
+     *    (endpoint ini butuh PAT dengan scope repo)
+     *
+     * Kalau user belum auth, is_contributor selalu false.
+     */
+    async function analyseRepo() {
+      const url_str = repo.url_input.trim();
+      const parsed  = parseGithubUrl(url_str);
+
+      if (!parsed) {
+        showModal('URL Tidak Valid', '<p>Format URL harus: <code>https://github.com/owner/repo</code></p>');
+        return;
+      }
+
+      repo.is_analysing = true;
+      addLog('', `Analysing ${parsed.owner}/${parsed.repo_name}…`);
+
+      /* --- MOCK: simulasi API response --- */
+      await delay(1200);
+
+      const is_authed      = github_auth.is_authenticated;
+      const is_contributor = is_authed && Math.random() > 0.4; // simulasi: 60% kemungkinan contributor
+
+      repo.info = {
+        full_name:         `${parsed.owner}/${parsed.repo_name}`,
+        language:          pickRand(['TypeScript', 'Python', 'Go', 'Rust', 'JavaScript']),
+        stars_count:       rand(10, 4800),
+        open_issues_count: rand(0, 42),
+        default_branch:    'main',
+        is_contributor,
+      };
+
+      repo.is_analysing = false;
+      addLog('success', `Repo loaded: ${repo.info.full_name} (contributor: ${is_contributor})`);
+
+      /* Auto-trigger agent pipeline */
+      input_text.value = `Analisis repository ${repo.info.full_name} secara menyeluruh — ${repo.info.language}, ${repo.info.stars_count} stars, ${repo.info.open_issues_count} issues`;
+      await sendMessage();
+    }
+
+    /* ════════════════════════════════════════
+       SSE STREAM (MOCK)
+       ════════════════════════════════════════ */
+
+    function pushSSEEntry(event_type, data) {
+      sse_stream.entries.push({ ts: nowTs(), event_type, data });
+      nextTick(() => {
+        if (sseLogArea.value) sseLogArea.value.scrollTop = sseLogArea.value.scrollHeight;
+      });
+    }
+
+    /**
+     * mockSSEStream — simulasi event yang diterima dari backend via SSE.
+     *
+     * CATATAN INTEGRASI:
+     * Hapus fungsi ini dan ganti `await mockSSEStream()` dengan:
+     *
+     *   const es = new EventSource(`/api/tasks/${task_id}/stream`);
+     *   await new Promise((resolve, reject) => {
+     *     es.addEventListener('message', (e) => pushSSEEntry('msg', e.data));
+     *     es.addEventListener('tool',    (e) => pushSSEEntry('tool', e.data));
+     *     es.addEventListener('stream',  (e) => pushSSEEntry('stream', e.data));
+     *     es.addEventListener('done',    (e) => { pushSSEEntry('done', e.data); es.close(); resolve(); });
+     *     es.addEventListener('error',   (e) => { pushSSEEntry('error', 'Connection error'); es.close(); reject(); });
+     *   });
+     */
+    async function mockSSEStream() {
+      sse_stream.is_active = true;
+      const seq = pickRand(SSE_MOCK_SEQUENCES);
+      for (const event of seq) {
+        await delay(event.delay);
+        pushSSEEntry(event.event_type, event.data);
+      }
+      sse_stream.is_active = false;
+    }
+
+    /* ════════════════════════════════════════
+       DOWNLOAD REPORT
+       ════════════════════════════════════════ */
+
+    /**
+     * downloadReport — export session ke file .txt / .md.
+     *
+     * CATATAN INTEGRASI:
+     * Kalau backend sudah punya endpoint laporan, ganti dengan:
+     *   window.open(`/api/sessions/${session_id}/report?format=pdf`, '_blank');
+     *
+     * Untuk sekarang, kita generate langsung di browser dari state.
+     */
+    function downloadReport() {
+      const lines = [
+        '# AI Orchestration — Session Report',
+        `Generated  : ${new Date().toLocaleString('id-ID')}`,
+        `Pipeline   : ${active_pipeline.value.pipeline_name}`,
+        `Repo       : ${repo.info ? repo.info.full_name : '(none)'}`,
+        `Total tasks: ${session_stats.total_tasks}`,
+        `Success    : ${session_stats.success_rate}%`,
+        '',
+        '---',
+        '',
+        '## Conversation Log',
+        '',
+      ];
+
+      messages.value.forEach((msg) => {
+        if (msg.is_typing) return;
+        lines.push(`### [${msg.created_at}] ${msg.sender_name} (${msg.sender_type})`);
+        lines.push(msg.message_content || '');
+        if (msg.pipeline_trace && msg.pipeline_trace.length) {
+          lines.push('');
+          lines.push('**Pipeline Trace:**');
+          msg.pipeline_trace.forEach((s) => lines.push(`  • ${s.step_agent} → ${s.step_output} (${s.duration_ms}ms)`));
+        }
+        if (msg.commit_result) {
+          lines.push('');
+          lines.push(`**Branch Created:** ${msg.commit_result.branch_name}`);
+          lines.push(`**Commit:** ${msg.commit_result.commit_message}`);
+          lines.push(`**Commits URL:** ${msg.commit_result.commits_url}`);
+        }
+        lines.push('');
+      });
+
+      if (sse_stream.entries.length) {
+        lines.push('---', '', '## SSE Stream Log', '');
+        sse_stream.entries.forEach((e) => lines.push(`[${e.ts}] [${e.event_type}] ${e.data}`));
+      }
+
+      const blob = new Blob([lines.join('\n')], { type: 'text/markdown;charset=utf-8' });
+      const url  = URL.createObjectURL(blob);
+      const a    = document.createElement('a');
+      a.href     = url;
+      a.download = `orch-report-${Date.now()}.md`;
+      a.click();
+      URL.revokeObjectURL(url);
+      addLog('success', 'Report downloaded');
+    }
+
+    /* ════════════════════════════════════════
+       MODAL HELPER
+       ════════════════════════════════════════ */
+
+    function showModal(title, body, opts = {}) {
+      modal.title         = title;
+      modal.body          = body;
+      modal.confirm_label = opts.confirm_label || '';
+      modal.confirm_class = opts.confirm_class || 'primary';
+      modal.on_confirm    = opts.on_confirm    || (() => { modal.show = false; });
+      modal.show          = true;
+    }
+
+    /* ════════════════════════════════════════
+       CORE UTILITIES
+       ════════════════════════════════════════ */
+
+    function getAgentColor(agent_id) {
+      const a = agents.value.find((a) => a.agent_id === agent_id);
+      return a ? a.color : '#888';
+    }
+
+    function setAgentStatus(agent_id, status) {
+      const a = agents.value.find((a) => a.agent_id === agent_id);
+      if (a) a.status = status;
+    }
+
+    function addLog(level, message) {
+      system_logs.value.unshift({
+        log_id:      makeId('log', ++log_counter),
+        log_time:    nowTime(),
+        log_level:   level,
+        log_message: message,
+      });
+      if (system_logs.value.length > 30) system_logs.value.pop();
+    }
+
+    async function scrollToBottom() {
+      await nextTick();
+      if (messageContainer.value) messageContainer.value.scrollTop = messageContainer.value.scrollHeight;
+    }
+
+    function autoResize(e) {
+      const el = e.target;
+      el.style.height = 'auto';
+      el.style.height = Math.min(el.scrollHeight, 160) + 'px';
+    }
+
+    async function useSuggestion(prompt) {
+      input_text.value = prompt;
+      await sendMessage();
+    }
+
+    function clearChat() {
+      messages.value          = [];
+      last_commit_result.value = null;
+      session_stats.total_tasks = 0;
+    }
+
+    /* ── Template class/style helpers ── */
+    function avatarClass(msg) {
+      if (msg.sender_type === 'user')         return 'avatar-user';
+      if (msg.sender_type === 'orchestrator') return 'avatar-orchestrator';
+      return 'avatar-agent';
+    }
+    function bubbleClass(msg) {
+      return {
+        'bubble-user':   msg.sender_type === 'user',
+        'bubble-system': msg.sender_type === 'orchestrator',
+        'bubble-agent':  msg.sender_type === 'agent',
+      };
+    }
+    function agentBubbleStyle(agent_id) {
+      const color = getAgentColor(agent_id);
+      return { borderColor: color + '55', background: color + '0d' };
+    }
+    function tokenBarWidth(usage) {
+      return Math.min((usage.tokens_used / usage.token_limit) * 100, 100);
+    }
+
+    /* ── Message builders ── */
+    function buildUserMsg(text) {
+      return {
+        message_id: makeId('msg', ++msg_counter), session_id: 'ses-001',
+        sender_type: 'user', sender_name: 'You', sender_initials: 'ME',
+        agent_id: null, message_content: text,
+        pipeline_trace: [], commit_result: null,
+        is_typing: false, created_at: nowTime(),
+      };
+    }
+    function buildTypingMsg(sender_type, sender_name, sender_initials, agent_id = null) {
+      return {
+        message_id: makeId('msg', ++msg_counter),
+        sender_type, sender_name, sender_initials, agent_id,
+        message_content: '', pipeline_trace: [], commit_result: null,
+        is_typing: true, created_at: nowTime(),
+      };
+    }
+
+    /* ════════════════════════════════════════
+       SEND MESSAGE — MAIN FLOW
+       ════════════════════════════════════════ */
+
+    /**
+     * sendMessage — mengirim pesan ke orchestrator.
+     *
+     * CATATAN INTEGRASI:
+     * Ganti blok "simulate agent work" dengan:
+     *   const task = await fetch('/api/tasks', {
+     *     method: 'POST',
+     *     headers: { 'Content-Type': 'application/json' },
+     *     body: JSON.stringify({
+     *       session_id    : 'ses-001',
+     *       pipeline_id   : active_pipeline.value.pipeline_id,
+     *       message_content: text,
+     *       repo_url      : repo.url_input,
+     *       github_pat    : github_auth.pat,   // jangan log/tampilkan ini
+     *     })
+     *   }).then(r => r.json());
+     *
+     * Kemudian buka SSE:
+     *   const es = new EventSource(`/api/tasks/${task.task_id}/stream`);
+     *   …(lihat mockSSEStream untuk event handling)
+     *
+     * Respons akhir agent dikirim via event 'done' atau endpoint terpisah:
+     *   GET /api/tasks/{task_id}/result
+     */
+    async function sendMessage() {
+      const text = input_text.value.trim();
+      if (!text || is_loading.value) return;
+
+      /* 1. User message */
+      messages.value.push(buildUserMsg(text));
+      input_text.value = '';
+      if (textarea.value) textarea.value.style.height = 'auto';
+      session_stats.total_tasks++;
+      await scrollToBottom();
+
+      /* 2. Orchestrator typing */
+      is_loading.value = true;
+      const orch_typing = buildTypingMsg('orchestrator', 'Orchestrator', '⬡');
+      messages.value.push(orch_typing);
+      addLog('', `Task dispatched → ${active_pipeline.value.pipeline_name}`);
+      await scrollToBottom();
+
+      /* 3. SSE stream (mock) — jalan paralel */
+      const stream_promise = mockSSEStream();
+
+      await delay(rand(900, 1500));
+
+      /* 4. Pick agent */
+      const picked_agent = pickRand(agents.value);
+      setAgentStatus(picked_agent.agent_id, 'busy');
+
+      /* 5. Replace orchestrator typing → response */
+      const orch_idx = messages.value.indexOf(orch_typing);
+      messages.value[orch_idx] = {
+        ...orch_typing,
+        is_typing:       false,
+        message_content: `Menerima tugas dari pipeline "${active_pipeline.value.pipeline_name}". Mendistribusikan ke ${picked_agent.agent_name}…`,
+        pipeline_trace: [
+          { step_agent: 'Orchestrator',          step_output: 'Parsed intent', step_color: '#6ee7b7', duration_ms: rand(40, 140) },
+          { step_agent: picked_agent.agent_name, step_output: 'Assigned',      step_color: picked_agent.color, duration_ms: rand(10, 60) },
+        ],
+        created_at: nowTime(),
+      };
+      await scrollToBottom();
+      await delay(rand(700, 1500));
+
+      /* 6. Agent typing */
+      const agent_typing = buildTypingMsg(
+        'agent',
+        picked_agent.agent_name,
+        picked_agent.agent_name.slice(0, 2).toUpperCase(),
+        picked_agent.agent_id,
+      );
+      messages.value.push(agent_typing);
+      addLog('', `${picked_agent.agent_name} processing…`);
+      await scrollToBottom();
+      await delay(rand(1200, 2200));
+
+      /* 7. Determine if this is a code task → generate commit result */
+      const is_code_task   = active_pipeline.value.pipeline_id === 'pip-003'
+        || text.toLowerCase().includes('fix') || text.toLowerCase().includes('refactor')
+        || text.toLowerCase().includes('code') || text.toLowerCase().includes('bug');
+
+      const is_contributor = repo.info && repo.info.is_contributor;
+
+      let commit_result = null;
+      if (is_code_task && github_auth.is_authenticated) {
+        if (is_contributor) {
+          /* Contributor: bisa push branch baru */
+          const branch_name    = `ai-fix/${Date.now()}`;
+          const parsed         = repo.info ? parseGithubUrl(repo.url_input) : null;
+          const repo_base      = parsed ? `https://github.com/${parsed.owner}/${parsed.repo_name}` : 'https://github.com/owner/repo';
+
+          commit_result = {
+            branch_name,
+            commit_sha:     rand(100000, 999999).toString(16),
+            commit_message: `fix: AI-generated improvements for task "${text.slice(0, 50)}"`,
+            commits_url:    `${repo_base}/commits/${branch_name}`,
+            pr_url:         `${repo_base}/compare/${branch_name}?expand=1`,
+          };
+          last_commit_result.value = commit_result;
+          addLog('success', `Branch pushed: ${branch_name}`);
+        } else {
+          /* Bukan contributor: tidak bisa push */
+          addLog('warn', 'Cannot push: user is not a contributor');
+        }
+      }
+
+      /* 8. Agent response texts */
+      const AGENT_RESPONSES = [
+        () => `Saya telah menganalisis permintaan "${text.slice(0, 60)}…"\n\nHasil menunjukkan 3 sub-task utama. Rencana eksekusi sudah disiapkan dengan estimasi waktu ~4 menit.`,
+        () => `Permintaan diterima. Ditemukan referensi dari 12 sumber terpercaya. Data menunjukkan tren positif 6 bulan terakhir dengan growth rate 23%.`,
+        () => is_contributor
+          ? `Kode telah di-generate dan diperbaiki. Branch baru sudah di-push ke repository. Silahkan review pull request untuk merge ke main.`
+          : `Kode telah dianalisis dan perbaikan diidentifikasi. Karena kamu bukan contributor, patch tidak dapat di-push otomatis. Salin output di bawah untuk apply manual.`,
+        () => `Review selesai. Ditemukan 2 improvement: (1) optimasi query endpoint utama, (2) tambahkan error handling untuk edge case. Tidak ada critical bug. ✓`,
+      ];
+      const resp_fn = pickRand(AGENT_RESPONSES);
+
+      /* 9. Replace agent typing → final response */
+      const agent_idx = messages.value.indexOf(agent_typing);
+      messages.value[agent_idx] = {
+        ...agent_typing,
+        is_typing:       false,
+        message_content: resp_fn(),
+        commit_result,
+        created_at: nowTime(),
+      };
+
+      setAgentStatus(picked_agent.agent_id, 'idle');
+      token_usage.value[0].tokens_used += rand(200, 1000);
+      addLog('success', `${picked_agent.agent_name} completed task`);
+      is_loading.value = false;
+      await Promise.all([scrollToBottom(), stream_promise]);
+    }
+
+    /* ════════════════════════════════════════
+       BACKGROUND SIMULATION
+       ════════════════════════════════════════ */
+
+    onMounted(() => {
+      setInterval(() => {
+        active_tasks.value.forEach((t) => {
+          t.progress_percent = Math.min(100, t.progress_percent + rand(0, 4));
+          if (t.progress_percent >= 100) t.progress_percent = 0;
+        });
+      }, 2000);
+    });
+
+    /* ── Expose to template ── */
+    return {
+      /* state */
+      github_auth, repo, sse_stream, last_commit_result,
+      agents, pipelines, active_pipeline, selected_agent_id,
+      messages, session_stats, active_tasks, token_usage, system_logs,
+      suggestions, input_text, is_loading, modal,
+      /* refs */
+      messageContainer, sseLogArea, textarea,
+      /* methods */
+      connectGithub, revokeGithub, analyseRepo,
+      sendMessage, clearChat, useSuggestion, autoResize, downloadReport,
+      getAgentColor, avatarClass, bubbleClass, agentBubbleStyle, tokenBarWidth,
+    };
+  },
+}).mount('#app');

style/style.css

@@ -0,0 +1,557 @@
+/* ════════════════════════════════════════
+   AI ORCHESTRATION PLATFORM — STYLESHEET
+   ════════════════════════════════════════ */
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+  --bg: #0c0c10;
+  --surface: #13131a;
+  --surface2: #1a1a24;
+  --surface3: #22222f;
+  --border: #2a2a3a;
+  --border2: #383850;
+  --accent: #6ee7b7;
+  --accent2: #818cf8;
+  --accent3: #f472b6;
+  --text: #e8e8f0;
+  --text2: #9090a8;
+  --text3: #5a5a72;
+  --danger: #f87171;
+  --warn: #fbbf24;
+}
+
+html, body {
+  height: 100%;
+  font-family: 'DM Sans', sans-serif;
+  background: var(--bg);
+  color: var(--text);
+}
+
+/* ════════ LAYOUT ════════ */
+#app { display: flex; height: 100vh; overflow: hidden; }
+
+/* ════════ SIDEBAR ════════ */
+.sidebar {
+  width: 270px; flex-shrink: 0;
+  background: var(--surface); border-right: 1px solid var(--border);
+  display: flex; flex-direction: column; overflow-y: auto;
+}
+.sidebar::-webkit-scrollbar { width: 3px; }
+.sidebar::-webkit-scrollbar-thumb { background: var(--border); }
+
+.sidebar-header {
+  padding: 18px 16px 14px; display: flex; align-items: center; gap: 10px;
+  border-bottom: 1px solid var(--border); flex-shrink: 0;
+}
+.logo-mark {
+  width: 28px; height: 28px; flex-shrink: 0;
+  background: linear-gradient(135deg, var(--accent), var(--accent2));
+  border-radius: 6px; display: grid; place-items: center;
+  font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 500; color: #0c0c10;
+}
+.logo-text {
+  font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 700;
+  letter-spacing: 0.04em; white-space: nowrap; overflow: hidden;
+}
+.logo-text span { color: var(--accent); }
+
+.sidebar-section { padding: 12px 8px; }
+.sidebar-label {
+  font-size: 10px; font-weight: 500; letter-spacing: 0.1em;
+  color: var(--text3); text-transform: uppercase; padding: 0 8px 8px;
+}
+
+/* ── GitHub Auth ── */
+.auth-card {
+  margin: 0 8px 0;
+  background: var(--surface2); border: 1px solid var(--border);
+  border-radius: 10px; padding: 12px; transition: border-color 0.15s;
+}
+.auth-card.authenticated { border-color: rgba(110,231,183,0.3); }
+.auth-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
+.auth-title { font-size: 12px; font-weight: 600; }
+.auth-sub   { font-size: 11px; color: var(--text3); }
+.auth-input-row { display: flex; gap: 6px; }
+.auth-input {
+  flex: 1; min-width: 0; background: var(--surface3); border: 1px solid var(--border);
+  border-radius: 6px; padding: 6px 8px; font-size: 11px;
+  font-family: 'IBM Plex Mono', monospace; color: var(--text); outline: none;
+  transition: border-color 0.15s;
+}
+.auth-input::placeholder { color: var(--text3); }
+.auth-input:focus { border-color: var(--accent2); }
+.auth-connect-btn {
+  flex-shrink: 0; padding: 6px 10px; border-radius: 6px; border: none;
+  background: var(--accent2); color: #fff; font-size: 11px; font-weight: 500;
+  cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all 0.15s;
+}
+.auth-connect-btn:hover { background: #6b76e8; }
+.auth-user-row { display: flex; align-items: center; gap: 8px; }
+.auth-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
+.auth-username { font-size: 12px; font-weight: 500; color: var(--accent); }
+.auth-revoke {
+  margin-left: auto; font-size: 11px; color: var(--text3); cursor: pointer;
+  background: none; border: none; font-family: 'DM Sans', sans-serif; transition: color 0.15s;
+}
+.auth-revoke:hover { color: var(--danger); }
+
+/* ── Repo Input ── */
+.repo-section { padding: 8px 8px 4px; }
+.repo-label { font-size: 10px; font-weight: 500; letter-spacing: 0.1em; color: var(--text3); text-transform: uppercase; padding: 0 2px 6px; display: block; }
+.repo-row { display: flex; gap: 6px; }
+.repo-url-input {
+  flex: 1; min-width: 0; background: var(--surface2); border: 1px solid var(--border);
+  border-radius: 8px; padding: 7px 10px; font-size: 12px;
+  font-family: 'IBM Plex Mono', monospace; color: var(--text); outline: none;
+  transition: border-color 0.15s;
+}
+.repo-url-input::placeholder { color: var(--text3); }
+.repo-url-input:focus { border-color: var(--accent2); }
+.repo-analyse-btn {
+  flex-shrink: 0; padding: 7px 11px; border-radius: 8px; border: none;
+  background: var(--accent); color: #0c0c10; font-size: 11px; font-weight: 600;
+  cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all 0.15s;
+  display: flex; align-items: center; gap: 5px; white-space: nowrap;
+}
+.repo-analyse-btn:hover:not(:disabled) { background: #4dd4a0; }
+.repo-analyse-btn:disabled { background: var(--surface3); color: var(--text3); cursor: not-allowed; }
+
+.repo-info-box {
+  margin: 6px 8px 0;
+  background: rgba(110,231,183,0.05); border: 1px solid rgba(110,231,183,0.15);
+  border-radius: 8px; padding: 9px 11px;
+}
+.repo-info-name { font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 500; color: var(--accent); }
+.repo-info-meta { font-size: 11px; color: var(--text3); margin-top: 2px; }
+.contributor-badge {
+  display: inline-block; margin-top: 5px; font-size: 10px;
+  padding: 2px 8px; border-radius: 20px; font-family: 'IBM Plex Mono', monospace;
+}
+.contributor-badge.yes { background: rgba(110,231,183,0.1); color: var(--accent); }
+.contributor-badge.no  { background: rgba(248,113,113,0.1); color: var(--danger); }
+
+/* ── Agent Items ── */
+.agent-item {
+  display: flex; align-items: center; gap: 10px;
+  padding: 8px 10px; border-radius: 8px; cursor: pointer;
+  transition: background 0.15s; margin-bottom: 2px;
+}
+.agent-item:hover  { background: var(--surface3); }
+.agent-item.active { background: var(--surface3); }
+.agent-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
+.agent-info { overflow: hidden; flex: 1; }
+.agent-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.agent-role { font-size: 11px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.agent-status {
+  font-size: 10px; padding: 2px 7px; border-radius: 20px;
+  font-family: 'IBM Plex Mono', monospace; font-weight: 500;
+}
+.status-idle  { background: rgba(110,231,183,0.08); color: var(--accent); }
+.status-busy  { background: rgba(251,191,36,0.10); color: var(--warn); }
+.status-error { background: rgba(248,113,113,0.10); color: var(--danger); }
+
+.divider { height: 1px; background: var(--border); margin: 8px 0; }
+
+/* ── Stats ── */
+.stats-row { display: flex; gap: 8px; padding: 4px 8px; }
+.stat-box {
+  flex: 1; background: var(--surface2); border: 1px solid var(--border);
+  border-radius: 8px; padding: 8px; text-align: center;
+}
+.stat-num   { font-family: 'IBM Plex Mono', monospace; font-size: 18px; font-weight: 500; }
+.stat-label { font-size: 10px; color: var(--text3); margin-top: 2px; }
+
+/* ── Sidebar Bottom ── */
+.sidebar-bottom { margin-top: auto; padding: 12px 8px; border-top: 1px solid var(--border); flex-shrink: 0; }
+.setting-btn {
+  width: 100%; display: flex; align-items: center; gap: 10px;
+  padding: 8px 10px; border-radius: 8px; border: none;
+  background: transparent; color: var(--text2); cursor: pointer;
+  font-family: 'DM Sans', sans-serif; font-size: 13px;
+  transition: background 0.15s, color 0.15s;
+}
+.setting-btn:hover { background: var(--surface3); color: var(--text); }
+.setting-btn svg { flex-shrink: 0; }
+
+/* ════════ CHAT AREA ════════ */
+.chat-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
+
+.chat-topbar {
+  height: 52px; flex-shrink: 0;
+  background: var(--surface); border-bottom: 1px solid var(--border);
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 0 20px; gap: 12px;
+}
+.topbar-left  { display: flex; align-items: center; gap: 12px; }
+.topbar-title { font-family: 'Syne', sans-serif; font-size: 14px; font-weight: 600; }
+.pipeline-badge {
+  font-family: 'IBM Plex Mono', monospace; font-size: 11px;
+  padding: 3px 8px; border-radius: 20px;
+  background: rgba(110,231,183,0.1); color: var(--accent);
+  border: 1px solid rgba(110,231,183,0.2);
+}
+.topbar-right { display: flex; align-items: center; gap: 8px; }
+.icon-btn {
+  width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border);
+  background: transparent; color: var(--text2); cursor: pointer;
+  display: grid; place-items: center; transition: all 0.15s;
+}
+.icon-btn:hover { background: var(--surface3); color: var(--text); }
+
+/* ── Action Bar (bawah topbar) ── */
+.action-bar {
+  flex-shrink: 0; padding: 8px 20px;
+  background: var(--surface2); border-bottom: 1px solid var(--border);
+  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
+}
+.action-sep { width: 1px; height: 20px; background: var(--border); margin: 0 2px; }
+
+.action-btn {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 5px 12px; border-radius: 7px; border: 1px solid var(--border);
+  background: transparent; color: var(--text2); cursor: pointer;
+  font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 500;
+  transition: all 0.15s; white-space: nowrap; text-decoration: none;
+}
+.action-btn:hover:not(:disabled) { border-color: var(--border2); color: var(--text); background: var(--surface3); }
+.action-btn:disabled { opacity: 0.35; cursor: not-allowed; }
+.action-btn svg { flex-shrink: 0; }
+
+.action-btn.green  { background: rgba(110,231,183,0.07); border-color: rgba(110,231,248,0.2); color: var(--accent); }
+.action-btn.green:hover:not(:disabled) { background: rgba(110,231,183,0.14); }
+.action-btn.purple { background: rgba(129,140,248,0.07); border-color: rgba(129,140,248,0.2); color: var(--accent2); }
+.action-btn.purple:hover:not(:disabled) { background: rgba(129,140,248,0.14); }
+.action-btn.red    { background: rgba(248,113,113,0.07); border-color: rgba(248,113,113,0.2); color: var(--danger); }
+.action-btn.red:hover:not(:disabled) { background: rgba(248,113,113,0.14); }
+
+.no-contrib-notice {
+  display: inline-flex; align-items: center; gap: 6px;
+  font-size: 11px; color: var(--danger); padding: 4px 10px;
+  background: rgba(248,113,113,0.07); border: 1px solid rgba(248,113,113,0.2);
+  border-radius: 7px;
+}
+
+/* ── Messages ── */
+.chat-messages {
+  flex: 1; overflow-y: auto; padding: 24px 0; scroll-behavior: smooth;
+}
+.chat-messages::-webkit-scrollbar       { width: 4px; }
+.chat-messages::-webkit-scrollbar-track { background: transparent; }
+.chat-messages::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }
+
+.msg-wrapper {
+  display: flex; gap: 12px; padding: 6px 24px;
+  animation: fadeUp 0.25s ease both;
+}
+@keyframes fadeUp {
+  from { opacity: 0; transform: translateY(8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+.msg-wrapper.user { flex-direction: row-reverse; }
+
+.msg-avatar {
+  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
+  display: grid; place-items: center;
+  font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 500;
+}
+.avatar-user         { background: var(--accent2); color: #fff; }
+.avatar-orchestrator { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #0c0c10; }
+.avatar-agent        { color: #0c0c10; }
+
+.msg-body { flex: 1; max-width: 680px; }
+.msg-wrapper.user .msg-body { align-items: flex-end; display: flex; flex-direction: column; }
+
+.msg-meta {
+  display: flex; align-items: center; gap: 8px;
+  margin-bottom: 6px; font-size: 11px; color: var(--text3);
+}
+.msg-wrapper.user .msg-meta { flex-direction: row-reverse; }
+.msg-sender { font-weight: 500; color: var(--text2); }
+.msg-time   { font-family: 'IBM Plex Mono', monospace; }
+
+.msg-bubble {
+  padding: 12px 16px; border-radius: 12px;
+  font-size: 14px; line-height: 1.7; max-width: 100%;
+  white-space: pre-wrap;
+}
+.bubble-user   { background: var(--accent2); color: #fff; border-bottom-right-radius: 4px; }
+.bubble-system { background: var(--surface2); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
+.bubble-agent  { border: 1px solid var(--border); border-bottom-left-radius: 4px; }
+
+/* ── Pipeline Trace ── */
+.pipeline-trace {
+  margin-top: 10px; padding: 10px 12px;
+  background: var(--surface); border-radius: 8px; border: 1px solid var(--border);
+}
+.trace-label {
+  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
+  color: var(--text3); margin-bottom: 8px; font-family: 'IBM Plex Mono', monospace;
+}
+.trace-steps  { display: flex; flex-direction: column; gap: 6px; }
+.trace-step   { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text2); }
+.trace-dot        { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
+.trace-arrow      { color: var(--text3); font-size: 10px; }
+.trace-step-name  { font-family: 'IBM Plex Mono', monospace; }
+.trace-step-time  { margin-left: auto; color: var(--text3); font-family: 'IBM Plex Mono', monospace; font-size: 11px; }
+
+/* ── Commit Action Card (inside bubble) ── */
+.commit-card {
+  margin-top: 10px; padding: 10px 12px;
+  background: rgba(129,140,248,0.06); border: 1px solid rgba(129,140,248,0.2);
+  border-radius: 8px;
+}
+.commit-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
+.commit-card-title  { font-size: 12px; font-weight: 600; color: var(--accent2); }
+.commit-branch-name {
+  font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--text2);
+  background: var(--surface3); padding: 1px 7px; border-radius: 4px; display: inline-block;
+  margin-bottom: 6px;
+}
+.commit-desc  { font-size: 12px; color: var(--text3); margin-bottom: 10px; line-height: 1.5; }
+.commit-actions { display: flex; gap: 6px; flex-wrap: wrap; }
+.commit-btn {
+  display: inline-flex; align-items: center; gap: 5px;
+  padding: 5px 11px; border-radius: 6px; border: none; cursor: pointer;
+  font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 500;
+  text-decoration: none; transition: all 0.15s;
+}
+.commit-btn.view-commits {
+  background: rgba(129,140,248,0.12); color: var(--accent2);
+  border: 1px solid rgba(129,140,248,0.25);
+}
+.commit-btn.view-commits:hover { background: rgba(129,140,248,0.2); }
+.commit-btn.view-pr {
+  background: rgba(110,231,183,0.1); color: var(--accent);
+  border: 1px solid rgba(110,231,183,0.2);
+}
+.commit-btn.view-pr:hover { background: rgba(110,231,183,0.18); }
+
+/* ── Typing Indicator ── */
+.typing-indicator {
+  display: flex; align-items: center; gap: 4px;
+  padding: 14px 16px; background: var(--surface2);
+  border: 1px solid var(--border); border-radius: 12px;
+  border-bottom-left-radius: 4px; width: fit-content;
+}
+.typing-dot {
+  width: 5px; height: 5px; background: var(--text3);
+  border-radius: 50%; animation: typingBounce 1.2s infinite;
+}
+.typing-dot:nth-child(2) { animation-delay: 0.2s; }
+.typing-dot:nth-child(3) { animation-delay: 0.4s; }
+@keyframes typingBounce {
+  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
+  40%           { transform: translateY(-5px); opacity: 1; }
+}
+
+/* ════════ CHAT INPUT ════════ */
+.chat-input-area {
+  flex-shrink: 0; padding: 14px 24px 18px;
+  background: var(--bg); border-top: 1px solid var(--border);
+}
+.pipeline-selector {
+  display: flex; gap: 6px; margin-bottom: 10px;
+  overflow-x: auto; padding-bottom: 4px;
+}
+.pipeline-selector::-webkit-scrollbar       { height: 2px; }
+.pipeline-selector::-webkit-scrollbar-thumb { background: var(--border); }
+.pipeline-chip {
+  flex-shrink: 0; padding: 4px 12px; border-radius: 20px;
+  font-size: 12px; cursor: pointer; border: 1px solid var(--border);
+  background: transparent; color: var(--text2); font-family: 'DM Sans', sans-serif;
+  transition: all 0.15s; white-space: nowrap;
+}
+.pipeline-chip:hover  { border-color: var(--border2); color: var(--text); }
+.pipeline-chip.active { background: rgba(110,231,183,0.1); border-color: rgba(110,231,183,0.3); color: var(--accent); }
+.input-box {
+  display: flex; align-items: flex-end; gap: 10px;
+  background: var(--surface); border: 1px solid var(--border);
+  border-radius: 14px; padding: 10px 10px 10px 16px;
+  transition: border-color 0.15s;
+}
+.input-box:focus-within { border-color: var(--border2); }
+textarea {
+  flex: 1; background: transparent; border: none; outline: none;
+  color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 14px;
+  line-height: 1.6; resize: none; min-height: 22px; max-height: 160px;
+}
+textarea::placeholder { color: var(--text3); }
+.send-btn {
+  width: 36px; height: 36px; border-radius: 10px; border: none;
+  background: var(--accent); color: #0c0c10; cursor: pointer;
+  display: grid; place-items: center; flex-shrink: 0;
+  transition: all 0.15s; align-self: flex-end;
+}
+.send-btn:hover:not(:disabled)  { background: #4dd4a0; transform: scale(1.05); }
+.send-btn:disabled { background: var(--surface3); color: var(--text3); cursor: not-allowed; }
+.input-hint { font-size: 11px; color: var(--text3); margin-top: 8px; text-align: center; }
+.input-hint kbd {
+  font-family: 'IBM Plex Mono', monospace; font-size: 10px;
+  background: var(--surface2); border: 1px solid var(--border);
+  border-radius: 4px; padding: 1px 5px;
+}
+
+/* ════════ RIGHT PANEL ════════ */
+.right-panel {
+  width: 300px; flex-shrink: 0;
+  background: var(--surface); border-left: 1px solid var(--border);
+  display: flex; flex-direction: column; overflow-y: auto;
+}
+.right-panel::-webkit-scrollbar       { width: 4px; }
+.right-panel::-webkit-scrollbar-thumb { background: var(--border); }
+
+.panel-section { padding: 14px 16px; border-bottom: 1px solid var(--border); }
+.panel-title {
+  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
+  color: var(--text3); margin-bottom: 10px; font-family: 'IBM Plex Mono', monospace;
+  display: flex; align-items: center; justify-content: space-between;
+}
+.panel-title-badge {
+  background: var(--surface3); border-radius: 10px;
+  padding: 1px 7px; font-size: 10px; color: var(--text3);
+  text-transform: none; letter-spacing: 0;
+}
+
+/* ── SSE Log ── */
+.sse-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
+.sse-status-dot {
+  width: 6px; height: 6px; border-radius: 50%; background: var(--text3);
+  flex-shrink: 0;
+}
+.sse-status-dot.active { background: var(--accent); animation: sseGlow 1.5s infinite; }
+@keyframes sseGlow { 0%,100% { opacity:1; } 50% { opacity:0.3; } }
+.sse-status-label { font-size: 11px; color: var(--text3); }
+.sse-status-label.active { color: var(--accent); }
+.sse-clear-btn {
+  margin-left: auto; font-size: 10px; color: var(--text3); cursor: pointer;
+  background: none; border: none; font-family: 'DM Sans', sans-serif; transition: color 0.15s;
+}
+.sse-clear-btn:hover { color: var(--text2); }
+
+.sse-log-area {
+  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
+  font-family: 'IBM Plex Mono', monospace; font-size: 11px; line-height: 1.7;
+  max-height: 200px; overflow-y: auto; padding: 8px 10px;
+}
+.sse-log-area::-webkit-scrollbar       { width: 3px; }
+.sse-log-area::-webkit-scrollbar-thumb { background: var(--border2); }
+.sse-empty-msg { color: var(--text3); text-align: center; padding: 12px 0; font-size: 11px; }
+
+.sse-entry { display: flex; gap: 6px; margin-bottom: 3px; align-items: baseline; }
+.sse-ts    { color: var(--text3); flex-shrink: 0; font-size: 10px; }
+.sse-event-tag {
+  flex-shrink: 0; font-size: 9px; padding: 1px 5px; border-radius: 3px;
+  text-transform: uppercase; letter-spacing: 0.05em;
+}
+.sse-event-tag.msg    { background: rgba(129,140,248,0.15); color: var(--accent2); }
+.sse-event-tag.tool   { background: rgba(251,191,36,0.12); color: var(--warn); }
+.sse-event-tag.done   { background: rgba(110,231,183,0.12); color: var(--accent); }
+.sse-event-tag.error  { background: rgba(248,113,113,0.12); color: var(--danger); }
+.sse-event-tag.stream { background: rgba(110,231,183,0.08); color: var(--text3); }
+.sse-data  { color: var(--text2); word-break: break-all; flex: 1; }
+
+/* ── Task Card ── */
+.task-card {
+  background: var(--surface2); border: 1px solid var(--border);
+  border-radius: 10px; padding: 11px; margin-bottom: 7px;
+}
+.task-name  { font-size: 13px; font-weight: 500; margin-bottom: 3px; }
+.task-agent { font-size: 11px; color: var(--text3); margin-bottom: 8px; }
+.progress-bar  { height: 3px; background: var(--surface3); border-radius: 2px; overflow: hidden; }
+.progress-fill { height: 100%; border-radius: 2px; transition: width 0.5s ease; }
+
+/* ── Token Usage ── */
+.token-row  { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
+.token-label { font-size: 12px; color: var(--text2); }
+.token-val   { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--text); }
+.token-bar   { height: 2px; background: var(--surface3); border-radius: 2px; overflow: hidden; margin-bottom: 10px; }
+.token-fill  { height: 100%; border-radius: 2px; }
+
+/* ── System Log ── */
+.log-item { display: flex; gap: 8px; margin-bottom: 7px; font-size: 11px; }
+.log-time { font-family: 'IBM Plex Mono', monospace; color: var(--text3); white-space: nowrap; }
+.log-msg         { color: var(--text2); line-height: 1.5; }
+.log-msg.success { color: var(--accent); }
+.log-msg.warn    { color: var(--warn); }
+.log-msg.error   { color: var(--danger); }
+
+/* ── System Status ── */
+.system-status {
+  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
+  background: rgba(110,231,183,0.06); border: 1px solid rgba(110,231,183,0.15); border-radius: 8px;
+}
+.pulse-dot   { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: sseGlow 2s infinite; }
+.status-text { font-size: 12px; color: var(--accent); font-weight: 500; }
+.status-sub  { font-size: 11px; color: var(--text3); margin-left: auto; font-family: 'IBM Plex Mono', monospace; }
+
+/* ════════ WELCOME ════════ */
+.welcome {
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  flex: 1; padding: 40px 24px; text-align: center; gap: 0;
+}
+.welcome-logo {
+  width: 56px; height: 56px;
+  background: linear-gradient(135deg, var(--accent), var(--accent2));
+  border-radius: 14px; display: grid; place-items: center;
+  font-family: 'IBM Plex Mono', monospace; font-size: 18px; font-weight: 500;
+  color: #0c0c10; margin-bottom: 20px;
+}
+.welcome h1 { font-family: 'Syne', sans-serif; font-size: 22px; font-weight: 700; margin-bottom: 8px; }
+.welcome p  { font-size: 14px; color: var(--text2); line-height: 1.7; max-width: 380px; margin-bottom: 28px; }
+.suggestion-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; max-width: 500px; }
+.suggestion-card {
+  background: var(--surface2); border: 1px solid var(--border);
+  border-radius: 10px; padding: 12px 14px; text-align: left; cursor: pointer; transition: all 0.15s;
+}
+.suggestion-card:hover { border-color: var(--border2); background: var(--surface3); }
+.sugg-title { font-size: 13px; font-weight: 500; margin-bottom: 4px; }
+.sugg-desc  { font-size: 11px; color: var(--text3); line-height: 1.5; }
+
+/* ════════ MODAL ════════ */
+.modal-overlay {
+  position: fixed; inset: 0; background: rgba(0,0,0,0.65);
+  display: flex; align-items: center; justify-content: center;
+  z-index: 200; backdrop-filter: blur(4px);
+  animation: fadeInOverlay 0.15s ease;
+}
+@keyframes fadeInOverlay { from { opacity: 0; } to { opacity: 1; } }
+.modal {
+  background: var(--surface); border: 1px solid var(--border2);
+  border-radius: 14px; padding: 24px; width: 460px; max-width: 90vw;
+  animation: modalSlideUp 0.2s ease;
+}
+@keyframes modalSlideUp {
+  from { opacity: 0; transform: translateY(14px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+.modal-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; gap: 12px; }
+.modal-title  { font-family: 'Syne', sans-serif; font-size: 16px; font-weight: 700; }
+.modal-close  {
+  width: 28px; height: 28px; flex-shrink: 0; border-radius: 7px; border: none;
+  background: var(--surface3); color: var(--text2); cursor: pointer;
+  display: grid; place-items: center; transition: all 0.15s;
+}
+.modal-close:hover { background: var(--border); color: var(--text); }
+.modal-body { font-size: 13px; color: var(--text2); line-height: 1.7; }
+.modal-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
+.modal-btn {
+  padding: 8px 18px; border-radius: 8px; border: none;
+  font-size: 13px; font-weight: 500; cursor: pointer;
+  font-family: 'DM Sans', sans-serif; transition: all 0.15s;
+}
+.modal-btn.secondary { background: var(--surface3); color: var(--text2); border: 1px solid var(--border); }
+.modal-btn.secondary:hover { background: var(--border); color: var(--text); }
+.modal-btn.primary   { background: var(--accent2); color: #fff; }
+.modal-btn.primary:hover { background: #6b76e8; }
+.modal-btn.danger    { background: rgba(248,113,113,0.15); color: var(--danger); border: 1px solid rgba(248,113,113,0.3); }
+
+.modal-info-row {
+  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
+  background: var(--surface2); border: 1px solid var(--border);
+  border-radius: 8px; margin-bottom: 12px;
+}
+.modal-info-row code {
+  font-family: 'IBM Plex Mono', monospace; font-size: 12px;
+  color: var(--accent2); background: var(--surface3); padding: 2px 7px; border-radius: 4px;
+}

view/index.html

@@ -0,0 +1,467 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>AI Orchestration Platform</title>
+  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Syne:wght@400;600;700&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="../style/style.css" />
+</head>
+<body>
+<div id="app">
+
+  <!-- ════════ SIDEBAR ════════ -->
+  <aside class="sidebar">
+    <div class="sidebar-header">
+      <div class="logo-mark">AI</div>
+      <div class="logo-text">ORCH<span>.</span>STUDIO</div>
+    </div>
+
+    <!-- GitHub PAT Auth -->
+    <div class="sidebar-section" style="padding-bottom: 4px;">
+      <div class="sidebar-label">GitHub Auth</div>
+      <div class="auth-card" :class="{ authenticated: github_auth.is_authenticated }">
+        <div class="auth-header">
+          <!-- GitHub icon -->
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="color: var(--text2)">
+            <path d="M12 2C6.477 2 2 6.477 2 12c0 4.418 2.865 8.166 6.839 9.489.5.092.682-.217.682-.482 0-.237-.009-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.155-1.11-1.463-1.11-1.463-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0 0 22 12c0-5.523-4.477-10-10-10z"/>
+          </svg>
+          <div>
+            <div class="auth-title">GitHub Authentication</div>
+            <div class="auth-sub">Personal Access Token</div>
+          </div>
+        </div>
+
+        <!-- Not authenticated -->
+        <div v-if="!github_auth.is_authenticated" class="auth-input-row">
+          <input
+            class="auth-input"
+            type="password"
+            v-model="github_auth.pat_input"
+            placeholder="ghp_xxxxxxxxxxxx"
+            @keydown.enter="connectGithub"
+          />
+          <button class="auth-connect-btn" @click="connectGithub" :disabled="!github_auth.pat_input.trim()">
+            Connect
+          </button>
+        </div>
+
+        <!-- Authenticated -->
+        <div v-else class="auth-user-row">
+          <div class="auth-dot"></div>
+          <span class="auth-username">{{ github_auth.username }}</span>
+          <button class="auth-revoke" @click="revokeGithub">Revoke</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Repo URL -->
+    <div class="repo-section">
+      <label class="repo-label">Repository</label>
+      <div class="repo-row">
+        <input
+          class="repo-url-input"
+          type="text"
+          v-model="repo.url_input"
+          placeholder="https://github.com/owner/repo"
+          @keydown.enter="analyseRepo"
+        />
+        <button
+          class="repo-analyse-btn"
+          @click="analyseRepo"
+          :disabled="!repo.url_input.trim() || repo.is_analysing"
+        >
+          <svg v-if="!repo.is_analysing" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+            <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
+          </svg>
+          <svg v-else width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="animation: spin 1s linear infinite;">
+            <path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/>
+          </svg>
+          {{ repo.is_analysing ? 'Analysing…' : 'Analyse' }}
+        </button>
+      </div>
+
+      <!-- Repo info result -->
+      <div v-if="repo.info" class="repo-info-box">
+        <div class="repo-info-name">{{ repo.info.full_name }}</div>
+        <div class="repo-info-meta">{{ repo.info.language }} · ⭐ {{ repo.info.stars_count }} · {{ repo.info.open_issues_count }} issues</div>
+        <span class="contributor-badge" :class="repo.info.is_contributor ? 'yes' : 'no'">
+          {{ repo.info.is_contributor ? '✓ Contributor' : '✗ Read-only' }}
+        </span>
+      </div>
+    </div>
+
+    <div class="divider" style="margin: 4px 16px;"></div>
+
+    <!-- Active Agents -->
+    <div class="sidebar-section">
+      <div class="sidebar-label">Active Agents</div>
+      <div
+        v-for="agent in agents"
+        :key="agent.agent_id"
+        class="agent-item"
+        :class="{ active: selected_agent_id === agent.agent_id }"
+        @click="selected_agent_id = agent.agent_id"
+      >
+        <div class="agent-dot" :style="{ background: agent.color }"></div>
+        <div class="agent-info">
+          <div class="agent-name">{{ agent.agent_name }}</div>
+          <div class="agent-role">{{ agent.agent_role }}</div>
+        </div>
+        <span class="agent-status" :class="'status-' + agent.status">{{ agent.status }}</span>
+      </div>
+    </div>
+
+    <div class="divider" style="margin: 0 16px;"></div>
+
+    <!-- Session Stats -->
+    <div class="sidebar-section">
+      <div class="sidebar-label">Session Stats</div>
+      <div class="stats-row">
+        <div class="stat-box">
+          <div class="stat-num" style="color: var(--accent)">{{ session_stats.total_tasks }}</div>
+          <div class="stat-label">Tasks</div>
+        </div>
+        <div class="stat-box">
+          <div class="stat-num" style="color: var(--accent2)">{{ session_stats.success_rate }}%</div>
+          <div class="stat-label">Success</div>
+        </div>
+        <div class="stat-box">
+          <div class="stat-num" style="color: var(--warn)">{{ session_stats.avg_latency_ms }}ms</div>
+          <div class="stat-label">Latency</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="sidebar-bottom">
+      <button class="setting-btn">
+        <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+          <circle cx="12" cy="12" r="3"/>
+          <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
+        </svg>
+        Settings
+      </button>
+      <button class="setting-btn" style="color: var(--danger)">
+        <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+          <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
+          <polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/>
+        </svg>
+        Logout
+      </button>
+    </div>
+  </aside>
+
+  <!-- ════════ CHAT AREA ════════ -->
+  <main class="chat-area">
+
+    <!-- Topbar -->
+    <header class="chat-topbar">
+      <div class="topbar-left">
+        <div class="topbar-title">AI Orchestration Chat</div>
+        <span class="pipeline-badge">{{ active_pipeline.pipeline_name }}</span>
+      </div>
+      <div class="topbar-right">
+        <button class="icon-btn" title="Clear chat" @click="clearChat">
+          <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+            <polyline points="3 6 5 6 21 6"/>
+            <path d="M19 6l-1 14H6L5 6"/>
+            <path d="M10 11v6M14 11v6M9 6V4h6v2"/>
+          </svg>
+        </button>
+      </div>
+    </header>
+
+    <!-- Action Bar -->
+    <div class="action-bar">
+      <!-- Download Reports -->
+      <button class="action-btn green" @click="downloadReport" :disabled="messages.length === 0">
+        <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+          <polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>
+        </svg>
+        Download Report
+      </button>
+
+      <div class="action-sep"></div>
+
+      <!-- View Commits — hanya muncul kalau ada commit_result di chat -->
+      <template v-if="last_commit_result">
+        <a
+          class="action-btn purple"
+          :href="last_commit_result.commits_url"
+          target="_blank"
+          rel="noopener"
+        >
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="12" cy="12" r="3"/><line x1="12" y1="3" x2="12" y2="9"/><line x1="12" y1="15" x2="12" y2="21"/>
+            <line x1="3" y1="12" x2="9" y2="12"/><line x1="15" y1="12" x2="21" y2="12"/>
+          </svg>
+          View Commits
+        </a>
+
+        <!-- Pull Request — hanya contributor -->
+        <template v-if="repo.info && repo.info.is_contributor">
+          <a class="action-btn green" :href="last_commit_result.pr_url" target="_blank" rel="noopener">
+            <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+              <circle cx="18" cy="18" r="3"/><circle cx="6" cy="6" r="3"/><circle cx="6" cy="18" r="3"/>
+              <path d="M6 9v6M15.5 6.5l-3 3.5 3 3.5M18 6v9"/>
+            </svg>
+            Open Pull Request
+          </a>
+        </template>
+
+        <div class="action-sep"></div>
+      </template>
+
+      <!-- Non-contributor notice -->
+      <div v-if="repo.info && !repo.info.is_contributor" class="no-contrib-notice">
+        <svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+          <circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>
+        </svg>
+        Read-only — commit &amp; push disabled
+      </div>
+    </div>
+
+    <!-- Messages -->
+    <div class="chat-messages" ref="messageContainer">
+
+      <!-- Welcome -->
+      <div v-if="messages.length === 0" class="welcome">
+        <div class="welcome-logo">⬡</div>
+        <h1>AI Orchestration Studio</h1>
+        <p>Masukkan link repo GitHub dan token PAT di sidebar, lalu klik Analyse untuk memulai agent.</p>
+        <div class="suggestion-grid">
+          <div
+            v-for="s in suggestions" :key="s.title"
+            class="suggestion-card"
+            @click="useSuggestion(s.prompt)"
+          >
+            <div class="sugg-title">{{ s.title }}</div>
+            <div class="sugg-desc">{{ s.desc }}</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Message list -->
+      <template v-else>
+        <div
+          v-for="msg in messages" :key="msg.message_id"
+          class="msg-wrapper"
+          :class="{ user: msg.sender_type === 'user' }"
+        >
+          <div
+            class="msg-avatar"
+            :class="avatarClass(msg)"
+            :style="msg.sender_type === 'agent' ? { background: getAgentColor(msg.agent_id) } : {}"
+          >
+            {{ msg.sender_type === 'user' ? 'ME' : msg.sender_initials }}
+          </div>
+
+          <div class="msg-body">
+            <div class="msg-meta">
+              <span class="msg-sender">{{ msg.sender_name }}</span>
+              <span class="msg-time">{{ msg.created_at }}</span>
+            </div>
+
+            <div v-if="msg.is_typing" class="typing-indicator">
+              <div class="typing-dot"></div>
+              <div class="typing-dot"></div>
+              <div class="typing-dot"></div>
+            </div>
+
+            <div
+              v-else
+              class="msg-bubble"
+              :class="bubbleClass(msg)"
+              :style="msg.sender_type === 'agent' ? agentBubbleStyle(msg.agent_id) : {}"
+            >
+              {{ msg.message_content }}
+
+              <!-- Pipeline trace -->
+              <div v-if="msg.pipeline_trace && msg.pipeline_trace.length" class="pipeline-trace">
+                <div class="trace-label">Pipeline Trace</div>
+                <div class="trace-steps">
+                  <div v-for="(step, idx) in msg.pipeline_trace" :key="idx" class="trace-step">
+                    <div class="trace-dot" :style="{ background: step.step_color }"></div>
+                    <span class="trace-step-name">{{ step.step_agent }}</span>
+                    <span class="trace-arrow">→</span>
+                    <span style="color: var(--text2)">{{ step.step_output }}</span>
+                    <span class="trace-step-time">{{ step.duration_ms }}ms</span>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Commit result card -->
+              <div v-if="msg.commit_result" class="commit-card">
+                <div class="commit-card-header">
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" style="color: var(--accent2)">
+                    <path d="M12 2C6.477 2 2 6.477 2 12c0 4.418 2.865 8.166 6.839 9.489.5.092.682-.217.682-.482 0-.237-.009-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.155-1.11-1.463-1.11-1.463-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0 0 22 12c0-5.523-4.477-10-10-10z"/>
+                  </svg>
+                  <span class="commit-card-title">Branch Created</span>
+                </div>
+                <div class="commit-branch-name">{{ msg.commit_result.branch_name }}</div>
+                <div class="commit-desc">{{ msg.commit_result.commit_message }}</div>
+                <div class="commit-actions">
+                  <a class="commit-btn view-commits" :href="msg.commit_result.commits_url" target="_blank" rel="noopener">
+                    <svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                      <circle cx="12" cy="12" r="3"/><line x1="12" y1="3" x2="12" y2="9"/><line x1="12" y1="15" x2="12" y2="21"/>
+                      <line x1="3" y1="12" x2="9" y2="12"/><line x1="15" y1="12" x2="21" y2="12"/>
+                    </svg>
+                    View Commits
+                  </a>
+                  <a
+                    v-if="repo.info && repo.info.is_contributor"
+                    class="commit-btn view-pr"
+                    :href="msg.commit_result.pr_url"
+                    target="_blank"
+                    rel="noopener"
+                  >
+                    <svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                      <circle cx="18" cy="18" r="3"/><circle cx="6" cy="6" r="3"/><circle cx="6" cy="18" r="3"/>
+                      <path d="M6 9v6M15.5 6.5l-3 3.5 3 3.5M18 6v9"/>
+                    </svg>
+                    Open PR
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+
+    <!-- Input area -->
+    <div class="chat-input-area">
+      <div class="pipeline-selector">
+        <button
+          v-for="p in pipelines" :key="p.pipeline_id"
+          class="pipeline-chip"
+          :class="{ active: active_pipeline.pipeline_id === p.pipeline_id }"
+          @click="active_pipeline = p"
+        >
+          {{ p.pipeline_name }}
+        </button>
+      </div>
+      <div class="input-box">
+        <textarea
+          v-model="input_text"
+          placeholder="Chat nonaktif — agent bekerja otomatis saat repo di-Analyse"
+          disabled
+          rows="1"
+        ></textarea>
+      </div>
+      <div class="input-hint">Mode otomatis · Analyse repo untuk memulai agent</div>
+    </div>
+  </main>
+
+  <!-- ════════ RIGHT PANEL ════════ -->
+  <aside class="right-panel">
+
+    <!-- System status -->
+    <div class="panel-section">
+      <div class="system-status">
+        <div class="pulse-dot"></div>
+        <span class="status-text">System Online</span>
+        <span class="status-sub">v2.4.1</span>
+      </div>
+    </div>
+
+    <!-- SSE / AI Response Logs -->
+    <div class="panel-section">
+      <div class="panel-title">
+        AI Response Stream
+        <span class="panel-title-badge">SSE</span>
+      </div>
+      <div class="sse-header">
+        <div class="sse-status-dot" :class="{ active: sse_stream.is_active }"></div>
+        <span class="sse-status-label" :class="{ active: sse_stream.is_active }">
+          {{ sse_stream.is_active ? 'Streaming…' : 'Idle' }}
+        </span>
+        <button class="sse-clear-btn" @click="sse_stream.entries = []">Clear</button>
+      </div>
+      <div class="sse-log-area" ref="sseLogArea">
+        <div v-if="!sse_stream.entries.length" class="sse-empty-msg">
+          Waiting for stream events…
+        </div>
+        <div v-for="(entry, idx) in sse_stream.entries" :key="idx" class="sse-entry">
+          <span class="sse-ts">{{ entry.ts }}</span>
+          <span class="sse-event-tag" :class="entry.event_type">{{ entry.event_type }}</span>
+          <span class="sse-data">{{ entry.data }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Active tasks -->
+    <div class="panel-section">
+      <div class="panel-title">
+        Active Tasks
+        <span class="panel-title-badge">{{ active_tasks.length }}</span>
+      </div>
+      <div v-for="task in active_tasks" :key="task.task_id" class="task-card">
+        <div class="task-name">{{ task.task_name }}</div>
+        <div class="task-agent">{{ task.assigned_agent }}</div>
+        <div class="progress-bar">
+          <div class="progress-fill" :style="{ width: task.progress_percent + '%', background: task.task_color }"></div>
+        </div>
+      </div>
+      <div v-if="!active_tasks.length" style="font-size: 12px; color: var(--text3); text-align: center; padding: 8px 0;">
+        No active tasks
+      </div>
+    </div>
+
+    <!-- Token usage -->
+    <div class="panel-section">
+      <div class="panel-title">Token Usage</div>
+      <div v-for="usage in token_usage" :key="usage.model_name">
+        <div class="token-row">
+          <span class="token-label">{{ usage.model_name }}</span>
+          <span class="token-val">{{ usage.tokens_used.toLocaleString() }}</span>
+        </div>
+        <div class="token-bar">
+          <div class="token-fill" :style="{ width: tokenBarWidth(usage) + '%', background: usage.bar_color }"></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- System log -->
+    <div class="panel-section">
+      <div class="panel-title">System Log</div>
+      <div v-for="log in system_logs" :key="log.log_id" class="log-item">
+        <span class="log-time">{{ log.log_time }}</span>
+        <span class="log-msg" :class="log.log_level">{{ log.log_message }}</span>
+      </div>
+    </div>
+  </aside>
+
+  <!-- ════════ MODAL ════════ -->
+  <div v-if="modal.show" class="modal-overlay" @click.self="modal.show = false">
+    <div class="modal">
+      <div class="modal-header">
+        <div class="modal-title">{{ modal.title }}</div>
+        <button class="modal-close" @click="modal.show = false">
+          <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+            <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+          </svg>
+        </button>
+      </div>
+      <div class="modal-body" v-html="modal.body"></div>
+      <div class="modal-footer">
+        <button class="modal-btn secondary" @click="modal.show = false">Close</button>
+        <button v-if="modal.confirm_label" class="modal-btn" :class="modal.confirm_class" @click="modal.on_confirm">
+          {{ modal.confirm_label }}
+        </button>
+      </div>
+    </div>
+  </div>
+
+</div>
+
+<style>
+@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+</style>
+
+<script src="../app.js"></script>
+</body>
+</html>