@mazees/mark 5.0.0

package/src/renderer/src/components/Chat/ApprovalBubble.jsx

@@ -0,0 +1,127 @@
+/* eslint-disable react/prop-types */
+import { useState } from 'react'
+import { useApproval, extractToolTarget } from '../../contexts/ApprovalContext'
+import FileDiffModal from './FileDiffModal'
+
+const FILE_TOOLS = ['write-file', 'replace-content', 'replace-lines', 'delete-file']
+
+export const ApprovalBubble = ({
+  approvalId,
+  tool = '',
+  message = '',
+  query = null,
+  status = 'pending'
+}) => {
+  const { resolveApproval } = useApproval()
+  const [showDiffModal, setShowDiffModal] = useState(false)
+
+  // Hilang seketika setelah di-acc atau ditolak
+  if (status !== 'pending') {
+    return null
+  }
+
+  const targetInfo = extractToolTarget(tool, query)
+  const isFileTool = FILE_TOOLS.includes(tool)
+  const previewValue =
+    targetInfo.value ||
+    message ||
+    (typeof query === 'string' ? query : JSON.stringify(query, null, 2))
+
+  const handleDecision = (decisionType) => {
+    setShowDiffModal(false)
+    if (resolveApproval) {
+      resolveApproval(approvalId, decisionType)
+    }
+  }
+
+  return (
+    <div className="my-2 p-3 rounded-xl bg-base-300/50 border border-white/5 space-y-2.5 text-xs text-base-content select-text shadow-sm">
+      {/* Header persetujuan */}
+      <div className="flex items-center justify-between gap-2">
+        <div className="flex items-center gap-2 min-w-0">
+          <span className="font-semibold text-white/90 text-xs tracking-wide">
+            Persetujuan Eksekusi
+          </span>
+          {tool && (
+            <span className="bg-warning/10 text-warning px-2 py-0.5 rounded text-[11px] font-mono font-medium">
+              {tool}
+            </span>
+          )}
+        </div>
+
+        {isFileTool && (
+          <button
+            type="button"
+            onClick={() => setShowDiffModal(true)}
+            className="px-2.5 py-1 rounded-lg bg-primary/10 hover:bg-primary/20 text-primary font-mono text-xs transition-colors cursor-pointer"
+          >
+            Review
+          </button>
+        )}
+      </div>
+
+      <p className="text-white/60 text-[11px]">
+        Mark meminta izin untuk mengeksekusi operasi berikut:
+      </p>
+
+      {/* Parameter / Command Preview */}
+      <div className="bg-black/30 rounded-lg p-2.5 font-mono text-[11px] text-white/90 space-y-1">
+        {targetInfo.value && (
+          <div className="text-[10px] uppercase font-bold text-warning/70 select-none">
+            {targetInfo.type === 'command' ? 'Perintah Shell' : 'Target Berkas'}
+          </div>
+        )}
+        <div className="text-white/90 whitespace-pre-wrap break-all leading-relaxed">
+          {previewValue}
+        </div>
+      </div>
+
+      {/* Action Buttons */}
+      <div className="flex flex-wrap items-center justify-between gap-2 pt-0.5">
+        <button
+          type="button"
+          onClick={() => handleDecision('reject')}
+          className="btn btn-ghost btn-xs text-error/80 hover:text-error hover:bg-error/10 rounded-lg px-3"
+        >
+          Tolak
+        </button>
+        <div className="flex flex-wrap items-center gap-1.5">
+          <button
+            type="button"
+            onClick={() => handleDecision('approve_session')}
+            className="btn btn-ghost btn-xs text-warning/80 hover:text-warning hover:bg-warning/10 rounded-lg px-2.5"
+          >
+            Izinkan Sesi Ini
+          </button>
+          <button
+            type="button"
+            onClick={() => handleDecision('approve_always')}
+            className="btn btn-ghost btn-xs text-white/40 hover:text-error hover:bg-error/10 rounded-lg px-2.5"
+          >
+            Izinkan Selamanya
+          </button>
+          <button
+            type="button"
+            onClick={() => handleDecision('approve_once')}
+            className="btn btn-primary btn-xs text-black font-semibold rounded-lg px-3 shadow-sm"
+          >
+            Izinkan Sekali
+          </button>
+        </div>
+      </div>
+
+      {/* Floating Diff Modal */}
+      {isFileTool && (
+        <FileDiffModal
+          isOpen={showDiffModal}
+          onClose={() => setShowDiffModal(false)}
+          tool={tool}
+          query={query}
+          onResolve={handleDecision}
+        />
+      )}
+    </div>
+  )
+}
+
+export default ApprovalBubble

package/src/renderer/src/components/Chat/CodeBlock.jsx

@@ -0,0 +1,83 @@
+import React, { useState } from 'react'
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
+import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism'
+
+export const CodeBlock = React.memo(({ node, inline, className, children, ...props }) => {
+  const match = /language-(\w+)/.exec(className || '')
+  const [isCopied, setIsCopied] = useState(false)
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(String(children).replace(/\n$/, ''))
+    setIsCopied(true)
+    setTimeout(() => setIsCopied(false), 2000)
+  }
+
+  if (!inline && match) {
+    return (
+      <div className="relative group my-4 rounded-xl overflow-hidden border border-base-300 shadow-sm bg-base-200/50">
+        <div className="flex items-center justify-between px-4 py-1.5 bg-base-300/50 text-[10px] uppercase tracking-wider font-bold text-white/50 border-b border-base-300">
+          <span>{match[1]}</span>
+          <button
+            onClick={handleCopy}
+            className="flex items-center gap-1.5 hover:text-white transition-colors cursor-pointer"
+          >
+            {isCopied ? (
+              <>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="12"
+                  height="12"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  className="text-success"
+                >
+                  <polyline points="20 6 9 17 4 12"></polyline>
+                </svg>
+                <span className="text-success">Copied!</span>
+              </>
+            ) : (
+              <>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="12"
+                  height="12"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+                  <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+                </svg>
+                <span>Copy</span>
+              </>
+            )}
+          </button>
+        </div>
+        <SyntaxHighlighter
+          {...props}
+          style={oneDark}
+          language={match[1]}
+          PreTag="div"
+          className="!m-0 !bg-transparent text-[12px] no-scrollbar"
+        >
+          {String(children).replace(/\n$/, '')}
+        </SyntaxHighlighter>
+      </div>
+    )
+  }
+  return (
+    <code
+      {...props}
+      className={`${className} bg-white/10 px-1.5 py-0.5 rounded-md text-[12px] font-mono`}
+    >
+      {children}
+    </code>
+  )
+})

package/src/renderer/src/components/Chat/DurableTaskBubble.jsx

@@ -0,0 +1,455 @@
+/* eslint-disable react/prop-types */
+import { useState } from 'react'
+import Markdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import {
+  Check,
+  FolderOpen,
+  FileText,
+  Square,
+  ChevronRight,
+  XCircle,
+  Brain,
+  Terminal,
+  Ban,
+  Loader2
+} from 'lucide-react'
+import { useApproval } from '../../contexts/ApprovalContext'
+import { ApprovalBubble } from './ApprovalBubble'
+import { FileDiffModal } from './FileDiffModal'
+
+export const DurableTaskBubble = ({
+  plan = [],
+  resolvedCurrentStep = 0,
+  reasoning = null,
+  taskId = null,
+  taskTitle = null,
+  taskStatus = null,
+  artifactRoot = null,
+  onStop = null,
+  executedTools = [],
+  activeLiveTools = null,
+  activeThinkingContent = null
+}) => {
+  const [selectedArtifactPath, setSelectedArtifactPath] = useState(null)
+  const [isProcessOpen, setIsProcessOpen] = useState(true)
+  const { activeApproval } = useApproval() || {}
+
+  const totalSteps = plan.length
+  const completedCount = plan.filter(
+    (s, idx) =>
+      s.status === 'completed' || plan.slice(idx + 1).some((later) => later.status === 'completed')
+  ).length
+
+  const isStopped = taskStatus === 'stopped' || taskStatus === 'cancelled'
+  const isFailed = taskStatus === 'failed'
+  const isAllDone =
+    taskStatus === 'completed' ||
+    (!isStopped && !isFailed && totalSteps > 0 && completedCount >= totalSteps)
+  const isRunning = !isAllDone && !isFailed && !isStopped
+
+  const toolsToDisplay =
+    activeLiveTools && activeLiveTools.length > 0 ? activeLiveTools : executedTools || []
+  const displayReasoning = reasoning || activeThinkingContent
+
+  const handleOpenFolder = (folderPath) => {
+    if (!folderPath) return
+    fetch('/api/tasks/ensure-dir', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ dirPath: folderPath })
+    })
+      .then((r) => r.json())
+      .then((res) => {
+        const target = res?.data || folderPath
+        if (window.api?.executeNativeTool) {
+          window.api.executeNativeTool('open-folder', { path: target }).catch(() => {
+            window.api.executeNativeTool('open', target).catch(() => {})
+          })
+        } else if (window.api?.openPath) {
+          window.api.openPath(target)
+        }
+      })
+      .catch(() => {
+        if (window.api?.executeNativeTool) {
+          window.api.executeNativeTool('open-folder', { path: folderPath }).catch(() => {
+            window.api.executeNativeTool('open', folderPath).catch(() => {})
+          })
+        } else if (window.api?.openPath) {
+          window.api.openPath(folderPath)
+        }
+      })
+  }
+
+  const renderToolItem = (t, idx) => {
+    const isToolRunning = t.status === 'running'
+    const isPendingApproval = Boolean(
+      activeApproval &&
+      activeApproval.status === 'pending' &&
+      isToolRunning &&
+      (activeApproval.tool === t.tool || !t.tool)
+    )
+    const hasQuery = t.query !== undefined && t.query !== null && t.query !== ''
+    const queryString = typeof t.query === 'string' ? t.query : JSON.stringify(t.query, null, 2)
+    const textResult = String(t.fullResult || t.resultSummary || t.result || '')
+    const hasResult = Boolean(textResult.trim())
+    const isStoppedTool = t.status === 'stopped' || t.status === 'cancelled'
+    const hasError =
+      !isStoppedTool &&
+      (t.status === 'failed' ||
+        t.status === 'error' ||
+        textResult.startsWith('[ERROR]') ||
+        textResult.includes(' crash:') ||
+        textResult.toLowerCase().includes(' gagal:'))
+    const isSuccessful =
+      !isStoppedTool &&
+      !hasError &&
+      (t.status === 'done' || t.status === 'success' || t.status !== 'error')
+
+    const StatusIcon = isStoppedTool ? Ban : isSuccessful ? Check : XCircle
+    const statusClass = isStoppedTool
+      ? 'text-warning'
+      : isSuccessful
+        ? 'text-success'
+        : 'text-error'
+
+    let parsedArgs = null
+    if (hasQuery) {
+      try {
+        parsedArgs =
+          typeof t.query === 'object' && t.query !== null ? t.query : JSON.parse(queryString)
+      } catch (_) {}
+    }
+
+    const toolLabel = t.tool || t.task || 'tool'
+    const displayReason =
+      t.reason ||
+      parsedArgs?.reason ||
+      parsedArgs?.description ||
+      parsedArgs?.task ||
+      parsedArgs?.title ||
+      null
+
+    let shortSummary = ''
+    if (parsedArgs && typeof parsedArgs === 'object') {
+      shortSummary =
+        parsedArgs.command ||
+        parsedArgs.path ||
+        parsedArgs.file ||
+        parsedArgs.filePath ||
+        parsedArgs.url ||
+        parsedArgs.query ||
+        parsedArgs.prompt ||
+        parsedArgs.message ||
+        parsedArgs.skill_name ||
+        parsedArgs.text ||
+        (parsedArgs.script ? parsedArgs.script.trim().replace(/\s+/g, ' ').slice(0, 80) : '') ||
+        ''
+    }
+    if (!shortSummary && hasQuery) {
+      shortSummary = queryString
+    }
+
+    if (!hasQuery && !hasResult) {
+      return (
+        <div key={idx} className="flex flex-col py-0.5">
+          <div className="flex items-center gap-2 text-xs font-mono text-white/60">
+            {isPendingApproval ? (
+              <Loader2 className="w-3.5 h-3.5 animate-spin text-warning shrink-0" />
+            ) : isToolRunning ? (
+              <Loader2 className="w-3.5 h-3.5 animate-spin text-primary/80 shrink-0" />
+            ) : isStoppedTool ? (
+              <Ban className="w-3.5 h-3.5 text-warning shrink-0" />
+            ) : hasError ? (
+              <XCircle className="w-3.5 h-3.5 text-error shrink-0" />
+            ) : (
+              <Check className="w-3.5 h-3.5 text-success/80 shrink-0" />
+            )}
+            <span className="font-semibold text-white/90">{displayReason || toolLabel}</span>
+            {isPendingApproval ? (
+              <span className="text-[10px] text-warning font-normal animate-pulse">
+                (menunggu persetujuan...)
+              </span>
+            ) : isStoppedTool ? (
+              <span className="text-[10px] text-warning/80 font-normal">(dihentikan)</span>
+            ) : null}
+          </div>
+          {isPendingApproval && (
+            <div className="pl-3 pr-1">
+              <ApprovalBubble
+                approvalId={activeApproval.id}
+                tool={activeApproval.tool}
+                query={activeApproval.query}
+                message={activeApproval.message}
+                status={activeApproval.status}
+              />
+            </div>
+          )}
+        </div>
+      )
+    }
+
+    return (
+      <div key={idx} className="flex flex-col py-0.5">
+        <details className="group/toolitem outline-none text-xs font-mono" open={isToolRunning}>
+          <summary className="list-none flex items-center gap-2 cursor-pointer text-white/60 hover:text-white select-none py-0.5 transition-colors">
+            {isPendingApproval ? (
+              <Loader2 className="w-3.5 h-3.5 animate-spin text-warning shrink-0" />
+            ) : isToolRunning ? (
+              <Loader2 className="w-3.5 h-3.5 animate-spin text-primary/80 shrink-0" />
+            ) : isStoppedTool ? (
+              <Ban className="w-3.5 h-3.5 text-warning shrink-0" />
+            ) : hasError ? (
+              <XCircle className="w-3.5 h-3.5 text-error shrink-0" />
+            ) : (
+              <Check className="w-3.5 h-3.5 text-success/80 shrink-0" />
+            )}
+            <span className="font-semibold text-white/90">{displayReason || toolLabel}</span>
+            {isPendingApproval ? (
+              <span className="text-[10px] text-warning font-normal animate-pulse">
+                (menunggu persetujuan...)
+              </span>
+            ) : isStoppedTool ? (
+              <span className="text-[10px] text-warning/80 font-normal">(dihentikan)</span>
+            ) : null}
+            {!displayReason && shortSummary && (
+              <span className="text-white/40 truncate max-w-md">
+                {String(shortSummary).slice(0, 80)}
+              </span>
+            )}
+            <ChevronRight className="w-3 h-3 text-white/40 transition-transform duration-150 group-open/toolitem:rotate-90 ml-auto shrink-0" />
+          </summary>
+          <div className="mt-1 pl-3 my-1.5 text-[11px] font-mono border-l-2 border-white/20 text-white/80 whitespace-pre-wrap break-all max-h-56 overflow-y-auto custom-scrollbar bg-base-300/40 p-2.5 rounded-lg space-y-1.5 select-text">
+            {t.tool && (
+              <div>
+                <div className="text-primary/70 font-semibold mb-0.5">Tool:</div>
+                <div className="text-white/90 font-mono text-[11px]">{t.tool}</div>
+              </div>
+            )}
+            {displayReason && (
+              <div>
+                <div className="text-info/80 font-semibold mb-0.5">Tujuan:</div>
+                <div className="text-white/90 font-sans">{displayReason}</div>
+              </div>
+            )}
+            {hasQuery && (
+              <div>
+                <div className="text-primary/70 font-semibold mb-0.5">Input:</div>
+                <div className="text-white/90">{queryString}</div>
+              </div>
+            )}
+            {hasResult && (
+              <div>
+                <div className="text-success/70 font-semibold mb-0.5">Output:</div>
+                <div className="text-white/80">{textResult}</div>
+              </div>
+            )}
+          </div>
+        </details>
+        {isPendingApproval && (
+          <div className="pl-3 pr-1 my-1">
+            <ApprovalBubble
+              approvalId={activeApproval.id}
+              tool={activeApproval.tool}
+              query={activeApproval.query}
+              message={activeApproval.message}
+              status={activeApproval.status}
+            />
+          </div>
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col gap-2 w-full text-xs text-white/90 my-1 py-1">
+      {/* ── 1. HEADER ALUR KERJA MINIMALIS ── */}
+      <div className="flex items-center justify-between gap-2 pb-1.5 border-b border-white/10 text-xs select-none">
+        <div className="flex items-center gap-2 min-w-0">
+          <span className="font-semibold text-primary">Workflow :</span>
+          <span className="text-white/90 font-medium truncate">{taskTitle || 'Task Workflow'}</span>
+          <span className="text-white/40 text-[11px] font-mono shrink-0">
+            ({completedCount}/{totalSteps})
+          </span>
+        </div>
+
+        <div className="flex items-center gap-2 shrink-0">
+          <span
+            className={`text-[10px] font-mono px-1.5 py-0.5 rounded ${
+              isAllDone
+                ? 'text-primary bg-primary/10'
+                : isStopped
+                  ? 'text-amber-400 bg-amber-400/10'
+                  : isFailed
+                    ? 'text-rose-400 bg-rose-400/10'
+                    : 'text-primary bg-primary/10'
+            }`}
+          >
+            {isAllDone ? 'Selesai' : isStopped ? 'Dihentikan' : isFailed ? 'Gagal' : 'Berjalan'}
+          </span>
+        </div>
+      </div>
+
+      {/* ── 2. DAFTAR CHECKBOX STEPS BIASA (FLAT MINIMALIS) ── */}
+      <div className="flex flex-col gap-1 py-0.5">
+        {plan.map((step, idx) => {
+          const hasLaterDone = plan.slice(idx + 1).some((later) => later.status === 'completed')
+          const isStepDone = step.status === 'completed' || hasLaterDone
+          const isStepRunning =
+            !isStepDone && isRunning && (step.status === 'running' || idx === resolvedCurrentStep)
+
+          let title = typeof step === 'string' ? step : step.title || step.task || ''
+          if (!title || /^((langkah|tahap|step)\s*\d+[:.-]?\s*)$/i.test(title.trim())) {
+            title = step.objective || step.deliverable || `Tahap ${idx + 1}`
+          }
+
+          const artifactPath = typeof step === 'object' ? step.artifactPath : null
+
+          return (
+            <div
+              key={step.id || `step-${idx}`}
+              className="flex items-center justify-between gap-2.5 py-1 select-none"
+            >
+              <div className="flex items-center gap-2.5 min-w-0 flex-1">
+                {/* Checkbox Icon / Loading Spinner */}
+                {isStepDone ? (
+                  <div className="w-3.5 h-3.5 rounded bg-primary/20 border border-primary flex items-center justify-center text-primary shrink-0">
+                    <Check className="w-2.5 h-2.5 stroke-[3]" />
+                  </div>
+                ) : isStepRunning ? (
+                  <div className="w-3.5 h-3.5 rounded flex items-center justify-center text-primary shrink-0">
+                    <Loader2 className="w-3.5 h-3.5 animate-spin" />
+                  </div>
+                ) : (
+                  <div className="w-3.5 h-3.5 rounded border border-white/25 shrink-0" />
+                )}
+
+                {/* Step Title & Deliverable Info */}
+                <div className="flex items-baseline gap-1.5 min-w-0 truncate">
+                  <span
+                    className={`text-xs truncate ${
+                      isStepDone
+                        ? 'text-white/90'
+                        : isStepRunning
+                          ? 'text-primary font-medium'
+                          : 'text-white/70'
+                    }`}
+                  >
+                    {idx + 1}. {title}
+                  </span>
+                  {isStepRunning && (
+                    <span className="text-[10px] font-mono text-primary/80 animate-pulse shrink-0">
+                      (sedang berjalan...)
+                    </span>
+                  )}
+                  {step.deliverable && !isStepRunning && (
+                    <span className="text-[10px] font-mono text-white/30 truncate hidden sm:inline">
+                      ({step.deliverable})
+                    </span>
+                  )}
+                </div>
+              </div>
+
+              {/* Action Button: Lihat Hasil */}
+              {isStepDone && artifactPath && (
+                <button
+                  type="button"
+                  onClick={() => setSelectedArtifactPath(artifactPath)}
+                  className="btn btn-ghost btn-xs text-primary hover:underline gap-1 font-mono text-[10.5px] h-5 min-h-0 px-1.5 shrink-0"
+                  title="Buka pratinjau artefak dokumen"
+                >
+                  <FileText className="w-3 h-3 text-primary" />
+                  <span>Lihat Hasil</span>
+                </button>
+              )}
+            </div>
+          )
+        })}
+      </div>
+
+      {/* ── 3. PROSES SAMA PERSIS SEPERTI BUBBLE BIASA ── */}
+      {((toolsToDisplay && toolsToDisplay.length > 0) || displayReasoning) && (
+        <div className="my-2 space-y-1.5 select-none pt-1.5 border-t border-white/10">
+          {/* Thinking / Reasoning Accordion */}
+          {displayReasoning && (
+            <details className="group/thought outline-none" open={isRunning}>
+              <summary className="list-none flex items-center gap-2 cursor-pointer text-xs font-mono text-white/60 hover:text-white select-none py-0.5 transition-colors">
+                <Brain className="w-3.5 h-3.5 text-primary/80 shrink-0" />
+                <span className="font-medium text-white/80">Proses Pemikiran AI</span>
+                <ChevronRight className="w-3 h-3 text-white/40 transition-transform duration-150 group-open/thought:rotate-90 ml-auto shrink-0" />
+              </summary>
+              <div className="mt-1 pl-3 my-2 text-[11px] font-mono border-l-2 border-primary/30 text-white/80 leading-relaxed max-h-64 overflow-y-auto custom-scrollbar bg-base-300/30 p-2.5 rounded-lg select-text [&_p]:my-1 [&_p]:leading-relaxed [&_h1]:text-xs [&_h1]:font-bold [&_h1]:my-1.5 [&_h2]:text-[11px] [&_h2]:font-bold [&_h2]:my-1 [&_h3]:text-[11px] [&_h3]:font-bold [&_h3]:my-1 [&_ul]:my-1 [&_ul]:ml-3.5 [&_ol]:my-1 [&_ol]:ml-3.5 [&_li]:my-0.5 [&_code]:text-[10px] [&_pre]:my-1.5 [&_hr]:my-2 [&_hr]:border-white/10">
+                <Markdown remarkPlugins={[remarkGfm]}>
+                  {typeof displayReasoning === 'string'
+                    ? displayReasoning
+                    : JSON.stringify(displayReasoning, null, 2)}
+                </Markdown>
+              </div>
+            </details>
+          )}
+
+          {/* Executed Tools Folded Process Accordion */}
+          {toolsToDisplay && toolsToDisplay.length > 0 && (
+            <details
+              className="group/process outline-none"
+              open={isRunning || isProcessOpen}
+              onToggle={(e) => setIsProcessOpen(e.currentTarget.open)}
+            >
+              <summary className="list-none flex items-center gap-2 cursor-pointer text-xs font-mono text-white/70 hover:text-white select-none py-1 transition-colors">
+                <Terminal className="w-3.5 h-3.5 text-primary/80 shrink-0" />
+                <span className="font-semibold text-white/90">Proses</span>
+                <span className="text-[10px] text-white/40 font-normal">
+                  ({toolsToDisplay.length} langkah)
+                </span>
+                <ChevronRight className="w-3.5 h-3.5 text-white/40 transition-transform duration-150 group-open/process:rotate-90 ml-auto shrink-0" />
+              </summary>
+              <div className="mt-1 pl-2.5 space-y-1 border-l-2 border-white/15 ml-1.5 my-1">
+                {toolsToDisplay.map((t, idx) => renderToolItem(t, idx))}
+              </div>
+            </details>
+          )}
+        </div>
+      )}
+
+      {/* Indikator Menunggu ketika masih berjalan tanpa tool/reasoning */}
+      {isRunning && (!toolsToDisplay || toolsToDisplay.length === 0) && !displayReasoning && (
+        <div className="flex items-center gap-2 text-xs text-primary font-medium py-1">
+          <Loader2 className="w-3.5 h-3.5 animate-spin" />
+          <span className="text-white/80 animate-pulse">
+            Mark sedang menganalisis & mengeksekusi...
+          </span>
+        </div>
+      )}
+
+      {/* ── 4. FOOTER FOLDER ARTEFAK ── */}
+      {artifactRoot && (
+        <div className="flex items-center justify-between pt-1 border-t border-white/5 text-[10px] font-mono text-white/40 select-none">
+          <span className="truncate max-w-[200px]">
+            Folder: {artifactRoot.split(/[\\/]/).pop()}
+          </span>
+          <button
+            type="button"
+            onClick={() => handleOpenFolder(artifactRoot)}
+            className="text-[10px] text-primary hover:underline flex items-center gap-1"
+          >
+            <FolderOpen className="w-3 h-3" />
+            <span>Buka Folder</span>
+          </button>
+        </div>
+      )}
+
+      {/* ── 5. MODAL PRATINJAU ARTEFAK DOKUMEN VIA FILEDIFFMODAL ── */}
+      {selectedArtifactPath && (
+        <FileDiffModal
+          isOpen={Boolean(selectedArtifactPath)}
+          onClose={() => setSelectedArtifactPath(null)}
+          tool="read-file"
+          query={{ path: selectedArtifactPath }}
+        />
+      )}
+    </div>
+  )
+}
+
+export const PlanningBubble = DurableTaskBubble
+export default DurableTaskBubble