Agent loop state machine refactor, unified LLM interface, and UI improvements

- Rewrite agent loop as Planning→Executing(N)→Completed state machine with
  per-step context isolation to prevent token explosion
- Split tools and prompts by phase (planning vs execution)
- Add advance_step/save_memo tools for step transitions and cross-step memory
- Unify LLM interface: remove duplicate types, single chat_with_tools path
- Add UTF-8 safe truncation (truncate_str) to prevent panics on Chinese text
- Extract CreateForm component, add auto-scroll to execution log
- Add report generation with app access URL, non-blocking title generation
- Add timer system, file serving, app proxy, exec module
- Update Dockerfile with uv, deployment config

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

web/src/components/PlanSection.vue

@@ -1,10 +1,21 @@
 <script setup lang="ts">
+import { ref } from 'vue'
 import type { PlanStep } from '../types'
 
 defineProps<{
   steps: PlanStep[]
 }>()
 
+const expandedSteps = ref<Set<string>>(new Set())
+
+function toggleStep(id: string) {
+  if (expandedSteps.value.has(id)) {
+    expandedSteps.value.delete(id)
+  } else {
+    expandedSteps.value.add(id)
+  }
+}
+
 function statusIcon(status: string) {
   switch (status) {
     case 'done': return '✓'
@@ -18,7 +29,7 @@ function statusIcon(status: string) {
 <template>
   <div class="plan-section">
     <div class="section-header">
-      <h2>Plan</h2>
+      <h2>计划</h2>
     </div>
     <div class="steps-list">
       <div
@@ -27,12 +38,18 @@ function statusIcon(status: string) {
         class="step-item"
         :class="step.status"
       >
-        <span class="step-icon">{{ statusIcon(step.status) }}</span>
-        <span class="step-order">{{ step.step_order }}.</span>
-        <span class="step-desc">{{ step.description }}</span>
+        <div class="step-header" @click="step.command ? toggleStep(step.id) : undefined">
+          <span class="step-icon">{{ statusIcon(step.status) }}</span>
+          <span class="step-order">{{ step.step_order }}.</span>
+          <span class="step-title">{{ step.description }}</span>
+          <span v-if="step.command" class="step-toggle">{{ expandedSteps.has(step.id) ? '▾' : '▸' }}</span>
+        </div>
+        <div v-if="step.command && expandedSteps.has(step.id)" class="step-detail">
+          {{ step.command }}
+        </div>
       </div>
       <div v-if="!steps.length" class="empty-state">
-        提交需求后，AI 将在这里生成计划
+        AI 将在这里展示执行计划
       </div>
     </div>
   </div>
@@ -68,14 +85,9 @@ function statusIcon(status: string) {
 }
 
 .step-item {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  padding: 8px 10px;
   border-radius: 6px;
-  font-size: 13px;
-  line-height: 1.5;
   background: var(--bg-secondary);
+  overflow: hidden;
 }
 
 .step-item.done { border-left: 3px solid var(--success); }
@@ -83,6 +95,24 @@ function statusIcon(status: string) {
 .step-item.failed { border-left: 3px solid var(--error); }
 .step-item.pending { border-left: 3px solid var(--pending); opacity: 0.7; }
 
+.step-header {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 8px 10px;
+  font-size: 13px;
+  line-height: 1.5;
+  cursor: default;
+}
+
+.step-header:has(.step-toggle) {
+  cursor: pointer;
+}
+
+.step-header:has(.step-toggle):hover {
+  background: var(--bg-tertiary);
+}
+
 .step-icon {
   font-size: 14px;
   flex-shrink: 0;
@@ -99,8 +129,24 @@ function statusIcon(status: string) {
   flex-shrink: 0;
 }
 
-.step-desc {
+.step-title {
   color: var(--text-primary);
+  font-weight: 500;
+  flex: 1;
+}
+
+.step-toggle {
+  color: var(--text-secondary);
+  font-size: 11px;
+  flex-shrink: 0;
+}
+
+.step-detail {
+  padding: 6px 10px 10px 44px;
+  font-size: 12px;
+  line-height: 1.6;
+  color: var(--text-secondary);
+  border-top: 1px solid var(--border);
 }
 
 .empty-state {