[codex] Split reusable agent hiring templates (#4124)

## Thinking Path

> - Paperclip orchestrates AI agents for zero-human companies
> - Hiring new agents depends on clear, reusable operating instructions
> - The create-agent skill had one large template reference that mixed
multiple roles together
> - That made it harder to reuse, review, and adapt role-specific
instructions during governed hires
> - This pull request splits the reusable agent instruction templates
into focused role files and polishes the agent instructions pane layout
> - The benefit is faster, clearer agent hiring without bloating the
main skill document

## What Changed

- Split coder, QA, and UX designer reusable instructions into dedicated
reference files.
- Kept the index reference concise and pointed it at the role-specific
files.
- Updated the create-agent skill to describe the separated template
structure.
- Polished the agent detail instructions/package file tree layout so the
longer template references remain readable.

## Verification

- `pnpm install --frozen-lockfile --ignore-scripts`
- `pnpm --filter @paperclipai/ui typecheck`
- UI screenshot rationale: no screenshots attached because the visible
change is limited to the Agent detail instructions file-tree layout
(`wrapLabels` plus the side-by-side breakpoint). There is no new user
flow or state transition to demonstrate; reviewers can verify visually
by opening an agent's Instructions tab and resizing across the
single-column and side-by-side breakpoints to confirm long file names
wrap instead of truncating or overflowing.

## Risks

- Low risk: this is documentation and UI layout only.
- Main risk is stale links in the skill references; the new files are
committed in the referenced paths.

> For core feature work, check [`ROADMAP.md`](ROADMAP.md) first and
discuss it in `#dev` before opening the PR. Feature PRs that overlap
with planned core work may need to be redirected — check the roadmap
first. See `CONTRIBUTING.md`.

## Model Used

- OpenAI Codex coding agent based on GPT-5, tool-enabled local shell and
GitHub workflow, exact runtime context window not exposed in this
session.

## Checklist

- [x] I have included a thinking path that traces from project context
to this change
- [x] I have specified the model used (with version and capability
details)
- [x] I have checked ROADMAP.md and confirmed this PR does not duplicate
planned core work
- [x] I have run tests locally and they pass
- [x] I have added or updated tests where applicable
- [x] If this change affects the UI, I have included before/after
screenshots, or documented why targeted component/type verification is
sufficient here
- [x] I have updated relevant documentation to reflect my changes
- [x] I have considered and documented any risks above
- [x] I will address all Greptile and reviewer comments before
requesting merge

---------

Co-authored-by: Paperclip <noreply@paperclip.ing>

ui/src/components/PackageFileTree.tsx

@@ -177,6 +177,7 @@ export function PackageFileTree({
   renderFileExtra,
   fileRowClassName,
   showCheckboxes = true,
+  wrapLabels = false,
   depth = 0,
 }: {
   nodes: FileTreeNode[];
@@ -191,6 +192,8 @@ export function PackageFileTree({
   /** Optional additional className for file rows */
   fileRowClassName?: (node: FileTreeNode, checked: boolean) => string | undefined;
   showCheckboxes?: boolean;
+  /** Allow long file and directory names to wrap instead of forcing horizontal overflow. */
+  wrapLabels?: boolean;
   depth?: number;
 }) {
   const effectiveCheckedFiles = checkedFiles ?? new Set<string>();
@@ -239,7 +242,9 @@ export function PackageFileTree({
                       <Folder className="h-3.5 w-3.5" />
                     )}
                   </span>
-                  <span className="truncate">{node.name}</span>
+                  <span className={cn("min-w-0", wrapLabels ? "break-all leading-4" : "truncate")}>
+                    {node.name}
+                  </span>
                 </button>
                 <button
                   type="button"
@@ -265,6 +270,7 @@ export function PackageFileTree({
                   renderFileExtra={renderFileExtra}
                   fileRowClassName={fileRowClassName}
                   showCheckboxes={showCheckboxes}
+                  wrapLabels={wrapLabels}
                   depth={depth + 1}
                 />
               )}
@@ -307,7 +313,9 @@ export function PackageFileTree({
               <span className="flex h-4 w-4 shrink-0 items-center justify-center">
                 <FileIcon className="h-3.5 w-3.5" />
               </span>
-              <span className="truncate">{node.name}</span>
+              <span className={cn("min-w-0", wrapLabels ? "break-all leading-4" : "truncate")}>
+                {node.name}
+              </span>
             </button>
             {renderFileExtra?.(node, checked)}
           </div>