@nocturnium/svelte-ide 1.0.0-rc.1

package/dist/components/ai/AIInlineEdit.svelte

@@ -0,0 +1,155 @@
+<script lang="ts">
+	import { Button, Icon, Textarea, Spinner } from '../core';
+
+	interface Props {
+		initialPrompt?: string;
+		selection?: string;
+		onSubmit: (prompt: string) => Promise<void>;
+		onCancel: () => void;
+		class?: string;
+	}
+
+	let {
+		initialPrompt = '',
+		selection = '',
+		onSubmit,
+		onCancel,
+		class: className = ''
+	}: Props = $props();
+
+	let prompt = $state(initialPrompt);
+	let isSubmitting = $state(false);
+
+	async function handleSubmit() {
+		if (!prompt.trim() || isSubmitting) return;
+
+		isSubmitting = true;
+		try {
+			await onSubmit(prompt);
+		} finally {
+			isSubmitting = false;
+		}
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape') {
+			onCancel();
+		} else if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
+			handleSubmit();
+		}
+	}
+</script>
+
+<div class="ai-inline-edit {className}" onkeydown={handleKeydown}>
+	<div class="ai-inline-edit__header">
+		<Icon name="sparkles" size={14} />
+		<span>AI Edit</span>
+	</div>
+
+	{#if selection}
+		<div class="ai-inline-edit__selection">
+			<pre>{selection}</pre>
+		</div>
+	{/if}
+
+	<div class="ai-inline-edit__input">
+		<Textarea
+			bind:value={prompt}
+			placeholder="Describe the changes you want..."
+			rows={2}
+			fullWidth
+			disabled={isSubmitting}
+		/>
+	</div>
+
+	<div class="ai-inline-edit__actions">
+		<Button variant="ghost" size="sm" onclick={onCancel} disabled={isSubmitting}>
+			Cancel
+		</Button>
+		<Button
+			variant="primary"
+			size="sm"
+			onclick={handleSubmit}
+			disabled={!prompt.trim() || isSubmitting}
+		>
+			{#if isSubmitting}
+				<Spinner size="xs" />
+			{:else}
+				{#snippet icon()}<Icon name="wand" size={14} />{/snippet}
+			{/if}
+			Apply
+		</Button>
+	</div>
+
+	<div class="ai-inline-edit__hint">
+		<span>Press <kbd>Cmd/Ctrl+Enter</kbd> to submit, <kbd>Esc</kbd> to cancel</span>
+	</div>
+</div>
+
+<style>
+	.ai-inline-edit {
+		background: var(--ide-bg-elevated);
+		border: 1px solid var(--ide-ai-assistant);
+		border-radius: var(--ide-radius-lg);
+		box-shadow: var(--ide-shadow-lg);
+		overflow: hidden;
+		animation: ide-slide-up var(--ide-transition-normal);
+	}
+
+	.ai-inline-edit__header {
+		display: flex;
+		align-items: center;
+		gap: var(--ide-spacing-sm);
+		padding: var(--ide-spacing-sm) var(--ide-spacing-md);
+		background: color-mix(in srgb, var(--ide-ai-assistant) 20%, transparent);
+		font-size: var(--ide-font-size-sm);
+		font-weight: 600;
+		color: var(--ide-ai-assistant);
+	}
+
+	.ai-inline-edit__selection {
+		max-height: 100px;
+		overflow: auto;
+		padding: var(--ide-spacing-sm) var(--ide-spacing-md);
+		background: var(--ide-bg-secondary);
+		border-top: 1px solid var(--ide-border);
+		border-bottom: 1px solid var(--ide-border);
+	}
+
+	.ai-inline-edit__selection pre {
+		margin: 0;
+		font-family: var(--ide-font-mono);
+		font-size: var(--ide-font-size-xs);
+		color: var(--ide-text-secondary);
+		white-space: pre-wrap;
+	}
+
+	.ai-inline-edit__input {
+		padding: var(--ide-spacing-md);
+	}
+
+	.ai-inline-edit__actions {
+		display: flex;
+		justify-content: flex-end;
+		gap: var(--ide-spacing-sm);
+		padding: 0 var(--ide-spacing-md) var(--ide-spacing-md);
+	}
+
+	.ai-inline-edit__hint {
+		padding: var(--ide-spacing-xs) var(--ide-spacing-md) var(--ide-spacing-sm);
+		text-align: center;
+	}
+
+	.ai-inline-edit__hint span {
+		font-size: 10px;
+		color: var(--ide-text-muted);
+	}
+
+	.ai-inline-edit__hint kbd {
+		padding: 1px 4px;
+		font-size: 9px;
+		background: var(--ide-bg-secondary);
+		border: 1px solid var(--ide-border);
+		border-radius: 2px;
+	}
+</style>

package/dist/components/ai/AIInlineEdit.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    initialPrompt?: string;
+    selection?: string;
+    onSubmit: (prompt: string) => Promise<void>;
+    onCancel: () => void;
+    class?: string;
+}
+declare const AIInlineEdit: import("svelte").Component<Props, {}, "">;
+type AIInlineEdit = ReturnType<typeof AIInlineEdit>;
+export default AIInlineEdit;

package/dist/components/ai/AIMessage.svelte

@@ -0,0 +1,239 @@
+<script lang="ts">
+	import { Avatar, Icon, Badge } from '../core';
+	import AIMessageContent from './AIMessageContent.svelte';
+	import AIMessageActions from './AIMessageActions.svelte';
+	import AIToolCallDisplay from './AIToolCallDisplay.svelte';
+	import type { AIMessage } from '../../types';
+	import { formatRelativeTime } from '../../utils/format';
+
+	interface Props {
+		message: AIMessage;
+		showActions?: boolean;
+		onCopy?: (message: AIMessage) => void;
+		onEdit?: (message: AIMessage) => void;
+		onRetry?: (message: AIMessage) => void;
+		onDelete?: (message: AIMessage) => void;
+		onBranch?: (message: AIMessage) => void;
+	}
+
+	let {
+		message,
+		showActions = true,
+		onCopy,
+		onEdit,
+		onRetry,
+		onDelete,
+		onBranch
+	}: Props = $props();
+
+	const isUser = $derived(message.role === 'user');
+	const isAssistant = $derived(message.role === 'assistant');
+	const isSystem = $derived(message.role === 'system');
+	const isTool = $derived(message.role === 'tool');
+</script>
+
+<div class="ai-message" class:ai-message--user={isUser} class:ai-message--assistant={isAssistant}>
+	<div class="ai-message__avatar">
+		{#if isUser}
+			<Avatar name="You" size="sm" color="var(--ide-ai-user)" />
+		{:else if isAssistant}
+			<Avatar name="AI" size="sm" isAI />
+		{:else if isSystem}
+			<Icon name="settings" size={20} />
+		{:else if isTool}
+			<Icon name="zap" size={20} />
+		{/if}
+	</div>
+
+	<div class="ai-message__content">
+		<div class="ai-message__header">
+			<span class="ai-message__role">
+				{#if isUser}
+					You
+				{:else if isAssistant}
+					AI Assistant
+				{:else if isSystem}
+					System
+				{:else if isTool}
+					Tool Result
+				{/if}
+			</span>
+			<span class="ai-message__time">{formatRelativeTime(message.timestamp)}</span>
+
+			{#if showActions && (isUser || isAssistant)}
+				<AIMessageActions
+					{message}
+					{onCopy}
+					onEdit={isUser ? onEdit : undefined}
+					{onRetry}
+					{onDelete}
+					{onBranch}
+				/>
+			{/if}
+		</div>
+
+		{#if message.error}
+			<div class="ai-message__error">
+				<Icon name="alert-circle" size={14} />
+				<span>{message.error}</span>
+			</div>
+		{:else if message.content}
+			<div class="ai-message__text">
+				<AIMessageContent content={message.content} isStreaming={message.isStreaming} />
+			</div>
+		{/if}
+
+		{#if message.toolCalls && message.toolCalls.length > 0}
+			<div class="ai-message__tool-calls">
+				{#each message.toolCalls as toolCall}
+					<AIToolCallDisplay
+						{toolCall}
+						status="completed"
+					/>
+				{/each}
+			</div>
+		{/if}
+
+		{#if message.toolResult}
+			<div class="ai-message__tool-result">
+				<Badge variant="success" size="sm">
+					<Icon name="check" size={10} />
+					Tool executed successfully
+				</Badge>
+			</div>
+		{/if}
+
+		{#if message.metadata}
+			<div class="ai-message__metadata">
+				{#if message.metadata.model}
+					<span class="ai-message__meta-item">
+						<Icon name="cpu" size={10} />
+						{message.metadata.model}
+					</span>
+				{/if}
+				{#if message.metadata.tokensUsed}
+					<span class="ai-message__meta-item">
+						<Icon name="hash" size={10} />
+						{message.metadata.tokensUsed} tokens
+					</span>
+				{/if}
+				{#if message.metadata.latencyMs}
+					<span class="ai-message__meta-item">
+						<Icon name="clock" size={10} />
+						{message.metadata.latencyMs}ms
+					</span>
+				{/if}
+			</div>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.ai-message {
+		display: flex;
+		gap: var(--ide-spacing-sm);
+		animation: ide-slide-up var(--ide-transition-normal);
+		padding: var(--ide-spacing-sm) 0;
+	}
+
+	.ai-message--user {
+		flex-direction: row-reverse;
+	}
+
+	.ai-message__avatar {
+		flex-shrink: 0;
+		padding-top: 2px;
+	}
+
+	.ai-message__content {
+		flex: 1;
+		min-width: 0;
+		display: flex;
+		flex-direction: column;
+		gap: var(--ide-spacing-xs);
+	}
+
+	.ai-message--user .ai-message__content {
+		align-items: flex-end;
+	}
+
+	.ai-message__header {
+		display: flex;
+		align-items: center;
+		gap: var(--ide-spacing-sm);
+	}
+
+	.ai-message--user .ai-message__header {
+		flex-direction: row-reverse;
+	}
+
+	.ai-message__role {
+		font-size: var(--ide-font-size-xs);
+		font-weight: 600;
+		color: var(--ide-text-secondary);
+	}
+
+	.ai-message__time {
+		font-size: 10px;
+		color: var(--ide-text-muted);
+	}
+
+	.ai-message__text {
+		padding: var(--ide-spacing-sm) var(--ide-spacing-md);
+		border-radius: var(--ide-radius-lg);
+		max-width: 90%;
+	}
+
+	.ai-message--user .ai-message__text {
+		background: var(--ide-ai-user, color-mix(in srgb, var(--color-nocturnium-wave) 25%, var(--ide-bg-secondary)));
+		color: var(--ide-text-primary);
+		border-bottom-right-radius: var(--ide-radius-sm);
+		border: 1px solid color-mix(in srgb, var(--color-nocturnium-wave) 40%, transparent);
+	}
+
+	.ai-message--assistant .ai-message__text {
+		background: var(--ide-bg-secondary);
+		color: var(--ide-text-primary);
+		border-bottom-left-radius: var(--ide-radius-sm);
+		max-width: 100%;
+	}
+
+	.ai-message__error {
+		display: flex;
+		align-items: flex-start;
+		gap: var(--ide-spacing-sm);
+		padding: var(--ide-spacing-sm) var(--ide-spacing-md);
+		background: color-mix(in srgb, var(--ide-error) 15%, transparent);
+		color: var(--ide-error);
+		font-size: var(--ide-font-size-sm);
+		border-radius: var(--ide-radius-lg);
+		max-width: 90%;
+	}
+
+	.ai-message__tool-calls {
+		display: flex;
+		flex-direction: column;
+		gap: var(--ide-spacing-sm);
+		margin-top: var(--ide-spacing-xs);
+		max-width: 100%;
+	}
+
+	.ai-message__tool-result {
+		margin-top: var(--ide-spacing-xs);
+	}
+
+	.ai-message__metadata {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--ide-spacing-md);
+		margin-top: var(--ide-spacing-xs);
+	}
+
+	.ai-message__meta-item {
+		display: flex;
+		align-items: center;
+		gap: var(--ide-spacing-xs);
+		font-size: 10px;
+		color: var(--ide-text-muted);
+	}
+</style>

package/dist/components/ai/AIMessage.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { AIMessage } from '../../types';
+interface Props {
+    message: AIMessage;
+    showActions?: boolean;
+    onCopy?: (message: AIMessage) => void;
+    onEdit?: (message: AIMessage) => void;
+    onRetry?: (message: AIMessage) => void;
+    onDelete?: (message: AIMessage) => void;
+    onBranch?: (message: AIMessage) => void;
+}
+declare const AIMessage: import("svelte").Component<Props, {}, "">;
+type AIMessage = ReturnType<typeof AIMessage>;
+export default AIMessage;

package/dist/components/ai/AIMessageActions.svelte

@@ -0,0 +1,176 @@
+<script lang="ts">
+	import { Icon } from '../core';
+	import type { AIMessage } from '../../types';
+
+	interface Props {
+		message: AIMessage;
+		onCopy?: (message: AIMessage) => void;
+		onEdit?: (message: AIMessage) => void;
+		onRetry?: (message: AIMessage) => void;
+		onDelete?: (message: AIMessage) => void;
+		onBranch?: (message: AIMessage) => void;
+	}
+
+	let { message, onCopy, onEdit, onRetry, onDelete, onBranch }: Props = $props();
+
+	let copied = $state(false);
+	let showConfirmDelete = $state(false);
+
+	const isUser = $derived(message.role === 'user');
+	const isAssistant = $derived(message.role === 'assistant');
+
+	async function handleCopy() {
+		try {
+			await navigator.clipboard.writeText(message.content);
+			copied = true;
+			setTimeout(() => (copied = false), 2000);
+			onCopy?.(message);
+		} catch (err) {
+			console.error('Failed to copy:', err);
+		}
+	}
+
+	function handleEdit() {
+		onEdit?.(message);
+	}
+
+	function handleRetry() {
+		onRetry?.(message);
+	}
+
+	function handleDelete() {
+		if (showConfirmDelete) {
+			onDelete?.(message);
+			showConfirmDelete = false;
+		} else {
+			showConfirmDelete = true;
+			// Auto-hide after 3 seconds
+			setTimeout(() => (showConfirmDelete = false), 3000);
+		}
+	}
+
+	function handleBranch() {
+		onBranch?.(message);
+	}
+</script>
+
+<div class="message-actions" class:message-actions--user={isUser} role="group" aria-label="Message actions">
+	<!-- Copy -->
+	<button
+		class="action-btn"
+		onclick={handleCopy}
+		title="Copy message"
+		aria-label={copied ? 'Copied to clipboard' : 'Copy message'}
+		disabled={!message.content}
+	>
+		{#if copied}
+			<Icon name="check" size={16} />
+		{:else}
+			<Icon name="copy" size={16} />
+		{/if}
+	</button>
+
+	<!-- Edit (user messages only) -->
+	{#if isUser && onEdit}
+		<button class="action-btn" onclick={handleEdit} title="Edit message" aria-label="Edit message">
+			<Icon name="edit" size={16} />
+		</button>
+	{/if}
+
+	<!-- Retry (user messages to resend, assistant to regenerate) -->
+	{#if onRetry}
+		<button class="action-btn" onclick={handleRetry} title={isUser ? 'Resend' : 'Regenerate'} aria-label={isUser ? 'Resend message' : 'Regenerate response'}>
+			<Icon name="refresh" size={16} />
+		</button>
+	{/if}
+
+	<!-- Branch conversation from this point -->
+	{#if onBranch}
+		<button class="action-btn" onclick={handleBranch} title="Branch from here" aria-label="Create branch from this message">
+			<Icon name="git-branch" size={16} />
+		</button>
+	{/if}
+
+	<!-- Delete -->
+	{#if onDelete}
+		<button
+			class="action-btn"
+			class:action-btn--danger={showConfirmDelete}
+			onclick={handleDelete}
+			title={showConfirmDelete ? 'Click again to confirm' : 'Delete message'}
+			aria-label={showConfirmDelete ? 'Click again to confirm deletion' : 'Delete message'}
+		>
+			{#if showConfirmDelete}
+				<Icon name="alert-triangle" size={16} />
+			{:else}
+				<Icon name="trash" size={16} />
+			{/if}
+		</button>
+	{/if}
+</div>
+
+<style>
+	.message-actions {
+		display: flex;
+		gap: 0.25rem;
+		opacity: 0;
+		transition: opacity 0.15s ease;
+	}
+
+	/* Show on hover of parent message */
+	:global(.ai-message:hover) .message-actions {
+		opacity: 1;
+	}
+
+	/* Always show if confirm delete is active */
+	.message-actions:has(.action-btn--danger) {
+		opacity: 1;
+	}
+
+	.message-actions--user {
+		flex-direction: row-reverse;
+	}
+
+	.action-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 36px;
+		height: 36px;
+		padding: 0;
+		background: var(--ide-bg-secondary);
+		border: 1px solid var(--ide-border);
+		border-radius: var(--ide-radius-sm);
+		color: var(--ide-text-muted);
+		cursor: pointer;
+		transition: all 0.15s ease;
+	}
+
+	.action-btn:hover:not(:disabled) {
+		background: var(--ide-bg-hover);
+		color: var(--ide-text-primary);
+		border-color: var(--color-nocturnium-wave);
+	}
+
+	.action-btn:focus-visible {
+		outline: 2px solid var(--color-nocturnium-wave);
+		outline-offset: 2px;
+		background: var(--ide-bg-hover);
+	}
+
+	.action-btn:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.action-btn--danger {
+		background: color-mix(in srgb, var(--ide-error) 15%, var(--ide-bg-secondary));
+		border-color: var(--ide-error);
+		color: var(--ide-error);
+	}
+
+	.action-btn--danger:hover {
+		background: var(--ide-error);
+		color: white;
+	}
+</style>

package/dist/components/ai/AIMessageActions.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { AIMessage } from '../../types';
+interface Props {
+    message: AIMessage;
+    onCopy?: (message: AIMessage) => void;
+    onEdit?: (message: AIMessage) => void;
+    onRetry?: (message: AIMessage) => void;
+    onDelete?: (message: AIMessage) => void;
+    onBranch?: (message: AIMessage) => void;
+}
+declare const AIMessageActions: import("svelte").Component<Props, {}, "">;
+type AIMessageActions = ReturnType<typeof AIMessageActions>;
+export default AIMessageActions;