Skip to content

Commit c47397f

Browse files
ostenbomostenbom
authored
Add MCP documentation (#11)
## Summary - add an Endform MCP server reference outline - add a shared run-filter reference outline - add interactive debugging and historical analysis guide outlines - cross-link the planned documentation pages ## Verification - `pnpm build`
1 parent 7ccf14c commit c47397f

13 files changed

Lines changed: 830 additions & 87 deletions

‎src/components/ParameterTable.astro‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<div class="parameter-table" role="region" aria-label="Tool parameters" tabindex="0">
2+
<slot />
3+
</div>
4+
5+
<style>
6+
.parameter-table {
7+
margin-block: 1.5rem;
8+
overflow-x: auto;
9+
border: 1px solid var(--sl-color-gray-5);
10+
border-radius: 0.5rem;
11+
}
12+
13+
.parameter-table:focus-visible {
14+
outline: 2px solid var(--sl-color-accent-high);
15+
outline-offset: 2px;
16+
}
17+
18+
.parameter-table :global(table) {
19+
display: table;
20+
width: 100%;
21+
min-width: 44rem;
22+
margin: 0;
23+
overflow: visible;
24+
border-spacing: 0;
25+
table-layout: fixed;
26+
}
27+
28+
.parameter-table :global(:is(th, td)) {
29+
padding: 0.75rem 1rem;
30+
vertical-align: top;
31+
}
32+
33+
.parameter-table :global(:is(th, td):first-child) {
34+
width: 10rem;
35+
padding-inline: 1rem;
36+
white-space: nowrap;
37+
}
38+
39+
.parameter-table :global(:is(th, td):nth-child(2)) {
40+
width: 15rem;
41+
}
42+
43+
.parameter-table :global(:is(th, td):last-child) {
44+
padding-inline: 1rem;
45+
}
46+
47+
.parameter-table :global(tbody tr:last-child td) {
48+
border-bottom: 0;
49+
}
50+
</style>

‎src/components/conversation/AssistantMessage.astro‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
---
2+
import { Sparkles } from "@lucide/astro";
3+
---
4+
5+
<div class="message assistant-message">
6+
<div class="message-heading">
7+
<Sparkles aria-hidden="true" size={17} />
8+
<span>AI response</span>
9+
</div>
10+
<div class="message-content">
11+
<slot />
12+
</div>
13+
</div>
14+
15+
<style>
16+
.message {
17+
box-sizing: border-box;
18+
min-width: 0;
19+
max-width: 95%;
20+
padding: 0.9rem 1rem;
21+
border: 1px solid var(--sl-color-gray-5);
22+
border-radius: 0.75rem 0.75rem 0.75rem 0.2rem;
23+
background: var(--sl-color-bg-nav);
24+
justify-self: start;
25+
}
26+
27+
.message-heading {
28+
display: flex;
29+
gap: 0.4rem;
30+
align-items: center;
31+
margin-bottom: 0.55rem;
32+
color: var(--sl-color-gray-3);
33+
font-size: var(--sl-text-xs);
34+
font-weight: 700;
35+
text-transform: uppercase;
36+
}
37+
38+
.message-content {
39+
font-size: var(--sl-text-sm);
40+
line-height: 1.65;
41+
}
42+
43+
.message-content :global(> :first-child) {
44+
margin-top: 0;
45+
}
46+
47+
.message-content :global(> :last-child) {
48+
margin-bottom: 0;
49+
}
50+
51+
.message-content :global(ul),
52+
.message-content :global(ol) {
53+
padding-inline-start: 1.25rem;
54+
}
55+
</style>

‎src/components/conversation/Conversation.astro‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
---
2+
import { ChevronDown } from "@lucide/astro";
3+
4+
interface Props {
5+
title: string;
6+
open?: boolean;
7+
}
8+
9+
const { title, open = false } = Astro.props;
10+
---
11+
12+
<div class="conversation-wrapper not-content">
13+
<details class="conversation" open={open}>
14+
<summary>
15+
<span class="summary-label">Example conversation</span>
16+
<span class="summary-title">{title}</span>
17+
<ChevronDown class="chevron" aria-hidden="true" size={20} />
18+
</summary>
19+
<div class="conversation-body">
20+
<slot />
21+
</div>
22+
</details>
23+
</div>
24+
25+
<style>
26+
.conversation-wrapper {
27+
margin-block: 1.5rem;
28+
}
29+
30+
.conversation {
31+
border: 1px solid var(--sl-color-gray-5);
32+
border-radius: 0.75rem;
33+
background: var(--sl-color-bg-nav);
34+
overflow: hidden;
35+
}
36+
37+
summary {
38+
display: grid;
39+
grid-template-columns: 1fr auto;
40+
gap: 0.15rem 1rem;
41+
align-items: center;
42+
padding: 1rem 1.125rem;
43+
cursor: pointer;
44+
list-style: none;
45+
}
46+
47+
summary::-webkit-details-marker {
48+
display: none;
49+
}
50+
51+
summary:hover {
52+
background: var(--sl-color-gray-7);
53+
}
54+
55+
summary:focus-visible {
56+
outline: 2px solid var(--sl-color-accent-high);
57+
outline-offset: -2px;
58+
}
59+
60+
.summary-label {
61+
color: var(--sl-color-gray-3);
62+
font-size: var(--sl-text-xs);
63+
font-weight: 600;
64+
letter-spacing: 0.04em;
65+
line-height: 1.3;
66+
text-transform: uppercase;
67+
}
68+
69+
.summary-title {
70+
grid-column: 1;
71+
font-size: var(--sl-text-lg);
72+
font-weight: 600;
73+
line-height: 1.4;
74+
}
75+
76+
.chevron {
77+
grid-column: 2;
78+
grid-row: 1 / span 2;
79+
color: var(--sl-color-gray-3);
80+
transition: transform 160ms ease;
81+
}
82+
83+
.conversation[open] .chevron {
84+
transform: rotate(180deg);
85+
}
86+
87+
.conversation-body {
88+
display: grid;
89+
gap: 1rem;
90+
padding: 1.125rem;
91+
border-top: 1px solid var(--sl-color-gray-5);
92+
background: var(--sl-color-bg);
93+
}
94+
95+
@media (min-width: 50rem) {
96+
summary {
97+
padding-inline: 1.25rem;
98+
}
99+
100+
.conversation-body {
101+
padding: 1.25rem;
102+
}
103+
}
104+
105+
@media (prefers-reduced-motion: reduce) {
106+
.chevron {
107+
transition: none;
108+
}
109+
}
110+
</style>

‎src/components/conversation/ToolCall.astro‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
---
2+
import { Wrench } from "@lucide/astro";
3+
4+
interface Props {
5+
name: string;
6+
summary: string;
7+
}
8+
9+
const { name, summary } = Astro.props;
10+
---
11+
12+
<div class="tool-call">
13+
<Wrench aria-hidden="true" size={15} />
14+
<span class="visually-hidden">Tool call:</span>
15+
<code>{name}</code>
16+
<span class="separator" aria-hidden="true">·</span>
17+
<span class="summary">{summary}</span>
18+
</div>
19+
20+
<style>
21+
.tool-call {
22+
display: flex;
23+
box-sizing: border-box;
24+
gap: 0.45rem;
25+
align-items: baseline;
26+
width: fit-content;
27+
max-width: 100%;
28+
margin-inline: 0.5rem;
29+
padding: 0.45rem 0.65rem;
30+
border: 1px solid var(--sl-color-gray-5);
31+
border-radius: 0.4rem;
32+
background: var(--sl-color-gray-7);
33+
color: var(--sl-color-gray-2);
34+
font-size: var(--sl-text-xs);
35+
line-height: 1.5;
36+
}
37+
38+
.tool-call svg {
39+
flex: none;
40+
position: relative;
41+
top: 0.15rem;
42+
color: var(--sl-color-gray-3);
43+
}
44+
45+
.tool-call code {
46+
padding: 0;
47+
border: 0;
48+
background: transparent;
49+
color: var(--sl-color-text-accent);
50+
font-size: inherit;
51+
font-weight: 600;
52+
}
53+
54+
.separator {
55+
color: var(--sl-color-gray-4);
56+
}
57+
58+
.summary {
59+
min-width: 0;
60+
overflow-wrap: anywhere;
61+
}
62+
63+
.visually-hidden {
64+
position: absolute;
65+
width: 1px;
66+
height: 1px;
67+
padding: 0;
68+
margin: -1px;
69+
overflow: hidden;
70+
clip: rect(0, 0, 0, 0);
71+
white-space: nowrap;
72+
border: 0;
73+
}
74+
</style>

‎src/components/conversation/UserMessage.astro‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
---
2+
import { UserRound } from "@lucide/astro";
3+
---
4+
5+
<div class="message user-message">
6+
<div class="message-heading">
7+
<UserRound aria-hidden="true" size={17} />
8+
<span>You</span>
9+
</div>
10+
<div class="message-content">
11+
<slot />
12+
</div>
13+
</div>
14+
15+
<style>
16+
.message {
17+
box-sizing: border-box;
18+
width: 90%;
19+
min-width: 0;
20+
padding: 0.85rem 1rem;
21+
border: 1px solid color-mix(in srgb, var(--sl-color-accent) 35%, var(--sl-color-gray-5));
22+
border-radius: 0.75rem 0.75rem 0.2rem 0.75rem;
23+
background: color-mix(in srgb, var(--sl-color-accent-low) 45%, var(--sl-color-bg));
24+
justify-self: end;
25+
}
26+
27+
.message-heading {
28+
display: flex;
29+
gap: 0.4rem;
30+
align-items: center;
31+
margin-bottom: 0.4rem;
32+
color: var(--sl-color-accent-high);
33+
font-size: var(--sl-text-xs);
34+
font-weight: 700;
35+
text-transform: uppercase;
36+
}
37+
38+
.message-content {
39+
font-size: var(--sl-text-sm);
40+
line-height: 1.65;
41+
}
42+
43+
.message-content :global(> :first-child) {
44+
margin-top: 0;
45+
}
46+
47+
.message-content :global(> :last-child) {
48+
margin-bottom: 0;
49+
}
50+
</style>

‎src/content/docs/explanation/dashboard-analytics.mdx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,8 @@ Endform associates runs with git metadata when possible. This lets you compare b
108108

109109
If automatic git detection is not correct in your CI environment, use `ENDFORM_GIT_BRANCH` and `ENDFORM_GIT_COMMIT_SHA` to override the reported metadata. See [Environment variables](/docs/reference/environment-variables#git-metadata-overrides).
110110

111-
## Query the same data from the CLI
111+
## Query the same data outside the dashboard
112112

113-
If you want to script analytics queries or inspect results outside the dashboard, use the `endform query` command. See [Analytics CLI](/docs/reference/analytics-cli).
113+
Use the [`endform analytics` and `endform samples` commands](/docs/reference/analytics-cli) to query historical test data from a terminal, script, or CI job.
114+
115+
You can also connect the [Endform MCP server](/docs/reference/mcp-server) to an AI coding agent and ask it to investigate your test history. See [Investigate test history with AI](/docs/guides/investigate-test-history-with-ai) for example conversations.

0 commit comments

Comments
 (0)