From 1ea3a8eb9beeb7d510fd29164ea741acec1ee04d Mon Sep 17 00:00:00 2001 From: Dax Raad Date: Thu, 6 Nov 2025 13:03:02 -0500 Subject: big format --- packages/web/src/components/Share.tsx | 46 +++++++-- packages/web/src/components/icons/index.tsx | 9 +- packages/web/src/components/share/common.tsx | 7 +- packages/web/src/components/share/content-code.tsx | 6 +- packages/web/src/components/share/content-diff.tsx | 20 +++- packages/web/src/components/share/copy-button.tsx | 6 +- packages/web/src/components/share/part.tsx | 115 +++++++++++++++++---- packages/web/src/content/docs/1-0.mdx | 3 +- packages/web/src/content/docs/index.mdx | 24 +---- packages/web/src/content/docs/permissions.mdx | 1 - packages/web/src/content/docs/rules.mdx | 6 +- packages/web/src/content/docs/troubleshooting.mdx | 2 +- packages/web/src/styles/custom.css | 29 +++--- 13 files changed, 196 insertions(+), 78 deletions(-) (limited to 'packages/web/src') diff --git a/packages/web/src/components/Share.tsx b/packages/web/src/components/Share.tsx index 062449712..486b6e44b 100644 --- a/packages/web/src/components/Share.tsx +++ b/packages/web/src/components/Share.tsx @@ -1,4 +1,14 @@ -import { For, Show, onMount, Suspense, onCleanup, createMemo, createSignal, SuspenseList, createEffect } from "solid-js" +import { + For, + Show, + onMount, + Suspense, + onCleanup, + createMemo, + createSignal, + SuspenseList, + createEffect, +} from "solid-js" import { DateTime } from "luxon" import { createStore, reconcile, unwrap } from "solid-js/store" import { IconArrowDown } from "./icons" @@ -66,8 +76,13 @@ export default function Share(props: { id: string; api: string; info: Session.In }, messages: {}, }) - const messages = createMemo(() => Object.values(store.messages).toSorted((a, b) => a.id?.localeCompare(b.id))) - const [connectionStatus, setConnectionStatus] = createSignal<[Status, string?]>(["disconnected", "Disconnected"]) + const messages = createMemo(() => + Object.values(store.messages).toSorted((a, b) => a.id?.localeCompare(b.id)), + ) + const [connectionStatus, setConnectionStatus] = createSignal<[Status, string?]>([ + "disconnected", + "Disconnected", + ]) createEffect(() => { console.log(unwrap(store)) }) @@ -330,7 +345,9 @@ export default function Share(props: { id: string; api: string; info: Session.In
{DateTime.fromMillis(data().created || 0).toLocaleString(DateTime.DATETIME_MED)}
@@ -352,7 +369,10 @@ export default function Share(props: { id: string; api: string; info: Session.In if (x.type === "text" && x.synthetic === true) return false if (x.type === "tool" && x.tool === "todoread") return false if (x.type === "text" && !x.text) return false - if (x.type === "tool" && (x.state.status === "pending" || x.state.status === "running")) + if ( + x.type === "tool" && + (x.state.status === "pending" || x.state.status === "running") + ) return false return true }), @@ -364,7 +384,8 @@ export default function Share(props: { id: string; api: string; info: Session.In {(part, partIndex) => { const last = createMemo( () => - data().messages.length === msgIndex() + 1 && filteredParts().length === partIndex() + 1, + data().messages.length === msgIndex() + 1 && + filteredParts().length === partIndex() + 1, ) onMount(() => { @@ -381,7 +402,9 @@ export default function Share(props: { id: string; api: string; info: Session.In } }) - return + return ( + + ) }} @@ -406,7 +429,11 @@ export default function Share(props: { id: string; api: string; info: Session.In
  • Input Tokens - {data().tokens.input ? {data().tokens.input} : —} + {data().tokens.input ? ( + {data().tokens.input} + ) : ( + — + )}
  • Output Tokens @@ -560,7 +587,8 @@ export function fromV1(v1: Message.Info): MessageWithParts { } } - const { title, time, ...metadata } = v1.metadata.tool[part.toolInvocation.toolCallId] + const { title, time, ...metadata } = + v1.metadata.tool[part.toolInvocation.toolCallId] if (part.toolInvocation.state === "call") { return { status: "running", diff --git a/packages/web/src/components/icons/index.tsx b/packages/web/src/components/icons/index.tsx index 62445611f..9aef7a927 100644 --- a/packages/web/src/components/icons/index.tsx +++ b/packages/web/src/components/icons/index.tsx @@ -4418,7 +4418,14 @@ export function IconMultiSelect(props: JSX.SvgSVGAttributes) { } export function IconSettings(props: JSX.SvgSVGAttributes) { return ( - + +
    { diff --git a/packages/web/src/components/share/content-code.tsx b/packages/web/src/components/share/content-code.tsx index 2f383b8be..0f9d28fa3 100644 --- a/packages/web/src/components/share/content-code.tsx +++ b/packages/web/src/components/share/content-code.tsx @@ -26,7 +26,11 @@ export function ContentCode(props: Props) { ) return ( -
    +
    ) } diff --git a/packages/web/src/components/share/content-diff.tsx b/packages/web/src/components/share/content-diff.tsx index 9ccd554d0..79c2723cb 100644 --- a/packages/web/src/components/share/content-diff.tsx +++ b/packages/web/src/components/share/content-diff.tsx @@ -124,7 +124,9 @@ export function ContentDiff(props: Props) { // Collect consecutive modified/removed/added rows while ( i < currentRows.length && - (currentRows[i].type === "modified" || currentRows[i].type === "removed" || currentRows[i].type === "added") + (currentRows[i].type === "modified" || + currentRows[i].type === "removed" || + currentRows[i].type === "added") ) { const row = currentRows[i] if (row.left && (row.type === "removed" || row.type === "modified")) { @@ -162,10 +164,16 @@ export function ContentDiff(props: Props) {
    {rows().map((r) => (
    -
    +
    -
    +
    @@ -176,7 +184,11 @@ export function ContentDiff(props: Props) { {mobileRows().map((block) => (
    {block.lines.map((line) => ( -
    +
    ))} diff --git a/packages/web/src/components/share/copy-button.tsx b/packages/web/src/components/share/copy-button.tsx index 892d5553f..6f51bb4d8 100644 --- a/packages/web/src/components/share/copy-button.tsx +++ b/packages/web/src/components/share/copy-button.tsx @@ -21,7 +21,11 @@ export function CopyButton(props: CopyButtonProps) { return (
    ) diff --git a/packages/web/src/components/share/part.tsx b/packages/web/src/components/share/part.tsx index f7a6a9304..6ad18273b 100644 --- a/packages/web/src/components/share/part.tsx +++ b/packages/web/src/components/share/part.tsx @@ -1,6 +1,15 @@ import map from "lang-map" import { DateTime } from "luxon" -import { For, Show, Match, Switch, type JSX, createMemo, createSignal, type ParentProps } from "solid-js" +import { + For, + Show, + Match, + Switch, + type JSX, + createMemo, + createSignal, + type ParentProps, +} from "solid-js" import { IconHashtag, IconSparkles, @@ -19,7 +28,14 @@ import { IconMagnifyingGlass, IconDocumentMagnifyingGlass, } from "../icons" -import { IconMeta, IconRobot, IconOpenAI, IconGemini, IconAnthropic, IconBrain } from "../icons/custom" +import { + IconMeta, + IconRobot, + IconOpenAI, + IconGemini, + IconAnthropic, + IconBrain, +} from "../icons/custom" import { ContentCode } from "./content-code" import { ContentDiff } from "./content-diff" import { ContentText } from "./content-text" @@ -79,7 +95,11 @@ export function Part(props: PartProps) { {(model) => } @@ -147,7 +167,9 @@ export function Part(props: PartProps) { DateTime.DATETIME_FULL_WITH_SECONDS, )} > - {DateTime.fromMillis(props.message.time.completed).toLocaleString(DateTime.DATETIME_MED)} + {DateTime.fromMillis(props.message.time.completed).toLocaleString( + DateTime.DATETIME_MED, + )} )}
    @@ -343,7 +365,10 @@ function getShikiLang(filename: string) { return type ? (overrides[type] ?? type) : "plaintext" } -function getDiagnostics(diagnosticsByFile: Record, currentFile: string): JSX.Element[] { +function getDiagnostics( + diagnosticsByFile: Record, + currentFile: string, +): JSX.Element[] { const result: JSX.Element[] = [] if (diagnosticsByFile === undefined || diagnosticsByFile[currentFile] === undefined) return result @@ -397,7 +422,9 @@ export function TodoWriteTool(props: ToolProps) { completed: 2, } const todos = createMemo(() => - ((props.state.input?.todos ?? []) as Todo[]).slice().sort((a, b) => priority[a.status] - priority[b.status]), + ((props.state.input?.todos ?? []) as Todo[]) + .slice() + .sort((a, b) => priority[a.status] - priority[b.status]), ) const starting = () => todos().every((t: Todo) => t.status === "pending") const finished = () => todos().every((t: Todo) => t.status === "completed") @@ -439,13 +466,23 @@ export function GrepTool(props: ToolProps) { 0}> - +
    @@ -505,7 +542,9 @@ export function WebFetchTool(props: ToolProps) { } export function ReadTool(props: ToolProps) { - const filePath = createMemo(() => stripWorkingDirectory(props.state.input?.filePath, props.message.path.cwd)) + const filePath = createMemo(() => + stripWorkingDirectory(props.state.input?.filePath, props.message.path.cwd), + ) return ( <> @@ -522,7 +561,10 @@ export function ReadTool(props: ToolProps) { - + @@ -537,8 +579,12 @@ export function ReadTool(props: ToolProps) { } export function WriteTool(props: ToolProps) { - const filePath = createMemo(() => stripWorkingDirectory(props.state.input?.filePath, props.message.path.cwd)) - const diagnostics = createMemo(() => getDiagnostics(props.state.metadata?.diagnostics, props.state.input.filePath)) + const filePath = createMemo(() => + stripWorkingDirectory(props.state.input?.filePath, props.message.path.cwd), + ) + const diagnostics = createMemo(() => + getDiagnostics(props.state.metadata?.diagnostics, props.state.input.filePath), + ) return ( <> @@ -558,7 +604,10 @@ export function WriteTool(props: ToolProps) { - + @@ -568,8 +617,12 @@ export function WriteTool(props: ToolProps) { } export function EditTool(props: ToolProps) { - const filePath = createMemo(() => stripWorkingDirectory(props.state.input.filePath, props.message.path.cwd)) - const diagnostics = createMemo(() => getDiagnostics(props.state.metadata?.diagnostics, props.state.input.filePath)) + const filePath = createMemo(() => + stripWorkingDirectory(props.state.input.filePath, props.message.path.cwd), + ) + const diagnostics = createMemo(() => + getDiagnostics(props.state.metadata?.diagnostics, props.state.input.filePath), + ) return ( <> @@ -586,7 +639,10 @@ export function EditTool(props: ToolProps) {
    - +
    @@ -619,7 +675,11 @@ export function GlobTool(props: ToolProps) { 0}>
    @@ -642,7 +702,12 @@ function ResultsButton(props: ResultsButtonProps) { return ( <> -