chore: merge upstream/main (resolve legacy_aliases conflict, keep upstream fix)

Upstream PR tinyhumansai#2865 also fixed the unquoted-identifier key issue in
parse_frontend_legacy_aliases (inline logic, also skips comment lines
in the compact join). Resolve conflict by keeping the upstream approach
and dropping the object_key() helper introduced in our branch.

Author: M3gA-Mind

app/src/chat/chatSendError.ts

@@ -15,7 +15,8 @@ export type ChatSendErrorCode =
   | 'safety_timeout'
   | 'usage_limit_reached'
   | 'prompt_blocked'
-  | 'prompt_review';
+  | 'prompt_review'
+  | 'attachment_invalid';
 
 export interface ChatSendError {
   code: ChatSendErrorCode;

app/src/components/chat/AttachmentPreview.tsx

@@ -0,0 +1,55 @@
+import { type Attachment, formatFileSize } from '../../lib/attachments';
+import { useT } from '../../lib/i18n/I18nContext';
+
+interface AttachmentPreviewProps {
+  attachments: Attachment[];
+  onRemove: (id: string) => void;
+  disabled?: boolean;
+}
+
+export default function AttachmentPreview({
+  attachments,
+  onRemove,
+  disabled,
+}: AttachmentPreviewProps) {
+  const { t } = useT();
+
+  if (attachments.length === 0) return null;
+
+  return (
+    <div className="flex flex-wrap gap-2 px-1 pb-1">
+      {attachments.map(attachment => (
+        <div
+          key={attachment.id}
+          className="relative flex items-center gap-2 rounded-lg border border-stone-200 dark:border-neutral-700 bg-stone-50 dark:bg-neutral-800 px-2 py-1.5 text-xs text-stone-700 dark:text-neutral-300 max-w-[180px]">
+          <img
+            src={attachment.dataUri}
+            alt={attachment.file.name}
+            className="w-8 h-8 rounded object-cover flex-shrink-0"
+          />
+          <div className="flex flex-col min-w-0">
+            <span className="truncate font-medium leading-tight">{attachment.file.name}</span>
+            <span className="text-stone-400 dark:text-neutral-500 leading-tight">
+              {formatFileSize(attachment.file.size)}
+            </span>
+          </div>
+          <button
+            type="button"
+            aria-label={t('chat.attachment.remove').replace('{name}', attachment.file.name)}
+            onClick={() => onRemove(attachment.id)}
+            disabled={disabled}
+            className="absolute -top-1.5 -right-1.5 w-4 h-4 flex items-center justify-center rounded-full bg-stone-400 dark:bg-neutral-600 text-white hover:bg-stone-600 dark:hover:bg-neutral-400 transition-colors disabled:opacity-40 disabled:cursor-not-allowed flex-shrink-0">
+            <svg className="w-2.5 h-2.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={3}
+                d="M6 18L18 6M6 6l12 12"
+              />
+            </svg>
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+}

app/src/components/chat/__tests__/AttachmentPreview.test.tsx

@@ -0,0 +1,63 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import type { Attachment } from '../../../lib/attachments';
+import AttachmentPreview from '../AttachmentPreview';
+
+function makeAttachment(overrides: Partial<Attachment> = {}): Attachment {
+  const blob = new Blob([new Uint8Array(512)], { type: 'image/png' });
+  return {
+    id: 'att-1',
+    file: new File([blob], 'test.png', { type: 'image/png' }),
+    dataUri: 'data:image/png;base64,abc',
+    mimeType: 'image/png',
+    ...overrides,
+  };
+}
+
+describe('AttachmentPreview', () => {
+  it('renders nothing when attachments list is empty', () => {
+    const { container } = render(<AttachmentPreview attachments={[]} onRemove={vi.fn()} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders a chip with filename and file size for each attachment', () => {
+    const att = makeAttachment();
+    render(<AttachmentPreview attachments={[att]} onRemove={vi.fn()} />);
+    expect(screen.getByText('test.png')).toBeInTheDocument();
+    expect(screen.getByText('512 B')).toBeInTheDocument();
+  });
+
+  it('renders a thumbnail image with the dataUri as src', () => {
+    const att = makeAttachment({ dataUri: 'data:image/png;base64,xyz' });
+    render(<AttachmentPreview attachments={[att]} onRemove={vi.fn()} />);
+    const img = screen.getByAltText('test.png') as HTMLImageElement;
+    expect(img.src).toBe('data:image/png;base64,xyz');
+  });
+
+  it('calls onRemove with the attachment id when × is clicked', () => {
+    const onRemove = vi.fn();
+    const att = makeAttachment({ id: 'att-42' });
+    render(<AttachmentPreview attachments={[att]} onRemove={onRemove} />);
+    fireEvent.click(screen.getByRole('button', { name: /remove test\.png/i }));
+    expect(onRemove).toHaveBeenCalledWith('att-42');
+  });
+
+  it('disables the remove button when disabled prop is true', () => {
+    const att = makeAttachment();
+    render(<AttachmentPreview attachments={[att]} onRemove={vi.fn()} disabled />);
+    expect(screen.getByRole('button', { name: /remove test\.png/i })).toBeDisabled();
+  });
+
+  it('renders multiple chips', () => {
+    const a1 = makeAttachment({ id: '1', file: new File([], 'a.png', { type: 'image/png' }) });
+    const a2 = makeAttachment({
+      id: '2',
+      file: new File([], 'b.jpg', { type: 'image/jpeg' }),
+      mimeType: 'image/jpeg',
+    });
+    render(<AttachmentPreview attachments={[a1, a2]} onRemove={vi.fn()} />);
+    expect(screen.getByText('a.png')).toBeInTheDocument();
+    expect(screen.getByText('b.jpg')).toBeInTheDocument();
+  });
+});

app/src/components/settings/panels/AIPanel.tsx

@@ -914,24 +914,32 @@ const MetricTile = ({
   value: string;
   detail?: string;
 }) => (
-  <div className="rounded-md bg-stone-50 dark:bg-neutral-800/60 px-3 py-2">
-    <div className="text-[10px] font-semibold uppercase tracking-wide text-stone-400 dark:text-neutral-500">
+  <div className="min-w-0 overflow-hidden rounded-md bg-stone-50 dark:bg-neutral-800/60 px-3 py-2">
+    <div className="truncate text-[10px] font-semibold uppercase tracking-wide text-stone-400 dark:text-neutral-500">
       {label}
     </div>
-    <div className="mt-1 text-sm font-semibold text-stone-900 dark:text-neutral-100">{value}</div>
+    <div className="mt-1 truncate text-sm font-semibold text-stone-900 dark:text-neutral-100">
+      {value}
+    </div>
     {detail ? (
-      <div className="mt-0.5 text-[11px] text-stone-500 dark:text-neutral-400">{detail}</div>
+      <div className="mt-0.5 truncate text-[11px] text-stone-500 dark:text-neutral-400">
+        {detail}
+      </div>
     ) : null}
   </div>
 );
 
 const FormulaRow = ({ label, value, detail }: { label: string; value: string; detail: string }) => (
-  <div className="rounded-md border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2">
+  <div className="min-w-0 overflow-hidden rounded-md border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2">
     <div className="flex items-center justify-between gap-3">
-      <span className="text-xs font-medium text-stone-800 dark:text-neutral-100">{label}</span>
-      <span className="font-mono text-xs text-stone-600 dark:text-neutral-300">{value}</span>
+      <span className="min-w-0 truncate text-xs font-medium text-stone-800 dark:text-neutral-100">
+        {label}
+      </span>
+      <span className="shrink-0 font-mono text-xs text-stone-600 dark:text-neutral-300">
+        {value}
+      </span>
     </div>
-    <div className="mt-1 text-[11px] text-stone-500 dark:text-neutral-400">{detail}</div>
+    <div className="mt-1 truncate text-[11px] text-stone-500 dark:text-neutral-400">{detail}</div>
   </div>
 );
 
@@ -1167,7 +1175,7 @@ export const BackgroundLoopControls = ({
   const showHeartbeat = view === 'all' || view === 'heartbeat';
   const showLedger = view === 'all' || view === 'ledger';
   const gridCols =
-    view === 'all' ? 'lg:grid-cols-[minmax(0,1fr)_minmax(300px,0.8fr)]' : 'lg:grid-cols-1';
+    view === 'all' ? 'md:grid-cols-[minmax(0,1fr)_minmax(260px,0.8fr)]' : 'grid-cols-1';
 
   return (
     <div className="space-y-4">
@@ -1237,9 +1245,9 @@ export const BackgroundLoopControls = ({
                       void applyHeartbeatPatch({ notify_meetings: !settings.notify_meetings })
                     }
                   />
-                  <div className="grid gap-2 rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2 md:grid-cols-3">
-                    <label className="space-y-1 text-xs font-medium text-stone-700 dark:text-neutral-200">
-                      <span>{t('settings.ai.calendarCap')}</span>
+                  <div className="grid gap-2 rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2 sm:grid-cols-3">
+                    <label className="min-w-0 space-y-1 text-xs font-medium text-stone-700 dark:text-neutral-200">
+                      <span className="whitespace-nowrap">{t('settings.ai.calendarCap')}</span>
                       <select
                         value={maxCalendarConnectionsPerTick}
                         disabled={saving === 'max_calendar_connections_per_tick'}
@@ -1256,8 +1264,8 @@ export const BackgroundLoopControls = ({
                         ))}
                       </select>
                     </label>
-                    <label className="space-y-1 text-xs font-medium text-stone-700 dark:text-neutral-200">
-                      <span>{t('settings.ai.meetingLookahead')}</span>
+                    <label className="min-w-0 space-y-1 text-xs font-medium text-stone-700 dark:text-neutral-200">
+                      <span className="whitespace-nowrap">{t('settings.ai.meetingLookahead')}</span>
                       <select
                         value={settings.meeting_lookahead_minutes}
                         disabled={saving === 'meeting_lookahead_minutes'}
@@ -1274,8 +1282,10 @@ export const BackgroundLoopControls = ({
                         ))}
                       </select>
                     </label>
-                    <label className="space-y-1 text-xs font-medium text-stone-700 dark:text-neutral-200">
-                      <span>{t('settings.ai.reminderLookahead')}</span>
+                    <label className="min-w-0 space-y-1 text-xs font-medium text-stone-700 dark:text-neutral-200">
+                      <span className="whitespace-nowrap">
+                        {t('settings.ai.reminderLookahead')}
+                      </span>
                       <select
                         value={settings.reminder_lookahead_minutes}
                         disabled={saving === 'reminder_lookahead_minutes'}
@@ -1379,16 +1389,16 @@ export const BackgroundLoopControls = ({
               <div className="divide-y divide-stone-200 dark:divide-neutral-800">
                 {loops.map(loop => (
                   <div key={loop.name} className="grid gap-2 px-3 py-3 md:grid-cols-[150px_1fr]">
-                    <div>
-                      <div className="text-sm font-medium text-stone-900 dark:text-neutral-100">
+                    <div className="min-w-0">
+                      <div className="truncate text-sm font-medium text-stone-900 dark:text-neutral-100">
                         {loop.name}
                       </div>
                       <div className="mt-0.5 flex flex-wrap gap-1 text-[11px] text-stone-500 dark:text-neutral-400">
                         <span>{loop.enabled ? t('settings.ai.on') : t('settings.ai.off')}</span>
                         <span>{loop.cadence}</span>
                       </div>
                     </div>
-                    <div className="text-xs text-stone-600 dark:text-neutral-300">
+                    <div className="min-w-0 text-xs text-stone-600 dark:text-neutral-300">
                       <div>{loop.work}</div>
                       <div className="mt-1 font-mono text-[11px] text-stone-500 dark:text-neutral-400">
                         {t('settings.ai.routeLabel').replace('{route}', loop.route)}