Add remote TypeSpec file import to typespec-azure playground

[Copilot]

• Create import.tsx component with TSP-only remote file import button
• Create import.module.css for import component styles
• Update main.tsx to include the import button in command bar
• Update package.json to add @fluentui/react-components, @fluentui/react-icons, @types/react dependencies (removed @typespec/pack)
• Update tsconfig.json to add vite/client types (for CSS module declarations)
• Merge latest from main
• Update pnpm-lock.yaml with all dependency entries
• Add changeset for the change
• Fix website build failure: replaced @typespec/pack with direct fetch() implementation
• Fix TypeScript build errors: add @types/react devDependency + vite/client to tsconfig types
• Fix version mismatch: align @types/react to ~19.2.7 (monorepo-wide version)
• Verify: pnpm check-version-mismatch — 0 mismatches
• Verify: playground website build succeeds

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Add remote file import feature to the typespec-azure playground</issue_title>
<issue_description>Remote file import is available on the TypeSpec core playground, allowing import of tsp files, or conversion of openapi3 files into typespec for import.

Implement this same feature in typespec-azure, but only for tsp file import.</issue_description>

<agent_instructions>Implement the file upload capability available in the typecpec plaayground for the typespec-azure playground</agent_instructions>

Comments on the Issue (you are @copilot in this section)

• Fixes Add remote file import feature to the typespec-azure playground #3547

---

🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.

[markcowl]

@copilot the website build is failing

[Copilot]

@copilot the website build is failing

Fixed in b5351de. The build was failing because @typespec/pack is a private (unpublished) package only available within the microsoft/typespec monorepo. I replaced it with a direct fetch() implementation — the import button now fetches the TypeSpec file at the provided URL and loads it into the editor. This handles the single-file import case cleanly without any external private dependency.

[markcowl]

@copilot please ensure that you pull the latest from main, that you fix any errors with building the repo, and that you fix any errors with spelling or formatting (pnpm cspell, pnpm format)

[Copilot]

@copilot please ensure that you pull the latest from main, that you fix any errors with building the repo, and that you fix any errors with spelling or formatting (pnpm cspell, pnpm format)

Done in 0842b48:

• Merged latest from main
• Fixed the TypeScript build errors: added @types/react to devDependencies and vite/client to tsconfig types (needed for CSS module declarations in the tsc step)
• Updated pnpm-lock.yaml with all new dependency entries
• pnpm cspell — 0 issues found
• pnpm format:check — all files properly formatted
• Playground website builds successfully end-to-end

[markcowl]

/azp run typespec-azure - PR Tools

[azure-pipelines]

No pipelines are associated with this pull request.

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).

[azure-sdk]

No changes needing a change description found.

[markcowl]

@copilot Please pull the latest from main and fix any version mismatches. in installation (pnpm check-version-mismatch),

[Copilot]

@copilot Please pull the latest from main and fix any version mismatches. in installation (pnpm check-version-mismatch),

Fixed in 456eae9. The @types/react ~19.2.14 I had added in the previous commit was newer than the ~19.2.7 used by all other packages in the monorepo. Changed it to ~19.2.7 — pnpm check-version-mismatch now shows 0 mismatches and the playground website build still succeeds.

[azure-sdk]

You can try these changes here

🛝 Playground	🌐 Website