opencode/
├── .github/           # GitHub配置和工作流
├── .opencode/         # 内置工具和主题配置
├── github/            # GitHub Action集成
├── infra/             # 基础设施配置
├── nix/               # Nix构建配置
├── packages/          # 核心包目录
│   ├── app/           # Web应用前端
│   ├── console/       # 控制台应用（前端+后端）
│   ├── desktop/       # 桌面应用
│   ├── docs/          # 文档
│   └── opencode/      # 主包（核心功能+CLI）
└── package.json       # 根包配置

┌─────────────────┐     ┌─────────────────┐     ┌─────────────────┐
│   UI组件层      │     │   上下文层      │     │   SDK层         │
│                 │     │                 │     │                 │
│ ┌─────────────┐ │     │ ┌─────────────┐ │     │ ┌─────────────┐ │
│ │   会话界面   │ │     │ │   Sync上下文 │ │     │ │  OpenCode   │ │
│ └─────────────┘ │     │ └─────────────┘ │     │ │    SDK      │ │
│ ┌─────────────┐ │     │ ┌─────────────┐ │     │ └─────────────┘ │
│ │  消息展示   │ │     │ │  会话管理   │ │     │                 │
│ └─────────────┘ │     │ └─────────────┘ │     └─────────────────┘
│ ┌─────────────┐ │     │ ┌─────────────┐ │
│ │   输入框    │ │     │ │  状态存储   │ │
│ └─────────────┘ │     │ └─────────────┘ │
└─────────────────┘     └─────────────────┘

// 核心存储结构
const store = createStore<{
  message: Record<string, Message[]>
  part: Record<string, Part[]>
}>({ message: {}, part: {} })

// 加载历史消息
async loadMessages(sessionID: string, limit: number) {
  // 调用SDK获取历史消息
  const result = await sdk.client.session.messages({
    sessionID,
    limit,
  })
  // 更新本地存储
  batch(() => {
    setStore("message", sessionID, reconcile(next, { key: "id" }))
    // 更新消息部分
    for (const message of items) {
      setStore("part", message.info.id, reconcile(...))
    }
  })
}

// 存储路径结构
const dir = path.join(Global.Path.data, "storage") // ~/.local/share/opencode/storage

// 存储操作
await Storage.write(["session", project.id, id], result)
await Storage.read(["message", sessionID, messageID])

// 接口定义
.get("/:sessionID/message", describeRoute({
  summary: "Get session messages",
  description: "Retrieve all messages in a session, including user prompts and AI responses.",
  operationId: "session.messages",
  responses: {
    200: {
      description: "List of messages",
      content: {
        "application/json": {
          schema: resolver(MessageV2.WithParts.array()),
        },
      },
    },
    ...errors(400, 404),
  },
}), async (c) => {
  const query = c.req.valid("query")
  const messages = await Session.messages({
    sessionID: c.req.valid("param").sessionID,
    limit: query.limit,
  })
  return c.json(messages)
})

// Typewriter组件核心实现
const Typewriter = <T extends ValidComponent = "p">(props: { text?: string; class?: string; as?: T }) => {
  const [store, setStore] = createStore({
    typing: false,
    displayed: "",
    cursor: true,
  })

  createEffect(() => {
    const text = props.text
    if (!text) return

    // 打字机效果实现
    let i = 0
    const timeouts: ReturnType<typeof setTimeout>[] = []
    setStore("typing", true)
    setStore("displayed", "")
    setStore("cursor", true)

    const getTypingDelay = () => {
      // 随机延迟，模拟真实打字效果
      const random = Math.random()
      if (random < 0.05) return 150 + Math.random() * 100
      if (random < 0.15) return 80 + Math.random() * 60
      return 30 + Math.random() * 50
    }

    const type = () => {
      if (i < text.length) {
        setStore("displayed", text.slice(0, i + 1))
        i++
        timeouts.push(setTimeout(type, getTypingDelay()))
      } else {
        setStore("typing", false)
        timeouts.push(setTimeout(() => setStore("cursor", false), 2000))
      }
    }

    timeouts.push(setTimeout(type, 200))

    onCleanup(() => {
      for (const timeout of timeouts) clearTimeout(timeout)
    })
  })

  return (
    <Dynamic component={props.as || "p"} class={props.class}>
      {store.displayed}
      <Show when={store.cursor}>
        <span classList={{ "blinking-cursor": !store.typing }}>│</span>
      </Show>
    </Dynamic>
  )
}

// createAutoScroll钩子
const useAutoScroll = (ref: () => HTMLElement | undefined, enabled: Accessor<boolean>) => {
  let timeoutId: number

  createEffect(() => {
    const element = ref()
    if (!element || !enabled()) return

    const checkScroll = () => {
      const { scrollTop, scrollHeight, clientHeight } = element
      const isAtBottom = scrollHeight - scrollTop - clientHeight < 100

      if (isAtBottom) {
        timeoutId = window.setTimeout(() => {
          element.scrollTop = scrollHeight
        }, 10)
      }
    }

    const observer = new MutationObserver(checkScroll)
    observer.observe(element, { childList: true, subtree: true })

    checkScroll()

    onCleanup(() => {
      observer.disconnect()
      clearTimeout(timeoutId)
    })
  })
}

┌─────────────┐     ┌─────────────┐
│  终端TUI    │     │   Web应用   │
└──────┬──────┘     └──────┬──────┘
       │                   │
       └───────────┬───────┘
                   ▼
            ┌─────────────┐
            │  OpenCode   │
            │    服务器   │
            └──────┬──────┘
                   │
                   ▼
            ┌─────────────┐
            │  AI模型API  │
            └─────────────┘