Skip to content

Commit eb4264c

Browse files
author
Song Mingxu
committed
Refine homepage taxonomy and landscape
1 parent 04902c6 commit eb4264c

14 files changed

Lines changed: 956 additions & 404 deletions

‎src/components/home/HomeCommunitySection.astro‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
---
2+
import { LinkButton } from "@astrojs/starlight/components";
3+
4+
interface CommunityThread {
5+
title: string;
6+
href: string;
7+
meta: string;
8+
summary: string;
9+
}
10+
11+
interface CommunityInsight {
12+
title: string;
13+
summary: string;
14+
}
15+
16+
interface Props {
17+
intro: string;
18+
threads: CommunityThread[];
19+
insights: CommunityInsight[];
20+
}
21+
22+
const { intro, threads, insights } = Astro.props;
23+
---
24+
25+
<section id="community" class="overview-section">
26+
<div class="overview-grid overview-grid--community">
27+
<div class="overview-prose">
28+
<p class="section-label">社区讨论</p>
29+
<h2>社区材料的重要性，在于它暴露了官方文章会压缩掉的真实成本。</h2>
30+
<p>{intro}</p>
31+
<div class="thread-list not-content">
32+
{threads.map((item) => (
33+
<article class="thread-card">
34+
<p class="thread-meta">{item.meta}</p>
35+
<h3><a href={item.href}>{item.title}</a></h3>
36+
<p>{item.summary}</p>
37+
</article>
38+
))}
39+
</div>
40+
<LinkButton href="./community/" variant="secondary" icon="right-arrow">
41+
查看社区讨论与实践观察
42+
</LinkButton>
43+
</div>
44+
45+
<div class="community-insights not-content">
46+
<h3>工程观察</h3>
47+
{insights.map((item) => (
48+
<div class="insight-item">
49+
<h4>{item.title}</h4>
50+
<p>{item.summary}</p>
51+
</div>
52+
))}
53+
</div>
54+
</div>
55+
</section>

‎src/components/home/HomeDefinitionSection.astro‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
---
2+
import { LinkButton } from "@astrojs/starlight/components";
3+
---
4+
5+
<section id="definition" class="overview-section overview-section--definition">
6+
<div class="overview-grid">
7+
<div class="overview-prose">
8+
<p class="section-label">定义优先</p>
9+
<h2>Harness engineering 研究的，是 agent 外层系统本身。</h2>
10+
<p class="lead">
11+
<strong>Harness engineering</strong> 指的是那层被工程化出来的外壳系统：
12+
它负责约束、编排、验证、恢复，并让 agent 足够可读、可控，能够真正跑进软件工程工作流中。
13+
模型当然重要，但真正把模型能力变成 durable engineering surface 的，是 harness。
14+
</p>
15+
<p>
16+
这意味着真正值得研究的中心对象，既不是模型本身，也不是 prompt 本身，而是模型外面的整套系统：
17+
任务进入方式、工具表面、执行边界、记忆层、审批、评审纪律与交接结构。
18+
</p>
19+
</div>
20+
21+
<aside id="boundary" class="boundary-panel not-content">
22+
<p class="section-label">它不是什么</p>
23+
<ul>
24+
<li>不只是单次会话里的 prompt engineering。</li>
25+
<li>不只是某个 coding agent 产品或 IDE 插件。</li>
26+
<li>不只是一个提供抽象 orchestration primitives 的 agent framework。</li>
27+
<li>不只是画出了流程，但没有 durable execution surface 的 workflow 图。</li>
28+
</ul>
29+
<LinkButton href="./definition/" variant="secondary" icon="right-arrow">
30+
查看完整定义
31+
</LinkButton>
32+
</aside>
33+
</div>
34+
</section>

‎src/components/home/HomeLandscapeSection.astro‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
---
2+
import { LinkButton } from "@astrojs/starlight/components";
3+
4+
interface LandscapeRow {
5+
name: string;
6+
href: string;
7+
intro: string;
8+
category: string;
9+
runtimeForm: string;
10+
starsBadge?: string;
11+
}
12+
13+
interface Props {
14+
rows: LandscapeRow[];
15+
}
16+
17+
const { rows } = Astro.props;
18+
---
19+
20+
<section id="landscape" class="overview-section">
21+
<div class="overview-section-head">
22+
<div class="overview-prose">
23+
<p class="section-label">当前生态</p>
24+
<h2>这里列的是当前较为流行的 harness 及类 harness 套件。</h2>
25+
<p>
26+
下面这张表只是一道切面。它的目的不是替你排名，而是帮助读者学会怎么读生态：按 host layer、
27+
harness layer、methodology layer 与 orchestration layer 去看。
28+
</p>
29+
<p>
30+
这次额外加了一列“运行形态”，用来区分一个系统究竟是直接作为 agent 宿主存在，还是主要寄生在某个
31+
coding agent 里运行，抑或自己带独立调度外壳。
32+
</p>
33+
</div>
34+
<LinkButton href="./landscape/" variant="minimal" icon="right-arrow">
35+
查看完整生态
36+
</LinkButton>
37+
</div>
38+
39+
<div class="table-wrap not-content">
40+
<table class="landscape-table">
41+
<thead>
42+
<tr>
43+
<th>套件</th>
44+
<th>简介</th>
45+
<th>分类</th>
46+
<th>运行形态</th>
47+
</tr>
48+
</thead>
49+
<tbody>
50+
{rows.map((row) => (
51+
<tr>
52+
<td>
53+
<div class="suite-cell">
54+
<a href={row.href}>{row.name}</a>
55+
{row.starsBadge && (
56+
<img
57+
src={row.starsBadge}
58+
alt={`${row.name} GitHub stars`}
59+
class="stars-badge"
60+
loading="lazy"
61+
/>
62+
)}
63+
</div>
64+
</td>
65+
<td>{row.intro}</td>
66+
<td>{row.category}</td>
67+
<td>{row.runtimeForm}</td>
68+
</tr>
69+
))}
70+
</tbody>
71+
</table>
72+
</div>
73+
</section>

‎src/components/home/HomeNav.astro‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
---
2+
interface NavItem {
3+
href: string;
4+
label: string;
5+
}
6+
7+
interface Props {
8+
items: NavItem[];
9+
}
10+
11+
const { items } = Astro.props;
12+
---
13+
14+
<div class="overview-nav-shell not-content">
15+
<nav class="overview-nav" aria-label="Homepage sections">
16+
{items.map((item) => (
17+
<a href={item.href}>{item.label}</a>
18+
))}
19+
</nav>
20+
</div>

‎src/components/home/HomeNextSection.astro‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
---
2+
import { CardGrid, LinkCard } from "@astrojs/starlight/components";
3+
4+
interface NextLink {
5+
title: string;
6+
description: string;
7+
href: string;
8+
}
9+
10+
interface Props {
11+
items: NextLink[];
12+
}
13+
14+
const { items } = Astro.props;
15+
---
16+
17+
<section id="next" class="overview-section overview-section--next">
18+
<div class="overview-prose">
19+
<p class="section-label">下一步</p>
20+
<h2>如果这个词现在已经清楚一些了，下一步就应该按问题去读，而不是按 hype 去追。</h2>
21+
</div>
22+
23+
<CardGrid>
24+
{items.map((item) => (
25+
<LinkCard title={item.title} description={item.description} href={item.href} />
26+
))}
27+
</CardGrid>
28+
</section>

‎src/components/home/HomeTaxonomySection.astro‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
---
2+
import { LinkButton } from "@astrojs/starlight/components";
3+
4+
interface TaxonomyItem {
5+
title: string;
6+
description: string;
7+
note: string;
8+
href: string;
9+
}
10+
11+
interface Props {
12+
items: TaxonomyItem[];
13+
}
14+
15+
const { items } = Astro.props;
16+
---
17+
18+
<section id="taxonomy" class="overview-section">
19+
<div class="overview-section-head">
20+
<div class="overview-prose">
21+
<p class="section-label">分类</p>
22+
<h2>如果不先分清类型，后面的比较很容易全都混在一起。</h2>
23+
<p>
24+
这一页里的套件看起来都和 agent 有关，但它们处理的问题并不在同一层。
25+
有些是在提供原生工作面，有些是在宿主之上补控制层，有些则更偏方法论或长时编排。
26+
先把它们放回各自的位置，后面的分析、对比和选择才会变得清楚。
27+
</p>
28+
<p>
29+
这组分类的目的，不是替每个项目发明新的官方身份，而是帮助读者先判断自己正在比较哪一层：
30+
是直接执行工程任务的 agent 宿主，是覆盖在其上的控制层，还是方法论与编排层。
31+
只有先分清层次，后面的比较才不会把不同问题混成同一种产品选择。
32+
</p>
33+
</div>
34+
<LinkButton href="./distinction/" variant="minimal" icon="right-arrow">
35+
查看完整分类
36+
</LinkButton>
37+
</div>
38+
39+
<div class="taxonomy-grid not-content">
40+
{items.map((item) => (
41+
<article class="taxonomy-card">
42+
<h3>{item.title}</h3>
43+
<p>{item.description}</p>
44+
<p class="taxonomy-note">{item.note}</p>
45+
<a href={item.href}>查看完整分类</a>
46+
</article>
47+
))}
48+
</div>
49+
</section>

‎src/components/home/HomeTimelineSection.astro‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
---
2+
import { LinkButton } from "@astrojs/starlight/components";
3+
4+
interface TimelineItem {
5+
date: string;
6+
title: string;
7+
source: string;
8+
summary: string;
9+
href: string;
10+
}
11+
12+
interface Props {
13+
items: TimelineItem[];
14+
}
15+
16+
const { items } = Astro.props;
17+
---
18+
19+
<section id="timeline" class="overview-section">
20+
<div class="overview-section-head">
21+
<div class="overview-prose">
22+
<p class="section-label">关键文章</p>
23+
<h2>只有看到它是怎么形成的，这个词才会真正变清楚。</h2>
24+
<p>
25+
这不是一组随便拼起来的文章。时间线展示的是讨论如何从一般 agent design，转向工具表面，再到
26+
long-running harness，最后收敛成更清晰的工程抽象。
27+
</p>
28+
</div>
29+
<LinkButton href="./timeline/" variant="minimal" icon="right-arrow">
30+
查看完整时间线
31+
</LinkButton>
32+
</div>
33+
34+
<div class="timeline-list not-content">
35+
{items.map((item) => (
36+
<article class="timeline-item">
37+
<div class="timeline-date">{item.date}</div>
38+
<div class="timeline-copy">
39+
<h3>{item.title}</h3>
40+
<p class="timeline-source">{item.source}</p>
41+
<p>{item.summary}</p>
42+
<a href={item.href}>看详细时间线</a>
43+
</div>
44+
</article>
45+
))}
46+
</div>
47+
</section>

‎src/components/home/HomeTopicsSection.astro‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
---
2+
import { CardGrid, LinkCard } from "@astrojs/starlight/components";
3+
4+
interface TopicItem {
5+
title: string;
6+
description: string;
7+
href: string;
8+
}
9+
10+
interface Props {
11+
items: TopicItem[];
12+
}
13+
14+
const { items } = Astro.props;
15+
---
16+
17+
<section id="topics" class="overview-section">
18+
<div class="overview-section-head">
19+
<div class="overview-prose">
20+
<p class="section-label">研究专题</p>
21+
<h2>要真正理解这个课题，还需要进入可运行专题。</h2>
22+
<p>
23+
综述页提供的是定义、边界、分类与比较框架；再往下，就应该进入可运行材料，观察这些机制在具体系统里如何落地。
24+
</p>
25+
</div>
26+
</div>
27+
28+
<CardGrid>
29+
{items.map((topic) => (
30+
<LinkCard title={topic.title} description={topic.description} href={topic.href} />
31+
))}
32+
</CardGrid>
33+
</section>

‎src/components/home/HomeWhySection.astro‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
---
2+
---
3+
4+
<section id="why" class="overview-section">
5+
<div class="overview-prose">
6+
<p class="section-label">为什么值得单独研究</p>
7+
<h2>当模型能力足够强，瓶颈就开始向外移动。</h2>
8+
<p>
9+
Harness engineering 值得被单独当成一个研究类别，是因为很多实际失败已经不再只是模型不够强。
10+
它们更多来自边界太弱、验证不足、续跑不可靠、任务状态不可读，以及人类 steering 与
11+
agent execution 之间责任分界不清。
12+
</p>
13+
</div>
14+
15+
<div class="reason-grid not-content">
16+
<div class="reason-card">
17+
<h3>约束</h3>
18+
<p>
19+
真实工作需要的是能跨会话延续的 permissions、guardrails、checks 与 architecture boundaries。
20+
</p>
21+
</div>
22+
<div class="reason-card">
23+
<h3>恢复</h3>
24+
<p>
25+
长任务成败更多取决于干净交接、可恢复续跑与进度可读性，而不只是局部代码生成质量。
26+
</p>
27+
</div>
28+
<div class="reason-card">
29+
<h3>协调</h3>
30+
<p>
31+
控制面经常比代码面更重。规划、委派、评审与综合，本身都会变成系统的一部分。
32+
</p>
33+
</div>
34+
</div>
35+
</section>

0 commit comments

Comments
 (0)