auricui-skill 0.0.0-stage → 0.1.2

package/skill/assets/upstream/apps/desktop/chat/src/components/AgentIcons.tsx

@@ -0,0 +1,46 @@
+/**
+ * The official marks of the coding agents.
+ *
+ * Paths come unchanged from simple-icons (the brands' own published SVGs; the data is CC0). Those not in
+ * simple-icons come from the vendor: Devin's favicon.svg, unchanged; CodeBuddy, Qwen, Kimi and DeepSeek's monochrome marks
+ * from Lobe Icons (https://github.com/lobehub/lobe-icons, MIT), unchanged. They are other people's trademarks, so
+ * none is redrawn.
+ *
+ * Each is a single path, a plain shape, so all use `currentColor`: they brighten and dim with the text of their
+ * row, with no clashing brand colors on a dark background. They identify which agents are supported; they are not
+ * used as our own marks.
+ */
+
+export type AgentIconId = 'claude' | 'codex' | 'cursor' | 'copilot' | 'opencode' | 'codebuddy' | 'qwen' | 'kimi' | 'minimax' | 'deepseek' | 'devin';
+
+/** Codex is an OpenAI product and uses the OpenAI mark. */
+const PATHS: Record<AgentIconId, string> = {
+  claude: 'm4.7144 15.9555 4.7174-2.6471.079-.2307-.079-.1275h-.2307l-.7893-.0486-2.6956-.0729-2.3375-.0971-2.2646-.1214-.5707-.1215-.5343-.7042.0546-.3522.4797-.3218.686.0608 1.5179.1032 2.2767.1578 1.6514.0972 2.4468.255h.3886l.0546-.1579-.1336-.0971-.1032-.0972L6.973 9.8356l-2.55-1.6879-1.3356-.9714-.7225-.4918-.3643-.4614-.1578-1.0078.6557-.7225.8803.0607.2246.0607.8925.686 1.9064 1.4754 2.4893 1.8336.3643.3035.1457-.1032.0182-.0728-.164-.2733-1.3539-2.4467-1.445-2.4893-.6435-1.032-.17-.6194c-.0607-.255-.1032-.4674-.1032-.7285L6.287.1335 6.6997 0l.9957.1336.419.3642.6192 1.4147 1.0018 2.2282 1.5543 3.0296.4553.8985.2429.8318.091.255h.1579v-.1457l.1275-1.706.2368-2.0947.2307-2.6957.0789-.7589.3764-.9107.7468-.4918.5828.2793.4797.686-.0668.4433-.2853 1.8517-.5586 2.9021-.3643 1.9429h.2125l.2429-.2429.9835-1.3053 1.6514-2.0643.7286-.8196.85-.9046.5464-.4311h1.0321l.759 1.1293-.34 1.1657-1.0625 1.3478-.8804 1.1414-1.2628 1.7-.7893 1.36.0729.1093.1882-.0183 2.8535-.607 1.5421-.2794 1.8396-.3157.8318.3886.091.3946-.3278.8075-1.967.4857-2.3072.4614-3.4364.8136-.0425.0304.0486.0607 1.5482.1457.6618.0364h1.621l3.0175.2247.7892.522.4736.6376-.079.4857-1.2142.6193-1.6393-.3886-3.825-.9107-1.3113-.3279h-.1822v.1093l1.0929 1.0686 2.0035 1.8092 2.5075 2.3314.1275.5768-.3218.4554-.34-.0486-2.2039-1.6575-.85-.7468-1.9246-1.621h-.1275v.17l.4432.6496 2.3436 3.5214.1214 1.0807-.17.3521-.6071.2125-.6679-.1214-1.3721-1.9246L14.38 17.959l-1.1414-1.9428-.1397.079-.674 7.2552-.3156.3703-.7286.2793-.6071-.4614-.3218-.7468.3218-1.4753.3886-1.9246.3157-1.53.2853-1.9004.17-.6314-.0121-.0425-.1397.0182-1.4328 1.9672-2.1796 2.9446-1.7243 1.8456-.4128.164-.7164-.3704.0667-.6618.4008-.5889 2.386-3.0357 1.4389-1.882.929-1.0868-.0062-.1579h-.0546l-6.3385 4.1164-1.1293.1457-.4857-.4554.0608-.7467.2307-.2429 1.9064-1.3114Z',
+  codex: 'M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z',
+  cursor: 'M11.503.131 1.891 5.678a.84.84 0 0 0-.42.726v11.188c0 .3.162.575.42.724l9.609 5.55a1 1 0 0 0 .998 0l9.61-5.55a.84.84 0 0 0 .42-.724V6.404a.84.84 0 0 0-.42-.726L12.497.131a1.01 1.01 0 0 0-.996 0M2.657 6.338h18.55c.263 0 .43.287.297.515L12.23 22.918c-.062.107-.229.064-.229-.06V12.335a.59.59 0 0 0-.295-.51l-9.11-5.257c-.109-.063-.064-.23.061-.23',
+  copilot: 'M23.922 16.997C23.061 18.492 18.063 22.02 12 22.02 5.937 22.02.939 18.492.078 16.997A.641.641 0 0 1 0 16.741v-2.869a.883.883 0 0 1 .053-.22c.372-.935 1.347-2.292 2.605-2.656.167-.429.414-1.055.644-1.517a10.098 10.098 0 0 1-.052-1.086c0-1.331.282-2.499 1.132-3.368.397-.406.89-.717 1.474-.952C7.255 2.937 9.248 1.98 11.978 1.98c2.731 0 4.767.957 6.166 2.093.584.235 1.077.546 1.474.952.85.869 1.132 2.037 1.132 3.368 0 .368-.014.733-.052 1.086.23.462.477 1.088.644 1.517 1.258.364 2.233 1.721 2.605 2.656a.841.841 0 0 1 .053.22v2.869a.641.641 0 0 1-.078.256Zm-11.75-5.992h-.344a4.359 4.359 0 0 1-.355.508c-.77.947-1.918 1.492-3.508 1.492-1.725 0-2.989-.359-3.782-1.259a2.137 2.137 0 0 1-.085-.104L4 11.746v6.585c1.435.779 4.514 2.179 8 2.179 3.486 0 6.565-1.4 8-2.179v-6.585l-.098-.104s-.033.045-.085.104c-.793.9-2.057 1.259-3.782 1.259-1.59 0-2.738-.545-3.508-1.492a4.359 4.359 0 0 1-.355-.508Zm2.328 3.25c.549 0 1 .451 1 1v2c0 .549-.451 1-1 1-.549 0-1-.451-1-1v-2c0-.549.451-1 1-1Zm-5 0c.549 0 1 .451 1 1v2c0 .549-.451 1-1 1-.549 0-1-.451-1-1v-2c0-.549.451-1 1-1Zm3.313-6.185c.136 1.057.403 1.913.878 2.497.442.544 1.134.938 2.344.938 1.573 0 2.292-.337 2.657-.751.384-.435.558-1.15.558-2.361 0-1.14-.243-1.847-.705-2.319-.477-.488-1.319-.862-2.824-1.025-1.487-.161-2.192.138-2.533.529-.269.307-.437.808-.438 1.578v.021c0 .265.021.562.063.893Zm-1.626 0c.042-.331.063-.628.063-.894v-.02c-.001-.77-.169-1.271-.438-1.578-.341-.391-1.046-.69-2.533-.529-1.505.163-2.347.537-2.824 1.025-.462.472-.705 1.179-.705 2.319 0 1.211.175 1.926.558 2.361.365.414 1.084.751 2.657.751 1.21 0 1.902-.394 2.344-.938.475-.584.742-1.44.878-2.497Z',
+  opencode: 'M22 24H2V0h20zM17 4.8H7v14.4h10z',
+  codebuddy: 'M18.777 1.647c.28-.02.536.114.972.51 1.018.926 2.437 2.828 3.318 4.452l.34.631.482.24.11.06v3.638a5.206 5.206 0 00-5.32-1.23c-.491.166-1.021.471-2.08 1.082l-6.09 3.516c-1.057.61-1.586.916-1.975 1.259a5.208 5.208 0 00-1.493 5.572c.165.49.471 1.02 1.082 2.08l.315.543h-3.26c-.685 0-1.34-.135-1.939-.377-.169-.956-.009-1.789.469-2.335.158-.18.164-.189.13-.493a11.846 11.846 0 01-.057-1.711l.02-.444-.667-1.18C2.1 15.622 1.445 14.078 1.192 12.9c-.133-.647-.125-.934.04-1.146.1-.128.427-.261.822-.334.994-.175 3.162-.017 5.575.41l.25.043.551-.487c.915-.81 1.522-1.264 2.641-1.962 1.167-.73 2.484-1.331 3.967-1.807l.476-.152.261-.688c.937-2.471 1.896-4.293 2.58-4.9.235-.21.25-.22.422-.23zM12.139 18.2a1.203 1.203 0 011.642.44l1.296 2.243a1.204 1.204 0 01-2.083 1.203l-1.296-2.243a1.203 1.203 0 01.44-1.644zM18.629 14.452a1.203 1.203 0 011.642.44l1.295 2.244a1.203 1.203 0 11-2.083 1.203l-1.295-2.243a1.203 1.203 0 01.44-1.644z',
+  qwen: 'M12.604 1.34c.393.69.784 1.382 1.174 2.075a.18.18 0 00.157.091h5.552c.174 0 .322.11.446.327l1.454 2.57c.19.337.24.478.024.837-.26.43-.513.864-.76 1.3l-.367.658c-.106.196-.223.28-.04.512l2.652 4.637c.172.301.111.494-.043.77-.437.785-.882 1.564-1.335 2.34-.159.272-.352.375-.68.37-.777-.016-1.552-.01-2.327.016a.099.099 0 00-.081.05 575.097 575.097 0 01-2.705 4.74c-.169.293-.38.363-.725.364-.997.003-2.002.004-3.017.002a.537.537 0 01-.465-.271l-1.335-2.323a.09.09 0 00-.083-.049H4.982c-.285.03-.553-.001-.805-.092l-1.603-2.77a.543.543 0 01-.002-.54l1.207-2.12a.198.198 0 000-.197 550.951 550.951 0 01-1.875-3.272l-.79-1.395c-.16-.31-.173-.496.095-.965.465-.813.927-1.625 1.387-2.436.132-.234.304-.334.584-.335a338.3 338.3 0 012.589-.001.124.124 0 00.107-.063l2.806-4.895a.488.488 0 01.422-.246c.524-.001 1.053 0 1.583-.006L11.704 1c.341-.003.724.032.9.34zm-3.432.403a.06.06 0 00-.052.03L6.254 6.788a.157.157 0 01-.135.078H3.253c-.056 0-.07.025-.041.074l5.81 10.156c.025.042.013.062-.034.063l-2.795.015a.218.218 0 00-.2.116l-1.32 2.31c-.044.078-.021.118.068.118l5.716.008c.046 0 .08.02.104.061l1.403 2.454c.046.081.092.082.139 0l5.006-8.76.783-1.382a.055.055 0 01.096 0l1.424 2.53a.122.122 0 00.107.062l2.763-.02a.04.04 0 00.035-.02.041.041 0 000-.04l-2.9-5.086a.108.108 0 010-.113l.293-.507 1.12-1.977c.024-.041.012-.062-.035-.062H9.2c-.059 0-.073-.026-.043-.077l1.434-2.505a.107.107 0 000-.114L9.225 1.774a.06.06 0 00-.053-.031zm6.29 8.02c.046 0 .058.02.034.06l-.832 1.465-2.613 4.585a.056.056 0 01-.05.029.058.058 0 01-.05-.029L8.498 9.841c-.02-.034-.01-.052.028-.054l.216-.012 6.722-.012z',
+  kimi: 'M21.846 0a1.923 1.923 0 110 3.846H20.15a.226.226 0 01-.227-.226V1.923C19.923.861 20.784 0 21.846 0zM11.065 11.199l7.257-7.2c.137-.136.06-.41-.116-.41H14.3a.164.164 0 00-.117.051l-7.82 7.756c-.122.12-.302.013-.302-.179V3.82c0-.127-.083-.23-.185-.23H3.186c-.103 0-.186.103-.186.23V19.77c0 .128.083.23.186.23h2.69c.103 0 .186-.102.186-.23v-3.25c0-.069.025-.135.069-.178l2.424-2.406a.158.158 0 01.205-.023l6.484 4.772a7.677 7.677 0 003.453 1.283c.108.012.2-.095.2-.23v-3.06c0-.117-.07-.212-.164-.227a5.028 5.028 0 01-2.027-.807l-5.613-4.064c-.117-.078-.132-.279-.028-.381z',
+  minimax: 'M11.43 3.92a.86.86 0 1 0-1.718 0v14.236a1.999 1.999 0 0 1-3.997 0V9.022a.86.86 0 1 0-1.718 0v3.87a1.999 1.999 0 0 1-3.997 0V11.49a.57.57 0 0 1 1.139 0v1.404a.86.86 0 0 0 1.719 0V9.022a1.999 1.999 0 0 1 3.997 0v9.134a.86.86 0 0 0 1.719 0V3.92a1.998 1.998 0 1 1 3.996 0v11.788a.57.57 0 1 1-1.139 0zm10.572 3.105a2 2 0 0 0-1.999 1.997v7.63a.86.86 0 0 1-1.718 0V3.923a1.999 1.999 0 0 0-3.997 0v16.16a.86.86 0 0 1-1.719 0V18.08a.57.57 0 1 0-1.138 0v2a1.998 1.998 0 0 0 3.996 0V3.92a.86.86 0 0 1 1.719 0v12.73a1.999 1.999 0 0 0 3.996 0V9.023a.86.86 0 1 1 1.72 0v6.686a.57.57 0 0 0 1.138 0V9.022a2 2 0 0 0-1.998-1.997',
+  deepseek: 'M23.748 4.482c-.254-.124-.364.113-.512.234-.051.039-.094.09-.137.136-.372.397-.806.657-1.373.626-.829-.046-1.537.214-2.163.848-.133-.782-.575-1.248-1.247-1.548-.352-.156-.708-.311-.955-.65-.172-.241-.219-.51-.305-.774-.055-.16-.11-.323-.293-.35-.2-.031-.278.136-.356.276-.313.572-.434 1.202-.422 1.84.027 1.436.633 2.58 1.838 3.393.137.093.172.187.129.323-.082.28-.18.552-.266.833-.055.179-.137.217-.329.14a5.526 5.526 0 01-1.736-1.18c-.857-.828-1.631-1.742-2.597-2.458a11.365 11.365 0 00-.689-.471c-.985-.957.13-1.743.388-1.836.27-.098.093-.432-.779-.428-.872.004-1.67.295-2.687.684a3.055 3.055 0 01-.465.137 9.597 9.597 0 00-2.883-.102c-1.885.21-3.39 1.102-4.497 2.623C.082 8.606-.231 10.684.152 12.85c.403 2.284 1.569 4.175 3.36 5.653 1.858 1.533 3.997 2.284 6.438 2.14 1.482-.085 3.133-.284 4.994-1.86.47.234.962.327 1.78.397.63.059 1.236-.03 1.705-.128.735-.156.684-.837.419-.961-2.155-1.004-1.682-.595-2.113-.926 1.096-1.296 2.746-2.642 3.392-7.003.05-.347.007-.565 0-.845-.004-.17.035-.237.23-.256a4.173 4.173 0 001.545-.475c1.396-.763 1.96-2.015 2.093-3.517.02-.23-.004-.467-.247-.588zM11.581 18c-2.089-1.642-3.102-2.183-3.52-2.16-.392.024-.321.471-.235.763.09.288.207.486.371.739.114.167.192.416-.113.603-.673.416-1.842-.14-1.897-.167-1.361-.802-2.5-1.86-3.301-3.307-.774-1.393-1.224-2.887-1.298-4.482-.02-.386.093-.522.477-.592a4.696 4.696 0 011.529-.039c2.132.312 3.946 1.265 5.468 2.774.868.86 1.525 1.887 2.202 2.891.72 1.066 1.494 2.082 2.48 2.914.348.292.625.514.891.677-.802.09-2.14.11-3.054-.614zm1-6.44a.306.306 0 01.415-.287.302.302 0 01.2.288.306.306 0 01-.31.307.303.303 0 01-.304-.308zm3.11 1.596c-.2.081-.399.151-.59.16a1.245 1.245 0 01-.798-.254c-.274-.23-.47-.358-.552-.758a1.73 1.73 0 01.016-.588c.07-.327-.008-.537-.239-.727-.187-.156-.426-.199-.688-.199a.559.559 0 01-.254-.078c-.11-.054-.2-.19-.114-.358.028-.054.16-.186.192-.21.356-.202.767-.136 1.146.016.352.144.618.408 1.001.782.391.451.462.576.685.914.176.265.336.537.445.848.067.195-.019.354-.25.452z',
+  devin: 'M70 159.333V91.3471C70 88.3592 71.594 85.5983 74.1816 84.1044L133.043 50.1205C135.631 48.6265 138.819 48.6265 141.407 50.1205L200.269 84.1044C202.856 85.5983 204.45 88.3592 204.45 91.3471V126.068C204.708 137.606 210.806 148.734 221.531 154.926C232.256 161.117 244.942 160.834 255.063 155.289L285.132 137.929C287.719 136.435 290.907 136.435 293.495 137.929L352.357 171.913C354.944 173.406 356.538 176.167 356.538 179.155V247.123C356.538 250.111 354.944 252.872 352.357 254.366L293.495 288.35C290.907 289.844 287.719 289.844 285.132 288.35L255.306 271.13C245.146 265.456 232.344 265.117 221.534 271.358C210.809 277.55 204.711 288.678 204.453 300.215V334.926C204.453 337.914 202.859 340.675 200.271 342.169L141.41 376.153C138.822 377.647 135.634 377.647 133.046 376.153L74.1845 342.169C71.5969 340.675 70.0028 337.914 70.0028 334.926V266.959C70.0029 263.971 71.5969 261.21 74.1845 259.716L133.046 225.732C135.634 224.238 138.822 224.238 141.41 225.732L171.547 243.132C181.656 248.638 194.306 248.906 205.005 242.729C215.815 236.488 221.922 225.231 222.088 213.595C221.83 202.057 215.732 189.737 205.008 183.545C194.283 177.353 181.597 177.636 171.476 183.181L141.269 200.72C138.67 202.229 135.461 202.228 132.864 200.716L74.1576 166.562C71.5835 165.065 70 162.311 70 159.333Z',
+};
+
+/** Marks not on a 24 grid (Devin's comes from its 425-unit favicon, cropped of its margin). */
+const VIEWBOX: Partial<Record<AgentIconId, string>> = { devin: '48 48 330 330' };
+
+/** The Lobe Icons marks fill even-odd (so their cut-outs stay empty). */
+const EVEN_ODD = new Set<AgentIconId>(['codebuddy', 'qwen', 'kimi', 'deepseek']);
+
+/** Whether this agent has its own mark (those without, such as OpenFilm's own agent, use the OpenFilm mark). */
+export const hasAgentIcon = (id: string): id is AgentIconId => Object.hasOwn(PATHS, id);
+
+export function AgentIcon({ id, size = 18 }: { id: AgentIconId; size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox={VIEWBOX[id] ?? '0 0 24 24'} fill="currentColor" fillRule={EVEN_ODD.has(id) ? 'evenodd' : undefined} aria-hidden>
+      <path d={PATHS[id]} />
+    </svg>
+  );
+}

package/skill/assets/upstream/apps/desktop/chat/src/components/AttachmentCard.tsx

@@ -0,0 +1,34 @@
+/**
+ * What a message brought, as it shows in the composer and, the same, in the sent message: a picture or a video's
+ * frame as a 40px square, anything else as a card as tall: its type's icon on a small tile, its name, and under it
+ * what says most about it (a folder's place, a file's size).
+ */
+import React from 'react';
+import { Play } from 'lucide-react';
+
+/** A picture's square; the caller adds its border color and what a click does. */
+export const ATTACHMENT_THUMB = 'relative h-10 w-10 shrink-0 overflow-hidden rounded-[8px] border bg-[var(--fill-tsp)]';
+
+/** A card's shape, left-aligned even as a button; the caller adds its border color and what a click does. */
+export const ATTACHMENT_CARD = 'relative flex h-10 min-w-0 max-w-[180px] items-center gap-2 overflow-hidden rounded-[8px] border bg-[var(--fill-tsp)] pl-1.5 pr-2.5 text-left';
+
+export function AttachmentCardBody({ icon, name, detail }: { icon: React.ReactNode; name: string; detail?: string | null }) {
+  return (
+    <>
+      <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-[6px] bg-[var(--bg-active)] text-[var(--text-muted)]">{icon}</span>
+      <span className="flex min-w-0 flex-col">
+        <span className="truncate text-[11.5px] leading-tight text-[var(--text)]">{name}</span>
+        {detail ? <span className="truncate text-[10.5px] leading-tight text-[var(--text-muted)]">{detail}</span> : null}
+      </span>
+    </>
+  );
+}
+
+/** Over a video's frame: it is not a picture. */
+export function PlayMark() {
+  return (
+    <span aria-hidden className="pointer-events-none absolute inset-0 m-auto flex h-4 w-4 items-center justify-center rounded-full bg-black/55">
+      <Play size={8} className="translate-x-[0.5px] fill-white text-white" />
+    </span>
+  );
+}

package/skill/assets/upstream/apps/desktop/chat/src/components/AttachmentPreview.tsx

@@ -0,0 +1,331 @@
+'use client';
+
+/**
+ * Opens an attachment to look at it, for both the composer's pending attachments and
+ * those in sent messages. A tile only shows that something is there; this shows which one.
+ *
+ * Uses the shared PreviewFrame shell. Unknown types say they cannot be previewed rather
+ * than show a broken preview.
+ */
+import React from 'react';
+import { Download } from 'lucide-react';
+import { PREVIEW_BTN, PreviewFrame, previewMediaFit } from './PreviewFrame';
+import { Tooltip } from './Tooltip';
+import { attachmentIcon, attachmentKind } from '@/lib/project-resources';
+import { useT } from '@/i18n';
+import { prettyJsonSource } from '@/lib/pretty-json';
+
+export interface AttachmentPreviewItem {
+  name: string;
+  /**
+   * How it is sent to the model, not what it is; that comes from the name (see attachmentKind).
+   *
+   * Images go into the message, everything else only as a path. The preview does not
+   * use this to choose a player: an mp4 is a document here.
+   */
+  kind: 'image' | 'document';
+  /** A data URL, or any address the browser can open. */
+  url: string;
+  mediaType?: string;
+  /**
+   * Only a thumbnail, not the original.
+   *
+   * The case for sent messages: the original went to the agent's workspace, and only a
+   * copy at most 320px square is kept. It is shown at its own size with a note, not
+   * stretched, so it is not mistaken for the original's quality.
+   */
+  thumbOnly?: boolean;
+}
+
+/**
+ * An attachment's type icon, the same in the composer, in sent messages and in the
+ * assets list (see attachmentIcon in project-resources).
+ */
+export function AttachmentTypeIcon({
+  file,
+  size,
+  className,
+}: {
+  file: { name: string; mediaType?: string };
+  size: number;
+  className?: string;
+}) {
+  const Icon = attachmentIcon(file);
+  return <Icon size={size} className={className} />;
+}
+
+/** Extensions shown as plain text. */
+const TEXT_EXTENSIONS = new Set([
+  'txt', 'md', 'markdown', 'json', 'csv', 'tsv', 'srt', 'vtt', 'log',
+  'xml', 'yml', 'yaml', 'js', 'ts', 'tsx', 'jsx', 'css', 'html',
+]);
+
+function extensionOf(name: string): string {
+  const dot = name.lastIndexOf('.');
+  return dot > 0 ? name.slice(dot + 1).toLowerCase() : '';
+}
+
+type Body = 'image' | 'video' | 'audio' | 'pdf' | 'text' | 'none';
+
+/**
+ * Which player opens the attachment.
+ *
+ * The kind comes from the name (as in the assets list), then the extension for pdf and
+ * plain text. A thumbnail is always an image: the kept copy is a webp even when the
+ * original is an `.mp4`, and a `<video>` playing an image shows black.
+ */
+function bodyOf(item: AttachmentPreviewItem): Body {
+  if (item.thumbOnly) return 'image';
+  const kind = attachmentKind(item);
+  if (kind === 'image') return 'image';
+  if (kind === 'video') return 'video';
+  if (kind === 'audio') return 'audio';
+  const ext = extensionOf(item.name);
+  if (ext === 'pdf') return 'pdf';
+  if (TEXT_EXTENSIONS.has(ext)) return 'text';
+  return 'none';
+}
+
+/**
+ * A PDF needs a blob URL.
+ *
+ * Chrome does not load data: documents in an iframe (nor in top-level navigation): a
+ * data URL in `src` shows blank without an error. The same bytes as a blob: URL work.
+ */
+function useBlobUrl(dataUrl: string, enabled: boolean): string | null {
+  const [url, setUrl] = React.useState<string | null>(null);
+  React.useEffect(() => {
+    if (!enabled || !dataUrl.startsWith('data:')) {
+      setUrl(enabled ? dataUrl : null);
+      return undefined;
+    }
+    let objectUrl: string | null = null;
+    fetch(dataUrl)
+      .then((response) => response.blob())
+      .then((blob) => {
+        objectUrl = URL.createObjectURL(blob);
+        setUrl(objectUrl);
+      })
+      .catch(() => setUrl(null));
+    return () => {
+      if (objectUrl) URL.revokeObjectURL(objectUrl);
+    };
+  }, [dataUrl, enabled]);
+  return url;
+}
+
+export function AttachmentPreview({
+  item,
+  onClose,
+}: {
+  item: AttachmentPreviewItem;
+  onClose: () => void;
+}) {
+  const t = useT();
+  const body = bodyOf(item);
+  if (body === 'image' && !item.thumbOnly) return <OriginalImagePreview key={item.url} item={item} onClose={onClose} />;
+  const Icon = attachmentIcon(item);
+  /* The two kinds with their own shape. Audio and documents get a fixed reading area. */
+  const onStage = body === 'image' || body === 'video';
+
+  return (
+    <PreviewFrame
+      name={item.name}
+      onClose={onClose}
+      icon={<Icon size={15} className="shrink-0 text-white/45" />}
+      /* Images and video fit their own shape, so the black backdrop hugs the picture; a light
+         surround makes a frame look darker. Text gets a fixed reading area on the paper
+         color, laid out from the top left, not centered. */
+      fit={onStage}
+      bodyClassName={onStage ? 'bg-black' : 'bg-[var(--surface-2)]'}
+      actions={
+        /* No download for a thumbnail: a 320px copy under the original's name would be
+           mistaken for the original. */
+        item.thumbOnly ? null : (
+          <Tooltip label={t('assets.download')} side="bottom">
+            <a
+              href={item.url}
+              download={item.name}
+              aria-label={t('assets.download')}
+              className={`${PREVIEW_BTN} w-8 px-0`}
+            >
+              <Download size={14} />
+            </a>
+          </Tooltip>
+        )
+      }
+    >
+      <div
+        className={`min-h-0 flex-1 overflow-auto ${
+          body === 'text' || body === 'pdf' ? 'block' : 'flex items-center justify-center'
+        }`}
+      >
+        <PreviewBody item={item} body={body} />
+      </div>
+      {item.thumbOnly && (
+        <p className="shrink-0 border-t border-[var(--border)] px-4 py-2 text-[11.5px] text-[var(--text-faint)]">
+          {t('composer.thumbOnly')}
+        </p>
+      )}
+    </PreviewFrame>
+  );
+}
+
+/** Uses the original file URL in both modes; 1:1 never stretches a thumbnail. */
+function OriginalImagePreview({ item, onClose }: { item: AttachmentPreviewItem; onClose: () => void }) {
+  const t = useT();
+  const [actualSize, setActualSize] = React.useState(false);
+  const [size, setSize] = React.useState<{ w: number; h: number } | null>(null);
+  return (
+    <PreviewFrame name={item.name} onClose={onClose} bodyClassName="bg-black"
+      actions={<>
+        {size ? <span className="mr-2 hidden text-[11px] tabular-nums text-white/45 sm:block">{size.w} × {size.h}</span> : null}
+        <div className="flex rounded-lg bg-white/5 p-0.5">
+          <button type="button" aria-pressed={!actualSize} onClick={() => setActualSize(false)}
+            className={`${PREVIEW_BTN} ${!actualSize ? 'bg-white/10 text-white' : ''}`}>{t('assets.imageFit')}</button>
+          <button type="button" aria-label={t('assets.imageActualSize')} aria-pressed={actualSize} onClick={() => setActualSize(true)}
+            className={`${PREVIEW_BTN} ${actualSize ? 'bg-white/10 text-white' : ''}`}>100%</button>
+        </div>
+        <Tooltip label={t('assets.download')} side="bottom">
+          <a href={item.url} download={item.name} aria-label={t('assets.download')} className={`${PREVIEW_BTN} w-8 px-0`}><Download size={14} /></a>
+        </Tooltip>
+      </>}>
+      <div className="flex h-full min-h-0 w-full overflow-auto overscroll-contain">
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img src={item.url} alt={item.name} className="m-auto block shrink-0 object-contain"
+          onLoad={event => setSize({ w: event.currentTarget.naturalWidth, h: event.currentTarget.naturalHeight })}
+          style={actualSize && size
+            ? { width: size.w, height: size.h, maxWidth: 'none', maxHeight: 'none' }
+            : { maxWidth: '100%', maxHeight: '100%', width: 'auto', height: 'auto' }} />
+      </div>
+    </PreviewFrame>
+  );
+}
+
+function PreviewBody({ item, body }: { item: AttachmentPreviewItem; body: Body }) {
+  const t = useT();
+  const pdfUrl = useBlobUrl(item.url, body === 'pdf');
+
+  if (body === 'image') {
+    return (
+      // eslint-disable-next-line @next/next/no-img-element
+      <img
+        src={item.url}
+        alt={item.name}
+        /* Only maximums, no size: the box is the picture at its own ratio, and a thumbnail
+           is never scaled up into a blur. */
+        style={previewMediaFit()}
+        className={item.thumbOnly ? 'p-6' : undefined}
+      />
+    );
+  }
+  if (body === 'video') return <VideoPreview item={item} />;
+  if (body === 'audio') return <AudioPreview item={item} />;
+  if (body === 'pdf') {
+    if (!pdfUrl) return <div className="h-full" />;
+    return <iframe src={pdfUrl} title={item.name} className="h-full w-full" />;
+  }
+  if (body === 'text') return <TextPreview dataUrl={item.url} name={item.name} />;
+
+  /* No preview, but still the type's icon, so a .zip and an .xlsx look different. */
+  return (
+    <div className="flex flex-col items-center gap-3 p-10 text-center">
+      <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-[var(--surface)]">
+        <AttachmentTypeIcon file={item} size={30} className="text-[var(--text-faint)]" />
+      </div>
+      <p className="text-[12.5px] text-[var(--text-muted)]">{t('assets.noPreview')}</p>
+    </div>
+  );
+}
+
+/**
+ * A video.
+ *
+ * The size is measured, not passed in: an attachment is only a URL, so its orientation
+ * is known once the metadata arrives.
+ *
+ * Until then it reserves 16:9. Before metadata a `<video>` reports 300×150, and the box
+ * fits it, so it would flash small and then jump. Most videos are 16:9; a vertical one
+ * reflows once, while still black.
+ */
+function VideoPreview({ item }: { item: AttachmentPreviewItem }) {
+  const t = useT();
+  const [size, setSize] = React.useState<{ w: number; h: number } | null>(null);
+  const [failed, setFailed] = React.useState(false);
+
+  if (failed) {
+    return <p className="p-10 text-[12.5px] text-white/60">{t('assets.previewFailed')}</p>;
+  }
+  return (
+    <video
+      src={item.url}
+      controls
+      playsInline
+      preload="metadata"
+      style={previewMediaFit(size?.w ?? 16, size?.h ?? 9)}
+      onLoadedMetadata={(event) => {
+        const el = event.currentTarget;
+        if (el.videoWidth > 0 && el.videoHeight > 0) {
+          setSize({ w: el.videoWidth, h: el.videoHeight });
+        }
+      }}
+      onError={() => setFailed(true)}
+    />
+  );
+}
+
+/**
+ * Audio: no picture, so an icon and a player on the paper color.
+ */
+function AudioPreview({ item }: { item: AttachmentPreviewItem }) {
+  const t = useT();
+  const Icon = attachmentIcon(item);
+  const [failed, setFailed] = React.useState(false);
+
+  return (
+    <div className="flex w-full flex-col items-center gap-5 p-10">
+      <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-[var(--surface)]">
+        <Icon size={30} className="text-[var(--text-faint)]" />
+      </div>
+      {failed ? (
+        <p className="text-[12.5px] text-[var(--text-muted)]">{t('assets.previewFailed')}</p>
+      ) : (
+        <audio src={item.url} controls preload="metadata" className="w-full max-w-[480px]" onError={() => setFailed(true)} />
+      )}
+    </div>
+  );
+}
+
+function TextPreview({ dataUrl, name }: { dataUrl: string; name: string }) {
+  const t = useT();
+  const [text, setText] = React.useState<string | null>(null);
+  const [failed, setFailed] = React.useState(false);
+
+  React.useEffect(() => {
+    let alive = true;
+    setText(null);
+    setFailed(false);
+    // fetch decodes data URLs too: base64 and UTF-8 handled by the browser; atob would break non-ASCII text.
+    fetch(dataUrl)
+      .then((response) => response.text())
+      .then((body) => {
+        if (alive) setText(prettyJsonSource(name, body));
+      })
+      .catch(() => {
+        if (alive) setFailed(true);
+      });
+    return () => {
+      alive = false;
+    };
+  }, [dataUrl, name]);
+
+  if (failed) {
+    return <p className="p-10 text-[12.5px] text-[var(--text-muted)]">{t('assets.previewFailed')}</p>;
+  }
+  if (text === null) return <div className="h-[200px]" />;
+  return (
+    <pre className="w-full whitespace-pre-wrap break-words p-5 font-mono text-[12px] leading-relaxed text-[var(--text)]">
+      {text}
+    </pre>
+  );
+}

package/skill/assets/upstream/apps/desktop/chat/src/components/BalanceNotice.tsx

@@ -0,0 +1,22 @@
+/**
+ * A turn the app's own agent could not finish because the service its model runs on has no balance left (lib/balance):
+ * the same words for every service, and "Manage", its own page to top it up, when the app knows it.
+ */
+import { useT } from '@/i18n';
+import type { Balance } from '@/lib/balance';
+
+export function BalanceNotice({ balance }: { balance: Balance }) {
+  const t = useT();
+  return (
+    <p role="status" className="text-xs text-[var(--warn)]">
+      <b className="font-medium">{t('balance.title').replaceAll('{provider}', balance.provider)}</b>{' '}
+      {t('balance.body').replaceAll('{provider}', balance.provider)}
+      {balance.url ? (
+        <>
+          {' '}
+          <a href={balance.url} target="_blank" rel="noreferrer" className="underline underline-offset-2 hover:text-[var(--text)]">{t('balance.manage')}</a>
+        </>
+      ) : null}
+    </p>
+  );
+}

package/skill/assets/upstream/apps/desktop/chat/src/components/BrandLogo.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import React from 'react';
+
+/*
+ * The mark: a playhead over two clips, together an F, in the surrounding text color (currentColor).
+ * The clips are cut away around the playhead (a real gap, showing what is behind), so its shape holds in one color.
+ */
+const VIEWBOX = '8 6 84 92';
+const PLAYHEAD = 'M17 12H37Q40 12 40 15V27Q40 29 38.5 30.5L31 37V88Q31 92 27 92Q23 92 23 88V37L15.5 30.5Q14 29 14 27V15Q14 12 17 12Z';
+
+export function BrandLogo({ size = 18, className }: { size?: number; className?: string }) {
+  const gap = `openfilm-gap-${React.useId().replace(/:/g, '')}`;
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox={VIEWBOX}
+      fill="currentColor"
+      className={`block shrink-0 ${className ?? ''}`.trim()}
+      role="img"
+      aria-label="OpenFilm"
+    >
+      <mask id={gap} maskUnits="userSpaceOnUse" x="0" y="0" width="100" height="100">
+        <rect width="100" height="100" fill="#fff" />
+        <path d={PLAYHEAD} stroke="#000" strokeWidth="7" strokeLinejoin="round" />
+      </mask>
+      <g mask={`url(#${gap})`}>
+        <rect x="22" y="12" width="64" height="20" rx="5" />
+        <rect x="25" y="44" width="47" height="19" rx="5" />
+      </g>
+      <path d={PLAYHEAD} />
+    </svg>
+  );
+}

package/skill/assets/upstream/apps/desktop/chat/src/components/ComposerCard.tsx

@@ -0,0 +1,182 @@
+'use client';
+
+/**
+ * The cards above the composer and in the conversation that ask the person to decide: one shell, one set of
+ * buttons.
+ *
+ * Background and border follow the composer (they sit together), radius 12, the same shadow as the model menu.
+ * Buttons have one height (28) and three weights: primary (filled), secondary (outlined), quiet (text only).
+ * Choice rows are shared by question and permission cards: one choice per row, a number key cap on the left,
+ * pressing the number picks it, as in Claude Code's menus.
+ */
+import React from 'react';
+import { ChevronDown, X } from 'lucide-react';
+import { useT } from '@/i18n';
+import { inChat } from '@/lib/chat-layer';
+
+/** The shell of floating layers (menus, dropdowns): the cards' shadow, on the surface color. */
+export const POPOVER_CHROME: React.CSSProperties = {
+  background: 'var(--bg-surface)',
+  border: '1px solid var(--border-strong)',
+  borderRadius: 12,
+  boxShadow: '0 16px 40px -8px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.18)',
+};
+
+export function ComposerCard({
+  icon,
+  title,
+  body,
+  onClose,
+  collapse,
+  children,
+  role,
+  className = '',
+}: {
+  icon?: React.ReactNode;
+  title: React.ReactNode;
+  body?: React.ReactNode;
+  onClose?: () => void;
+  /**
+   * Collapsible: a collapse button left of the close button. Collapsed, only the title row remains (the matter still
+   * waits, just out of the way); the title or the button expands it. `label` is the button's current screen-reader text.
+   */
+  collapse?: { collapsed: boolean; onToggle: () => void; label: string };
+  children?: React.ReactNode;
+  role?: React.AriaRole;
+  className?: string;
+}) {
+  const t = useT();
+  const collapsed = collapse?.collapsed ?? false;
+  const buttons = (onClose ? 1 : 0) + (collapse ? 1 : 0);
+  return (
+    <div
+      {...(role ? { role } : {})}
+      className={`relative rounded-[12px] border border-[var(--composer-border)] bg-[var(--composer-bg)] px-3.5 shadow-[0_8px_24px_-12px_rgba(0,0,0,0.35)] ${collapsed ? 'py-2' : 'pb-3 pt-3'} ${className}`}
+    >
+      <div className={`absolute right-2 flex items-center gap-0.5 ${collapsed ? 'top-1.5' : 'top-2'}`}>
+        {collapse ? (
+          <button
+            type="button"
+            onClick={collapse.onToggle}
+            aria-label={collapse.label}
+            aria-expanded={!collapsed}
+            className="flex h-6 w-6 items-center justify-center rounded-md text-[var(--text-faint)] transition hover:bg-[var(--bg-hover)] hover:text-[var(--text)]"
+          >
+            <ChevronDown size={14} strokeWidth={1.75} className={`transition-transform duration-150 ${collapsed ? 'rotate-180' : ''}`} />
+          </button>
+        ) : null}
+        {onClose ? (
+          <button
+            type="button"
+            onClick={onClose}
+            aria-label={t('project.close')}
+            className="flex h-6 w-6 items-center justify-center rounded-md text-[var(--text-faint)] transition hover:bg-[var(--bg-hover)] hover:text-[var(--text)]"
+          >
+            <X size={14} strokeWidth={1.75} />
+          </button>
+        ) : null}
+      </div>
+      <div className={`flex items-start gap-2 ${buttons === 2 ? 'pr-14' : buttons === 1 ? 'pr-7' : ''}`}>
+        {icon ? <span className="mt-[2px] shrink-0 text-[var(--text-muted)]">{icon}</span> : null}
+        <div className="min-w-0 flex-1">
+          {collapse && collapsed ? (
+            <button type="button" onClick={collapse.onToggle} className="block w-full min-w-0 truncate text-left text-[13px] font-medium leading-snug text-[var(--text)]">
+              {title}
+            </button>
+          ) : (
+            <h3 className="text-[13px] font-medium leading-snug text-[var(--text)]">{title}</h3>
+          )}
+          {body && !collapsed ? <div className="mt-1 text-[12.5px] leading-relaxed text-[var(--text-muted)]">{body}</div> : null}
+        </div>
+      </div>
+      {collapsed ? null : children}
+    </div>
+  );
+}
+
+export function CardActions({ children, className = '' }: { children: React.ReactNode; className?: string }) {
+  return <div className={`mt-3 flex items-center justify-end gap-2 ${className}`}>{children}</div>;
+}
+
+type Weight = 'primary' | 'secondary' | 'quiet' | 'danger';
+
+const WEIGHT: Record<Weight, string> = {
+  primary: 'bg-[var(--text)] text-[var(--panel)] hover:opacity-90',
+  secondary: 'text-[var(--text)] ring-1 ring-inset ring-[var(--border-strong)] hover:bg-[var(--bg-hover)]',
+  quiet: 'text-[var(--text-muted)] hover:text-[var(--text)]',
+  danger: 'bg-[var(--err)] text-white hover:brightness-110',
+};
+
+export const CardButton = React.forwardRef<
+  HTMLButtonElement,
+  React.ButtonHTMLAttributes<HTMLButtonElement> & { weight?: Weight }
+>(function CardButton({ weight = 'secondary', className = '', type = 'button', ...props }, ref) {
+  return (
+    <button
+      {...props}
+      ref={ref}
+      type={type}
+      className={`inline-flex h-7 shrink-0 items-center justify-center gap-1.5 rounded-lg px-3 text-[12px] font-medium outline-none transition focus-visible:ring-2 focus-visible:ring-[var(--text)]/30 disabled:pointer-events-none disabled:opacity-50 ${WEIGHT[weight]} ${className}`}
+    />
+  );
+});
+
+/**
+ * One choice per row: a key cap (1, 2, 3…), the name, a line of description below; a tick on the selected row.
+ * Without `onPick` the row can't be clicked (an answered question stays visible but can't be changed).
+ */
+export function ChoiceRow({
+  index,
+  label,
+  description,
+  selected = false,
+  onPick,
+}: {
+  index?: number;
+  label: React.ReactNode;
+  description?: React.ReactNode;
+  selected?: boolean;
+  onPick?: () => void;
+}) {
+  const body = (
+    <>
+      {index != null ? (
+        <span className="mt-[1px] flex h-[18px] min-w-[18px] shrink-0 items-center justify-center rounded-[5px] border border-[var(--border)] px-1 text-[10.5px] tabular-nums text-[var(--text-faint)]">
+          {index}
+        </span>
+      ) : null}
+      <span className="flex min-w-0 flex-1 flex-col">
+        <span className="text-[13px] leading-snug text-[var(--text)]">{label}</span>
+        {description ? <span className="mt-0.5 text-[11.5px] leading-snug text-[var(--text-faint)]">{description}</span> : null}
+      </span>
+      {selected ? <span aria-hidden className="mt-[1px] shrink-0 text-[12px] text-[var(--text)]">✓</span> : null}
+    </>
+  );
+  const shell = 'flex w-full items-start gap-2.5 rounded-lg px-2 py-1.5 text-left';
+  if (!onPick) return <div className={`${shell} ${selected ? 'bg-[var(--bg-hover)]' : 'opacity-70'}`}>{body}</div>;
+  return (
+    <button type="button" onClick={onPick} className={`${shell} outline-none transition hover:bg-[var(--bg-hover)] focus-visible:bg-[var(--bg-hover)]`}>
+      {body}
+    </button>
+  );
+}
+
+/** While a card is open and focus is not in a text field, 1–9 picks that choice. */
+export function useNumberKeys(count: number, onPick: ((index: number) => void) | null): void {
+  React.useEffect(() => {
+    if (!onPick || count <= 0) return undefined;
+    const onKey = (event: KeyboardEvent) => {
+      if (event.metaKey || event.ctrlKey || event.altKey) return;
+      const target = event.target as HTMLElement | null;
+      /* a number typed in Studio (a field there, a shortcut) is not an answer to the agent's question */
+      if (!inChat(target) && target !== document.body) return;
+      if (target?.closest('input, textarea, [contenteditable="true"]')) return;
+      const n = Number(event.key);
+      if (!Number.isInteger(n) || n < 1 || n > count) return;
+      event.preventDefault();
+      onPick(n - 1);
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [count, onPick]);
+}