mirror of
https://github.com/paperclipai/paperclip.git
synced 2026-11-07 06:16:06 -10:00
fix(ui): show skill descriptions and preserve composer line height (#19502)
## Thinking Path > - Paperclip is the open source app people use to manage AI agents for work. > - People write requests in the new-task and task-page composers. > - Both composers use the shared Markdown editor for skill selection. > - Skill names alone do not explain which skill to use. > - Inline skill pills can increase the height of a text line. > - This pull request shows descriptions in a full-width menu and gives inline skills a color and icon. > - People can choose a skill and read the request with normal line spacing. ## Linked Issues or Issue Description **What existing behavior does this improve?** Skill selection and inline skill display in the new-task and task-page composers. **Subsystem affected** ui/ — shared Markdown editor and task composer stories. **Current behavior** The slash menu shows skill names in a narrow popup. Inline skills use pill styles that can make a text line too tall. **Proposed behavior** Match the slash menu to the active composer width. Put each skill name and description on one row. Truncate the description with an ellipsis. Show each inline skill in purple with the Boxes icon and normal text line height. **Reason and benefit** People can compare skills before selection. Inline skills remain easy to find without changing paragraph spacing. **Breaking changes** None. Skill links retain the same Markdown labels and references. Mention selection and task submission retain their existing behavior. **Additional context** Related: #19272 changes the submission key in these composers. The browser cases here check skill links after task creation and reply submission. Searches found no duplicate change for this display issue. This is a small improvement to the shipped skills UI in ROADMAP.md. ## What Changed - Align the slash menu with the active composer. Observe composer size changes and keep the menu inside the viewport. - Show each skill name and description on one row. Keep skills without descriptions available. - Use theme tokens for purple skill text and the Boxes icon. Preserve the surrounding text line height. Include both prefixed and standard mask declarations, consistent with the other icon rules. - Add a composer anchor to the task-page surface. Keep the shared editor responsible for menu placement and skill display. - Increase the contrast of menu details and the task composer model label in the covered stories. - Add task-page stories and extend new-task stories. Cover desktop, mobile, light and dark themes, keyboard insertion, and Markdown submission. - Add 18 browser cases for menu size and alignment, description truncation, inline line height, and submitted skill references. - Use the production mobile context in task-page stories. Check mobile text size, long skill names without descriptions, and the saved new-task skill URL. ## Verification - Before the compatibility correction, `a6371219ad1ce0ba908b63b55b7999e4e683cace`: all 130 focused editor, mention, destructive-theme, and avatar tests pass across six files. No existing test was changed. - Current head `c7091dd5d34897f82b752bf93f94b1026cc7a82f` adds the prefixed mask declaration requested by review. All 12 affected theme/avatar tests pass. A fresh Storybook production build and all 18 composer browser cases pass on the identical source tree, with two workers, traces enabled, and no retries. Token gates and whitespace checks pass. - Browser cases check both composers, desktop/mobile text size, light/dark themes, popup width and alignment after resizing, single-row ellipsis, names without descriptions, inline paragraph height, and submitted skill links. - The preceding head has a fully successful CI run (`42260195469`, attempt 2). Current-head Greptile is 5/5 and its check completed successfully. All four review threads are resolved. Current-head CI [42270466448](https://github.com/paperclipai/paperclip/actions/runs/42270466448) passed, including typecheck, build, all general and serialized test shards, all Runner checks, and all eight end-to-end shards. The aggregate verify gate passed. - Screenshots for both composers were reviewed and accepted before this PR was opened. Stories use production components with fixture APIs and submissions. They do not prove backend persistence or agent execution. Mobile uses a resized Chromium viewport with production mobile props. The visual baseline is unpublished, so captures support inspection, not pixel comparisons. - CI run `42254435625` on `9193b47d` failed two existing destructive-theme checks because the new skill-only theme blocks came before the main blocks. The failure reproduced locally. Moving the unchanged declarations into the main blocks made both checks pass. - CI run `42258164662` on `7fab621f` caught one more existing CSS-reader contract: the avatar test expects `--background` first in `.dark`. That failure also reproduced locally. The final source puts the four skill declarations at the ends of the existing blocks. A mechanical comparison proves every pre-existing stylesheet line and all four skill declaration values are identical. - The first run also failed an unchanged Runner credential test during its first lease acquisition. All 42 tests in that file pass in a local diagnostic. The original CI cause remains unknown; no Runner fix is claimed. The second run's Runner package job was cancelled by the corrective push, so it supplies no passing verdict. The final-head Runner package check passed, which shows recovery without explaining the original lease error. - One `7fab621f` mobile play function failed during keyboard insertion (17 browser cases passed, one failed). Its saved DOM contains the skill and an open link dialog without the trailing sentence. The cause remains unknown. Three focused traced executions, a bounded frame-delay diagnostic, and a later full 18-case run passed without source changes. No reliability fix is claimed. The original failure remains recorded separately from the final-head 18-case pass. - Final-head CI run `42260195469`, attempt 1, failed one unchanged runtime startup test in `idle-completed-history.test.ts`. Its HTTP readiness check received connection refusals for 10 seconds. The same test passed in 2.35 seconds in the preceding CI run; the only intervening source change moved four CSS declarations. A focused local run passed the case (one passed, 74 filtered out). A full-file local diagnostic was interrupted after about four minutes without a verdict; it is not counted as a pass. The startup failure cause remains unknown. No runtime source or test was changed. Failed CI jobs were rerun once on the same head; attempt 2 passed. This shows recovery, without explaining the first startup failure. - The broad local typecheck could not complete because Cargo is absent. The affected-test selector requests broad CI for the browser test. Required CI supplies broad typecheck, test, and build coverage. Linux local checks used Node 25.9.0, pnpm 9.15.4, and Playwright Chromium 151. - Earlier evidence retains a Storybook build interrupted by SIGTERM, a dev-server play error during HMR, and a browser attempt that could not launch before Chromium installation. Later successful runs do not explain the earlier interruptions. ## Risks The shared editor also serves other mention types. Their existing placement path stays in place. Slash menu placement must stay aligned during viewport and composer size changes. The browser cases cover both. The mask correction was checked in Chromium; older WebKit was not executed. Mobile cases use a resized Chromium viewport. They do not test a physical phone or its virtual keyboard. ## Model Used OpenAI GPT-6 through Codex, with reasoning, tool use, and code execution. The runtime does not expose a more specific model ID or context-window size. ## Checklist - [x] I have included a thinking path that traces from project context to this change - [x] I have specified the model used (with version and capability details) - [x] I have checked ROADMAP.md and confirmed this PR does not duplicate planned core work - [x] I have searched GitHub for duplicate or related PRs and linked them above - [x] I have either (a) linked existing issues with `Fixes: #` / `Closes #` / `Refs #` OR (b) described the issue in-PR following the relevant issue template - [x] I have not referenced internal/instance-local Paperclip issues or links (only public GitHub `#NNN` / `github.com/paperclipai/paperclip` URLs) - [x] My branch name describes the change (e.g. `docs/...`, `fix/...`) and contains no internal Paperclip ticket id or instance-derived details - [x] I have run tests locally and they pass - [x] I have added or updated tests where applicable - [x] I have updated relevant documentation to reflect my changes - [x] I have considered and documented any risks above - [x] All Paperclip CI gates are green - [x] Greptile is 5/5 with no open P2s, recommendations, or follow-ups - [x] I will address all Greptile and reviewer comments before requesting merge --------- Co-authored-by: Paperclip <[email protected]>
This commit is contained in:
DottaandPaperclip authored and GitHub committed
1 parent
2e7c66aac9
commit
f2d8a51027
8 files changed
+347
-17
No files matched your search
@@ -0,0 +1,118 @@
|
||||
import { expect, test } from "@playwright/test";
|
||||
|
||||
for (const surface of ["composer-new-task", "composer-skills"]) {
|
||||
for (const theme of ["dark", "light"]) {
|
||||
for (const mobile of [false, true]) {
|
||||
for (const state of ["slash-commands", "inline-skill"]) {
|
||||
test(`${surface} ${state} ${theme} ${mobile ? "mobile" : "desktop"}`, async ({ page }, testInfo) => {
|
||||
await page.setViewportSize(mobile ? { width: 390, height: 844 } : { width: 1200, height: 800 });
|
||||
const errors: string[] = [];
|
||||
page.on("pageerror", (error) => errors.push(error.message));
|
||||
const id = `${surface}--${mobile ? "mobile-" : ""}${state}`;
|
||||
await page.goto(`/iframe.html?id=${id}&viewMode=story&globals=theme:${theme}`);
|
||||
await expect.poll(() => page.evaluate(() => {
|
||||
const channel = (window as unknown as {
|
||||
__STORYBOOK_ADDONS_CHANNEL__?: { data: Record<string, Array<{ status?: string }>> };
|
||||
}).__STORYBOOK_ADDONS_CHANNEL__;
|
||||
return channel?.data.storyFinished?.[0]?.status;
|
||||
}), { timeout: 30_000 }).toBe("success");
|
||||
expect(await page.evaluate(() => (window as unknown as {
|
||||
__STORYBOOK_ADDONS_CHANNEL__?: { data: Record<string, unknown> };
|
||||
}).__STORYBOOK_ADDONS_CHANNEL__?.data.playFunctionThrewException)).toBeUndefined();
|
||||
expect(errors).toEqual([]);
|
||||
expect(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth)).toBe(true);
|
||||
const editor = page.getByRole("textbox", { name: "editable markdown" });
|
||||
const editorFont = await editor.evaluate((element) => getComputedStyle(element).fontSize);
|
||||
const expectedFont = await page.evaluate((isMobile) => {
|
||||
const token = isMobile ? "--text-base" : "--text-sm";
|
||||
const probe = document.createElement("span");
|
||||
probe.style.fontSize = `var(${token})`;
|
||||
document.body.append(probe);
|
||||
const size = getComputedStyle(probe).fontSize;
|
||||
probe.remove();
|
||||
return size;
|
||||
}, mobile);
|
||||
expect(editorFont).toBe(expectedFont);
|
||||
|
||||
if (state === "slash-commands") {
|
||||
const menu = page.getByTestId("mention-autocomplete-menu");
|
||||
await expect(menu).toBeVisible();
|
||||
const bounds = await menu.boundingBox();
|
||||
const composer = await page.locator(".paperclip-task-chat-composer").boundingBox();
|
||||
expect(bounds!.width).toBeCloseTo(composer!.width, 0);
|
||||
expect(bounds!.x).toBeCloseTo(composer!.x, 0);
|
||||
expect(bounds!.x).toBeGreaterThanOrEqual(0);
|
||||
expect(bounds!.x + bounds!.width).toBeLessThanOrEqual(page.viewportSize()!.width);
|
||||
expect(bounds!.y + bounds!.height).toBeLessThanOrEqual(page.viewportSize()!.height);
|
||||
const description = menu.getByText(/^Walk through the feature/);
|
||||
const layout = await description.evaluate((element) => {
|
||||
const style = getComputedStyle(element);
|
||||
return { clipped: element.scrollWidth > element.clientWidth, whiteSpace: style.whiteSpace, overflow: style.textOverflow };
|
||||
});
|
||||
expect(layout).toEqual({ clipped: true, whiteSpace: "nowrap", overflow: "ellipsis" });
|
||||
const labelBounds = await menu.getByText("/test-it-for-real", { exact: true }).boundingBox();
|
||||
const descriptionBounds = await description.boundingBox();
|
||||
expect(descriptionBounds!.x).toBeGreaterThan(labelBounds!.x + labelBounds!.width);
|
||||
expect(Math.abs((descriptionBounds!.y + descriptionBounds!.height / 2)
|
||||
- (labelBounds!.y + labelBounds!.height / 2))).toBeLessThan(2);
|
||||
await expect(menu.getByRole("button", { name: /\/release-notes/ })).toBeVisible();
|
||||
const uncutName = menu.getByText("/release-notes-for-project", { exact: true });
|
||||
expect(await uncutName.evaluate((element) => element.scrollWidth <= element.clientWidth)).toBe(true);
|
||||
} else {
|
||||
const skill = page.getByRole("textbox", { name: "editable markdown" }).locator('[data-mention-kind="skill"]');
|
||||
await expect(page.getByRole("textbox", { name: "editable markdown" })).toHaveText("Use /test-it-for-real to verify the sign-in redirect.");
|
||||
await expect(skill).toBeVisible();
|
||||
const appearance = await skill.evaluate((element) => {
|
||||
const style = getComputedStyle(element);
|
||||
const icon = getComputedStyle(element, "::before");
|
||||
return {
|
||||
border: style.borderTopWidth, padding: style.padding, radius: style.borderRadius,
|
||||
color: style.color, parentColor: getComputedStyle(element.parentElement!).color,
|
||||
mask: icon.maskImage, iconWidth: Number.parseFloat(icon.width),
|
||||
};
|
||||
});
|
||||
expect(appearance.border).toBe("0px");
|
||||
expect(appearance.padding).toBe("0px");
|
||||
expect(appearance.radius).toBe("0px");
|
||||
expect(appearance.color).not.toBe(appearance.parentColor);
|
||||
expect(appearance.mask).toContain("data:image/svg+xml");
|
||||
expect(appearance.iconWidth).toBeGreaterThan(0);
|
||||
const heights = await skill.evaluate((element) => {
|
||||
const paragraph = element.closest("p")!;
|
||||
const height = paragraph.getBoundingClientRect().height;
|
||||
const plain = paragraph.cloneNode(true) as HTMLElement;
|
||||
plain.querySelector('[data-mention-kind="skill"]')!.replaceWith(element.textContent!);
|
||||
paragraph.after(plain);
|
||||
const plainHeight = plain.getBoundingClientRect().height;
|
||||
plain.remove();
|
||||
return { height, plainHeight };
|
||||
});
|
||||
expect(heights.height).toBeCloseTo(heights.plainHeight, 1);
|
||||
}
|
||||
await page.evaluate(() => document.fonts.ready);
|
||||
await page.screenshot({ path: testInfo.outputPath(`${surface}-${state}-${theme}-${mobile ? "mobile" : "desktop"}.png`), fullPage: true });
|
||||
if (state === "slash-commands") {
|
||||
await page.setViewportSize({ width: mobile ? 430 : 1000, height: 844 });
|
||||
await page.locator(".paperclip-task-chat-composer").evaluate((element) => {
|
||||
(element as HTMLElement).style.width = "85%";
|
||||
});
|
||||
await expect.poll(() => page.evaluate(() => {
|
||||
const menu = document.querySelector('[data-testid="mention-autocomplete-menu"]')!.getBoundingClientRect();
|
||||
const composer = document.querySelector(".paperclip-task-chat-composer")!.getBoundingClientRect();
|
||||
return Math.abs(menu.width - composer.width) + Math.abs(menu.left - composer.left);
|
||||
})).toBeLessThan(1);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
for (const id of ["composer-skills--send-inline-skill", "composer-new-task--create-with-rich-chips"]) {
|
||||
test(`${id} preserves submitted skill references`, async ({ page }) => {
|
||||
await page.goto(`/iframe.html?id=${id}&viewMode=story`);
|
||||
await expect.poll(() => page.evaluate(() => (window as unknown as {
|
||||
__STORYBOOK_ADDONS_CHANNEL__?: { data: Record<string, Array<{ status?: string }>> };
|
||||
}).__STORYBOOK_ADDONS_CHANNEL__?.data.storyFinished?.[0]?.status), { timeout: 30_000 }).toBe("success");
|
||||
});
|
||||
}
|
||||
@@ -509,17 +509,34 @@ export function computeMentionMenuPosition(
|
||||
return { top, left, maxWidth };
|
||||
}
|
||||
|
||||
function getMentionMenuSize(optionCount: number): MentionMenuSize {
|
||||
const visibleRows = Math.max(1, Math.min(optionCount, 8));
|
||||
function getMentionMenuSize(options: AutocompleteOption[]): MentionMenuSize {
|
||||
const rowHeight = Math.min(options.length, 8) * MENTION_MENU_ROW_HEIGHT;
|
||||
return {
|
||||
width: MENTION_MENU_WIDTH,
|
||||
height: Math.min(
|
||||
MENTION_MENU_HEIGHT,
|
||||
visibleRows * MENTION_MENU_ROW_HEIGHT + MENTION_MENU_CHROME_HEIGHT,
|
||||
Math.max(MENTION_MENU_ROW_HEIGHT, rowHeight) + MENTION_MENU_CHROME_HEIGHT,
|
||||
),
|
||||
};
|
||||
}
|
||||
|
||||
function computeSlashMenuPosition(
|
||||
composer: DOMRect,
|
||||
viewport: MentionMenuViewport,
|
||||
menuSize: MentionMenuSize,
|
||||
) {
|
||||
const minLeft = viewport.offsetLeft + MENTION_MENU_PADDING;
|
||||
const minTop = viewport.offsetTop + MENTION_MENU_PADDING;
|
||||
const width = Math.min(composer.width, Math.max(0, viewport.width - MENTION_MENU_PADDING * 2));
|
||||
const maxLeft = viewport.offsetLeft + viewport.width - MENTION_MENU_PADDING - width;
|
||||
const left = Math.max(minLeft, Math.min(viewport.offsetLeft + composer.left, maxLeft));
|
||||
const above = viewport.offsetTop + composer.top - menuSize.height - MENTION_MENU_PADDING;
|
||||
const below = viewport.offsetTop + composer.bottom + MENTION_MENU_PADDING;
|
||||
const maxTop = viewport.offsetTop + viewport.height - menuSize.height - MENTION_MENU_PADDING;
|
||||
const top = Math.max(minTop, Math.min(above >= minTop ? above : below, maxTop));
|
||||
return { top, left, width, maxWidth: width };
|
||||
}
|
||||
|
||||
// CodeMirror's editable surface is `.cm-content`, not a `pre` or `code` node.
|
||||
// MDXEditor wraps that surface in a hashed `codeMirrorWrapper` class. A paste
|
||||
// that starts inside either of those belongs to the nested editor.
|
||||
@@ -1140,12 +1157,16 @@ export const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>
|
||||
viewport?.addEventListener("scroll", updatePosition);
|
||||
window.addEventListener("resize", updatePosition);
|
||||
window.addEventListener("scroll", updatePosition, true);
|
||||
const anchor = containerRef.current?.closest("[data-editor-autocomplete-anchor]") ?? containerRef.current;
|
||||
const observer = typeof ResizeObserver !== "undefined" ? new ResizeObserver(updatePosition) : null;
|
||||
if (anchor) observer?.observe(anchor);
|
||||
|
||||
return () => {
|
||||
viewport?.removeEventListener("resize", updatePosition);
|
||||
viewport?.removeEventListener("scroll", updatePosition);
|
||||
window.removeEventListener("resize", updatePosition);
|
||||
window.removeEventListener("scroll", updatePosition, true);
|
||||
observer?.disconnect();
|
||||
};
|
||||
}, [checkMention, mentionActive]);
|
||||
|
||||
@@ -1335,12 +1356,11 @@ export const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>
|
||||
setRichEditorError({ code: "MDE-PARSE", message: richEditorErrorMessage(error) });
|
||||
}, []);
|
||||
|
||||
const mentionMenuPosition = mentionState
|
||||
? computeMentionMenuPosition(
|
||||
mentionState,
|
||||
getMentionMenuViewport(),
|
||||
getMentionMenuSize(filteredMentions.length),
|
||||
)
|
||||
const autocompleteAnchor = containerRef.current?.closest("[data-editor-autocomplete-anchor]") ?? containerRef.current;
|
||||
const mentionMenuPosition: { top: number; left: number; maxWidth: number; width?: number } | null = mentionState && autocompleteAnchor
|
||||
? mentionState.trigger === "skill"
|
||||
? computeSlashMenuPosition(autocompleteAnchor.getBoundingClientRect(), getMentionMenuViewport(), getMentionMenuSize(filteredMentions))
|
||||
: computeMentionMenuPosition(mentionState, getMentionMenuViewport(), getMentionMenuSize(filteredMentions))
|
||||
: null;
|
||||
|
||||
if (richEditorError) {
|
||||
@@ -1623,8 +1643,12 @@ export const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>
|
||||
<div
|
||||
data-paperclip-floating-ui=""
|
||||
data-testid="mention-autocomplete-menu"
|
||||
className="pointer-events-auto fixed z-(--z-9999) min-w-(--sz-180px) max-w-(--sz-calc-15) max-h-(--sz-208px) overflow-y-auto overscroll-contain rounded-md border border-border bg-popover shadow-md"
|
||||
className={cn(
|
||||
"pointer-events-auto fixed z-(--z-9999) max-w-(--sz-calc-15) max-h-(--sz-208px) overflow-y-auto overscroll-contain rounded-md border border-border bg-popover shadow-md",
|
||||
mentionState?.trigger === "skill" ? "min-w-0" : "min-w-(--sz-180px)",
|
||||
)}
|
||||
style={{
|
||||
width: mentionMenuPosition.width,
|
||||
top: mentionMenuPosition.top,
|
||||
left: mentionMenuPosition.left,
|
||||
maxWidth: mentionMenuPosition.maxWidth,
|
||||
@@ -1680,7 +1704,7 @@ export const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>
|
||||
) : option.kind === "action" ? (
|
||||
<Flag className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
|
||||
) : option.kind === "skill" ? (
|
||||
<Boxes className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
|
||||
<Boxes className="h-3.5 w-3.5 shrink-0 text-(--skill-mention-foreground)" />
|
||||
) : option.kind === "issue" ? (
|
||||
<Hash className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
|
||||
) : option.kind === "project" && option.projectId ? (
|
||||
@@ -1700,9 +1724,18 @@ export const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>
|
||||
</span>
|
||||
<span className="truncate">{issueMentionTitle(option)}</span>
|
||||
</span>
|
||||
) : option.kind === "skill" ? (
|
||||
<span className="flex min-w-0 flex-1 items-center gap-2">
|
||||
<span className={cn("shrink-0 truncate", option.description ? "max-w-1/2" : "max-w-full")}>{slashCommandLabel(option)}</span>
|
||||
{option.description && (
|
||||
<span className="min-w-0 flex-1 truncate text-xs text-popover-foreground/70" title={option.description}>
|
||||
{option.description}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
) : (
|
||||
<span className="truncate">
|
||||
{option.kind === "skill" || option.kind === "routine" || option.kind === "action"
|
||||
{option.kind === "routine" || option.kind === "action"
|
||||
? slashCommandLabel(option)
|
||||
: option.name}
|
||||
</span>
|
||||
@@ -1723,7 +1756,7 @@ export const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>
|
||||
</span>
|
||||
)}
|
||||
{option.kind === "skill" && (
|
||||
<span className="ml-auto text-(length:--text-nano) uppercase tracking-wide text-muted-foreground">
|
||||
<span className="ml-auto shrink-0 text-(length:--text-nano) uppercase tracking-wide text-popover-foreground/70">
|
||||
Skill
|
||||
</span>
|
||||
)}
|
||||
@@ -1733,7 +1766,7 @@ export const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>
|
||||
</span>
|
||||
)}
|
||||
{option.kind === "action" && (
|
||||
<span className="ml-auto max-w-28 truncate text-(length:--text-nano) text-muted-foreground">
|
||||
<span className="ml-auto max-w-28 truncate text-(length:--text-nano) text-popover-foreground/70">
|
||||
{option.disabled ? option.disabledReason : option.description}
|
||||
</span>
|
||||
)}
|
||||
|
||||
@@ -209,7 +209,7 @@ export function ComposerRunSettingsPicker({
|
||||
const Trigger = mobile ? DialogTrigger : PopoverTrigger;
|
||||
const modelTrigger = <button ref={allowAssigneeChange ? undefined : triggerRef} type="button" disabled={disabled} aria-label="Select model and effort" aria-haspopup="dialog" aria-expanded={open && view !== "agents"} onClick={() => { setView("settings"); if (allowAssigneeChange) setOpen(true); }}
|
||||
className="flex h-8 min-w-0 max-w-full items-center gap-1.5 rounded-full px-2.5 text-muted-foreground hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50">
|
||||
<span data-testid="task-chat-composer-model-label" className="min-w-0 truncate">{open ? "Select model" : modelName || "Default"}</span>
|
||||
<span data-testid="task-chat-composer-model-label" className="min-w-0 truncate text-foreground/70">{open ? "Select model" : modelName || "Default"}</span>
|
||||
{!open && effort ? <span className="hidden shrink-0 sm:inline">{effortLabel}</span> : null}
|
||||
<ChevronDown className="size-3 shrink-0" aria-hidden />
|
||||
</button>;
|
||||
|
||||
@@ -1328,6 +1328,7 @@ export function TaskChatComposer({
|
||||
</TaskChatComposerBar>
|
||||
) : null}
|
||||
<div
|
||||
data-editor-autocomplete-anchor=""
|
||||
className={taskChatComposerSurfaceClasses(mobile, streamlined)}
|
||||
onKeyDownCapture={(e) => {
|
||||
// Capture mode shortcuts on the wrapper so they work while the rich
|
||||
|
||||
@@ -642,6 +642,9 @@
|
||||
--primary-crown-bubble-size: 7px;
|
||||
--primary-crown-bubble-travel: 30px;
|
||||
--motion-ease-primary-crown-burst: cubic-bezier(0.2, 0.8, 0.3, 1);
|
||||
--skill-mention-icon-offset: -0.125em;
|
||||
--skill-mention-foreground: var(--color-violet-700);
|
||||
--skill-mention-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2.97%2012.92A2%202%200%200%200%202%2014.63v3.24a2%202%200%200%200%20.97%201.71l3%201.8a2%202%200%200%200%202.06%200L12%2019v-5.5l-5-3-4.03%202.42Z%22%2F%3E%3Cpath%20d%3D%22m7%2016.5-4.74-2.85%22%2F%3E%3Cpath%20d%3D%22m7%2016.5%205-3%22%2F%3E%3Cpath%20d%3D%22M7%2016.5v5.17%22%2F%3E%3Cpath%20d%3D%22M12%2013.5V19l3.97%202.38a2%202%200%200%200%202.06%200l3-1.8a2%202%200%200%200%20.97-1.71v-3.24a2%202%200%200%200-.97-1.71L17%2010.5l-5%203Z%22%2F%3E%3Cpath%20d%3D%22m17%2016.5-5-3%22%2F%3E%3Cpath%20d%3D%22m17%2016.5%204.74-2.85%22%2F%3E%3Cpath%20d%3D%22M17%2016.5v5.17%22%2F%3E%3Cpath%20d%3D%22M7.97%204.42A2%202%200%200%200%207%206.13v4.37l5%203%205-3V6.13a2%202%200%200%200-.97-1.71l-3-1.8a2%202%200%200%200-2.06%200l-3%201.8Z%22%2F%3E%3Cpath%20d%3D%22M12%208%207.26%205.15%22%2F%3E%3Cpath%20d%3D%22m12%208%204.74-2.85%22%2F%3E%3Cpath%20d%3D%22M12%2013.5V8%22%2F%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
|
||||
.dark {
|
||||
@@ -719,6 +722,7 @@
|
||||
--patch-remove-fg: #ffa198;
|
||||
--status-task-icon-done: #34d06f;
|
||||
--status-task-icon-cancelled: #9a958a;
|
||||
--skill-mention-foreground: var(--color-violet-300);
|
||||
}
|
||||
|
||||
.streamlined-task-detail-surface {
|
||||
@@ -2201,6 +2205,32 @@ a.paperclip-mention-chip[data-mention-kind="agent"]::before {
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.paperclip-mdxeditor-content a.paperclip-mention-chip[data-mention-kind="skill"] {
|
||||
display: inline;
|
||||
min-height: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
color: var(--skill-mention-foreground);
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
vertical-align: baseline;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
.paperclip-mdxeditor-content a.paperclip-mention-chip[data-mention-kind="skill"]::before {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
margin-inline-end: var(--spacing);
|
||||
vertical-align: var(--skill-mention-icon-offset);
|
||||
background-color: currentColor;
|
||||
-webkit-mask: var(--skill-mention-icon) center / contain no-repeat;
|
||||
mask: var(--skill-mention-icon) center / contain no-repeat;
|
||||
}
|
||||
|
||||
.paperclip-mdxeditor-content ul,
|
||||
.paperclip-mdxeditor-content ol {
|
||||
margin: 1.1em 0;
|
||||
|
||||
@@ -0,0 +1,106 @@
|
||||
import { useLayoutEffect, useState } from "react";
|
||||
import type { Meta, StoryObj } from "@storybook/react-vite";
|
||||
import { expect, userEvent, waitFor, within } from "storybook/test";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import { buildSkillMentionHref } from "@paperclipai/shared";
|
||||
import { TaskChatComposer } from "@/components/task-chat/TaskChatComposer";
|
||||
import { TaskChatComposerDock } from "@/components/task-chat/TaskChatComposerDock";
|
||||
import { TaskChatThreadView } from "@/components/task-chat/TaskChatThreadView";
|
||||
import { useCompany } from "@/context/CompanyContext";
|
||||
import { useSidebar } from "@/context/SidebarContext";
|
||||
import { queryKeys } from "@/lib/queryKeys";
|
||||
import { composerSkills } from "../../support/composerSkills";
|
||||
|
||||
function TaskSkillsStory() {
|
||||
const client = useQueryClient();
|
||||
const { selectedCompanyId } = useCompany();
|
||||
const { isMobile } = useSidebar();
|
||||
const [sent, setSent] = useState<string | null>(null);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
if (!selectedCompanyId) return;
|
||||
const originalFetch = window.fetch;
|
||||
window.fetch = async (input, init) => {
|
||||
const url = new URL(typeof input === "string" ? input : input instanceof URL ? input.href : input.url, location.origin);
|
||||
if (url.pathname === `/api/companies/${selectedCompanyId}/skills`) return Response.json(composerSkills);
|
||||
if (url.pathname === `/api/companies/${selectedCompanyId}/routines`) return Response.json([]);
|
||||
return originalFetch(input, init);
|
||||
};
|
||||
client.setQueryData(queryKeys.companySkills.list(selectedCompanyId), composerSkills);
|
||||
client.setQueryData(queryKeys.routines.list(selectedCompanyId), []);
|
||||
return () => { window.fetch = originalFetch; };
|
||||
}, [client, selectedCompanyId]);
|
||||
|
||||
return <div className="flex min-h-dvh flex-col bg-background text-foreground">
|
||||
<header className="flex h-12 items-center border-b border-border px-6 text-sm">Tasks / Fix the sign-in redirect</header>
|
||||
<main className="mx-auto flex w-full max-w-3xl flex-1 flex-col p-6">
|
||||
<h1 className="mb-6 text-xl font-semibold">Fix the sign-in redirect</h1>
|
||||
<div className="flex flex-1 flex-col" data-task-chat-shell="">
|
||||
<TaskChatThreadView items={[
|
||||
{ id: "request", kind: "message", author: "human", text: "Review the sign-in flow and fix the redirect after a session expires." },
|
||||
{ id: "response", kind: "message", author: "agent", authorName: "Codex", text: "The redirect is fixed. Use a skill to check the full sign-in flow." },
|
||||
]} />
|
||||
{sent && <output aria-label="Submitted Markdown" className="mb-4 text-sm">{sent}</output>}
|
||||
<TaskChatComposerDock mobile={isMobile} streamlined={false}>
|
||||
<TaskChatComposer mobile={isMobile} workMode="standard" onAdd={async (body) => { setSent(body); }} />
|
||||
</TaskChatComposerDock>
|
||||
</div>
|
||||
</main>
|
||||
</div>;
|
||||
}
|
||||
|
||||
const meta = {
|
||||
id: "composer-skills",
|
||||
title: "Tasks and conversations/Task creation and lifecycle/Composer/Skills",
|
||||
component: TaskSkillsStory,
|
||||
parameters: {
|
||||
layout: "fullscreen",
|
||||
paperclip: {
|
||||
capabilities: ["tasks/discussion", "tasks/create"],
|
||||
status: "current",
|
||||
implementation: "production",
|
||||
boundary: "fixtures",
|
||||
notes: "Production task thread, dock, composer, and shared editor. Covers skill descriptions, absent descriptions, keyboard insertion, inline color/icon styling, and Markdown submission on desktop and mobile. Skills and submission use fixtures; no task persistence or agent execution is exercised. New-task equivalents are in new-task-composer.stories.tsx.",
|
||||
},
|
||||
},
|
||||
} satisfies Meta<typeof TaskSkillsStory>;
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const SlashCommands: Story = {
|
||||
play: async ({ canvasElement }) => {
|
||||
const page = within(canvasElement.ownerDocument.body);
|
||||
await userEvent.type(await page.findByRole("textbox", { name: "editable markdown" }), "/", { delay: 25 });
|
||||
const menu = within(await page.findByTestId("mention-autocomplete-menu"));
|
||||
await expect(menu.getByText("/test-it-for-real")).toBeVisible();
|
||||
await expect(menu.getByText(composerSkills[0]!.description!)).toBeVisible();
|
||||
await expect(menu.getByText(`/${composerSkills[2]!.slug}`)).toBeVisible();
|
||||
},
|
||||
};
|
||||
|
||||
export const InlineSkill: Story = {
|
||||
play: async ({ canvasElement }) => {
|
||||
const page = within(canvasElement.ownerDocument.body);
|
||||
const editor = await page.findByRole("textbox", { name: "editable markdown" });
|
||||
await userEvent.type(editor, "Use /test-it", { delay: 25 });
|
||||
await expect(await page.findByTestId("mention-autocomplete-menu")).toBeVisible();
|
||||
await userEvent.keyboard("{Tab}");
|
||||
await waitFor(() => expect(editor.querySelector('[data-mention-kind="skill"]')).toBeVisible());
|
||||
await userEvent.keyboard(" to verify the sign-in redirect.", { delay: 25 });
|
||||
await expect(editor).toHaveTextContent("Use /test-it-for-real to verify the sign-in redirect.");
|
||||
},
|
||||
};
|
||||
|
||||
export const SendInlineSkill: Story = {
|
||||
play: async (context) => {
|
||||
await InlineSkill.play!(context);
|
||||
const page = within(context.canvasElement.ownerDocument.body);
|
||||
await userEvent.keyboard("{Enter}");
|
||||
await expect(await page.findByRole("status", { name: "Submitted Markdown" })).toHaveTextContent(
|
||||
`Use [/test-it-for-real](${buildSkillMentionHref(composerSkills[0]!.id, composerSkills[0]!.slug)}) to verify the sign-in redirect.`,
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export const MobileSlashCommands: Story = { ...SlashCommands, globals: { viewport: { value: "mobile", isRotated: false } } };
|
||||
export const MobileInlineSkill: Story = { ...InlineSkill, globals: { viewport: { value: "mobile", isRotated: false } } };
|
||||
@@ -13,6 +13,7 @@ import {
|
||||
} from "@paperclipai/shared";
|
||||
import { MarkdownBody } from "@/components/MarkdownBody";
|
||||
import { composerImageFiles } from "../../support/composerImageFiles";
|
||||
import { composerSkills as SKILLS } from "../../support/composerSkills";
|
||||
import { NewIssueDialog } from "@/components/NewIssueDialog";
|
||||
import { useCompany } from "@/context/CompanyContext";
|
||||
import { useDialog } from "@/context/DialogContext";
|
||||
@@ -35,7 +36,6 @@ const NEW_TASK_AGENTS = [...storybookAgents, { ...storybookAgents[2]!, id: "agen
|
||||
: { ...agent, appearance: appearanceForPalette("pink-lemonade") },
|
||||
);
|
||||
const REQUEST = "Review the sign-in flow and fix the redirect after a session expires.";
|
||||
const SKILLS = [{ id: "skill-test-drive", key: "test-it-for-real", slug: "test-it-for-real", name: "Test it for real", description: "Walk through the feature in the browser." }];
|
||||
const ROUTINES = [{ id: "routine-daily-check", title: "Daily check-in", status: "active" }];
|
||||
const RICH_REQUEST = [
|
||||
`Ask [@CodexCoder](${buildAgentMentionHref("agent-codex", "code")}) and [@QAChecker](${buildAgentMentionHref("agent-qa", "shield")}) to review [@Board UI](${buildProjectMentionHref("project-board-ui", storybookProjects[0]!.color)}).`,
|
||||
@@ -481,10 +481,13 @@ export const MentionPicker: Story = {
|
||||
export const SlashCommands: Story = {
|
||||
play: async ({ canvasElement }) => {
|
||||
const page = within(canvasElement.ownerDocument.body);
|
||||
await userEvent.type(await page.findByRole("textbox", { name: "editable markdown" }), "/");
|
||||
await waitFor(() => expect(page.getByTestId("task-chat-composer-assignee-label")).toHaveTextContent("CEO"));
|
||||
await userEvent.type(await page.findByRole("textbox", { name: "editable markdown" }), "/", { delay: 25 });
|
||||
const menuElement = await page.findByTestId("mention-autocomplete-menu");
|
||||
const menu = within(menuElement);
|
||||
await expect(menu.getByText("/test-it-for-real")).toBeVisible();
|
||||
await expect(menu.getByText(SKILLS[0]!.description!)).toBeVisible();
|
||||
await expect(menu.getByText(`/${SKILLS[2]!.slug}`)).toBeVisible();
|
||||
await expect(menu.getByText("/routine:Daily check-in")).toBeVisible();
|
||||
await expect(menuElement.getBoundingClientRect().right).toBeLessThanOrEqual(canvasElement.ownerDocument.defaultView!.innerWidth);
|
||||
},
|
||||
@@ -513,6 +516,7 @@ export const CreateWithRichChips: Story = {
|
||||
const receipt = await page.findByRole("status");
|
||||
await expect(receipt).toHaveTextContent("Task created");
|
||||
await expect(receipt).toHaveTextContent("/test-it-for-real");
|
||||
await expect(within(receipt).getByRole("link", { name: "/test-it-for-real" })).toHaveAttribute("href", `/skills/${SKILLS[0]!.id}`);
|
||||
await expect(receipt).toHaveTextContent("/routine:Daily check-in");
|
||||
await expect(receipt.querySelector('[data-mention-kind="agent"]')).toHaveAttribute("style", expect.stringContaining("electric-grove"));
|
||||
},
|
||||
@@ -553,6 +557,21 @@ export const MobileSlashCommands: Story = { ...SlashCommands, globals: { viewpor
|
||||
export const MobileRichChips: Story = { ...RichChips, globals: { viewport: { value: "mobile", isRotated: false } } };
|
||||
export const MobileInsertRichChips: Story = { ...InsertRichChips, globals: { viewport: { value: "mobile", isRotated: false } } };
|
||||
|
||||
export const InlineSkill: Story = {
|
||||
play: async ({ canvasElement }) => {
|
||||
const page = within(canvasElement.ownerDocument.body);
|
||||
await waitFor(() => expect(page.getByTestId("task-chat-composer-assignee-label")).toHaveTextContent("CEO"));
|
||||
const editor = await page.findByRole("textbox", { name: "editable markdown" });
|
||||
await userEvent.type(editor, "Use /test-it", { delay: 25 });
|
||||
await expect(await page.findByTestId("mention-autocomplete-menu")).toBeVisible();
|
||||
await userEvent.keyboard("{Tab}");
|
||||
await waitFor(() => expect(editor.querySelector('[data-mention-kind="skill"]')).toBeVisible());
|
||||
await userEvent.keyboard(" to verify the sign-in redirect.", { delay: 25 });
|
||||
await expect(editor).toHaveTextContent("Use /test-it-for-real to verify the sign-in redirect.");
|
||||
},
|
||||
};
|
||||
export const MobileInlineSkill: Story = { ...InlineSkill, globals: { viewport: { value: "mobile", isRotated: false } } };
|
||||
|
||||
export const ScreenDragOver: Story = {
|
||||
play: async ({ canvasElement }) => {
|
||||
const document = canvasElement.ownerDocument;
|
||||
|
||||
@@ -0,0 +1,23 @@
|
||||
export const composerSkills = [
|
||||
{
|
||||
id: "skill-test-drive",
|
||||
key: "test-it-for-real",
|
||||
slug: "test-it-for-real",
|
||||
name: "Test it for real",
|
||||
description: "Walk through the feature in the browser, check the complete user journey, and capture screenshots of the result for review.",
|
||||
},
|
||||
{
|
||||
id: "skill-check-pr",
|
||||
key: "check-pr",
|
||||
slug: "check-pr",
|
||||
name: "Check PR",
|
||||
description: "Review pull request comments and failing checks before submission.",
|
||||
},
|
||||
{
|
||||
id: "skill-release-notes",
|
||||
key: "release-notes-for-project",
|
||||
slug: "release-notes-for-project",
|
||||
name: "Release notes",
|
||||
description: null,
|
||||
},
|
||||
];
|
||||
Reference in new issue
Block a user