Create storybook for web components

@@ -1,0 +1,132 @@
<script lang="ts">
	import type { ToolUseBlock } from '@sourcegraph/amp-core/src/threads/thread'
	import { newThreadID, newThreadToolUseID } from '@sourcegraph/amp-core/src/threads/thread'
	import type { ReadThreadToolDef } from '@sourcegraph/amp-core/src/tools/builtin/read_thread/gemini'
	import type { ToolRun } from '@sourcegraph/amp-core/src/tools/tool-service'

	import ReadThreadToolUse from './read_thread-tool-use.svelte'

	const threadID = newThreadID()

	const baseToolUse: ToolUseBlock<ReadThreadToolDef['args']> = {
		type: 'tool_use',
		id: newThreadToolUseID(),
		name: 'read_thread',
		input: {
			threadID: 'T-abc123-def456-ghi789',
			goal: 'Find the discussion about the authentication bug and summarize the proposed fix',
		},
	}

	const shortGoalToolUse: ToolUseBlock<ReadThreadToolDef['args']> = {
		type: 'tool_use',
		id: newThreadToolUseID(),
		name: 'read_thread',
		input: {
			threadID: 'T-xyz789',
			goal: 'Get context on user permissions',
		},
	}

	const longGoalToolUse: ToolUseBlock<ReadThreadToolDef['args']> = {
		type: 'tool_use',
		id: newThreadToolUseID(),
		name: 'read_thread',
		input: {
			threadID: 'T-long123',
			goal: 'This is a very long goal that should be truncated with an ellipsis when displayed in the UI because it contains a lot of detailed information about what we are trying to accomplish',
		},
	}

	const noThreadIDToolUse: ToolUseBlock<ReadThreadToolDef['args']> = {
		type: 'tool_use',
		id: newThreadToolUseID(),
		name: 'read_thread',
		input: {
			goal: 'Search for information about database migrations',
		},
	}

	const emptyGoalToolUse: ToolUseBlock<ReadThreadToolDef['args']> = {
		type: 'tool_use',
		id: newThreadToolUseID(),
		name: 'read_thread',
		input: {},
	}

	const queuedRun: ToolRun<ReadThreadToolDef> = {
		status: 'queued',
	}

	const inProgressRun: ToolRun<ReadThreadToolDef> = {
		status: 'in-progress',
		progress: {
			statusMessage: 'Analyzing thread messages...',
		},
	}

	const doneRun: ToolRun<ReadThreadToolDef> = {
		status: 'done',
		result: `# Thread Summary

The discussion focused on fixing an authentication bug where JWT tokens were not properly validated.

## Key Points:
- Token expiration was not being checked
- Proposed fix: Add middleware validation
- Implementation timeline: 2-3 days`,
	}

	const errorRun: ToolRun<ReadThreadToolDef> = {
		status: 'error',
		error: {
			message: 'Thread not found: T-abc123-def456-ghi789',
		},
	}
</script>

<div class="space-y-8 p-4">
	<h1 class="text-2xl font-bold">ReadThread Tool Use Stories</h1>

	<div class="space-y-6">
		<div>
			<h2 class="text-lg font-semibold mb-2">Queued - With Thread ID</h2>
			<ReadThreadToolUse toolUse={baseToolUse} toolRun={queuedRun} {threadID} />
		</div>

		<div>
			<h2 class="text-lg font-semibold mb-2">In Progress - With Status Message</h2>
			<ReadThreadToolUse toolUse={baseToolUse} toolRun={inProgressRun} {threadID} />
		</div>

		<div>
			<h2 class="text-lg font-semibold mb-2">Done - With Result</h2>
			<ReadThreadToolUse toolUse={baseToolUse} toolRun={doneRun} {threadID} />
		</div>

		<div>
			<h2 class="text-lg font-semibold mb-2">Short Goal</h2>
			<ReadThreadToolUse toolUse={shortGoalToolUse} toolRun={inProgressRun} {threadID} />
		</div>

		<div>
			<h2 class="text-lg font-semibold mb-2">Long Goal (Should Truncate)</h2>
			<ReadThreadToolUse toolUse={longGoalToolUse} toolRun={queuedRun} {threadID} />
		</div>

		<div>
			<h2 class="text-lg font-semibold mb-2">No Thread ID (No Hover Card)</h2>
			<ReadThreadToolUse toolUse={noThreadIDToolUse} toolRun={inProgressRun} {threadID} />
		</div>

		<div>
			<h2 class="text-lg font-semibold mb-2">Empty Goal</h2>
			<ReadThreadToolUse toolUse={emptyGoalToolUse} toolRun={inProgressRun} {threadID} />
		</div>

		<div>
			<h2 class="text-lg font-semibold mb-2">Error State</h2>
			<ReadThreadToolUse toolUse={baseToolUse} toolRun={errorRun} {threadID} />
		</div>
	</div>
</div>

@@ -88,8 +88,9 @@
	import OracleToolStory from './tool-calls/oracle-tool-story.svelte'
	import PermissionsPresetStory from './tool-calls/permissions-preset-story.svelte'
	import RAGToolStory from './tool-calls/rag-tool-story.svelte'
	import ReadStory from './tool-calls/read-story.svelte'
	import ReadThreadStory from '$lib/components/thread/tool-uses/read_thread-tool-use-story.svelte'
	import ReadWebPageStory from './tool-calls/read-web-page-story.svelte'
	import SubAgentToolListStory from './tool-calls/sub-agent-tool-list-story.svelte'
	import TaskToolStory from './tool-calls/task-tool-story.svelte'
	import TodoWriteStory from './tool-calls/todo-write-story.svelte'

@@ -382,8 +382,12 @@
	<Story title="{READ_TOOL_NAME} File Tool" category="Tools">
		<ReadStory />
	</Story>

	<Story title="Read Thread Tool" category="Tools">
		<ReadThreadStory />
	</Story>

	<Story title="Chat LLM Tool" category="Tools">
		<RAGToolStory />
	</Story>